I'm trying to replace the default booking.com affiliate calendar by a clean jQuery instance. Replicating (and improving) the initial UI / UX is quite straightforward. I'm stuck when it comes to matching the parameters needed by booking.com.
As many others posted here, I need my friendly date for visitors AND another output that will be passed on to booking.com. I've used AltField, no probs here. The complexity (for me) is that booking requires "year month" and "day" as 2 separate parameters.
I tried setting up multiple altfields, I tried parsing/substringing my altfield, but all in vain.
Could you please give me some directions ?
$(".full_date").datepicker({
showOn: 'button',
buttonText: 'Here',
dateFormat: 'D, dd M yy',
altFormat: "yy-mm_dd",
altField: "checkin_year_month",
onClose: function (dateText, picker) {
dateArr = dateText.split('_');
full_date.siblings('.checkin_year_month').val(dateArr[0]);
full_date.siblings('.checkin_day').val(dateArr[1]);
}
});
I've also setup a jsFiddle if that helps !
Thanks
Greg
In case you have't solved this yet.
your problem is on this line :
dateArr = dateText.split('_');
What would be better is this :
var dateObject = $(this).datepicker("getDate");
This will return you a Date object that you can work with :
dateObject.getMonth()
Here is a EXAMPLE
Related
So I know there are plenty of threads and I've gone through the official documentation and tried the options laid out here, but this Datepicker is my mortal enemy and it simply never does what I, in any way, seek to do:
Currently (and for whatever reason) only future dates can be picked. I, on the other hand, want only dates that are longer than 21 years in the past to be pickable. Along with everything in the past. In fact, just having any dates in the past enabled would already help.
This is what I have at the moment - and to my surprise the DateFormat works - and in general Dates get saved.
$('.datepicker').datepicker({
format: 'dd/mm/yyyy'
endDate: '+0d',
autoclose: true
});
Working with this gem.
With every project no matter how complex or simple, this is the only problem I am having. Always, and ever :).
$('.datepicker').datepicker({
format: 'dd/mm/yyyy'
startDate: '-Infinity',
endDate: '-21y',
autoclose: true
});
I am using JqueryUI datepicker, and I cannot call 'setDate' method on a datepicker if I use a format like this: 'mm yy'.
See my snippet here:
$(function(){
$('#datepicker').datepicker(
{dateFormat: 'mm yy'}
);
$('#datepicker').datepicker('setDate', new Date(2010, 10, 1));
var d = $("#datepicker" ).datepicker('getDate');
alert(d); //this should alert 2010,10,1, but it is not! it alerts the current time instead
});
http://jsfiddle.net/wintlu/DmmQU/
My observation is that:
if I use format including day part, like 'dd mm yy', then i can use setDate, but if I use format without day part, like 'mm yy', then i cannot use setDate.
My question is :
Is this a bug of datepicker?
If so, what is the walk around ?
Thanks in advance
I have a very simple html page with the following javascript in it
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
$( "#datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
});
Then I have the input target element
<input id="datepicker" type="text" class="boxtpl" name="${field.name}" value="${release?.startDate}">
and I see the html of the input from viewing source is valid...
<input id="datepicker" type="text" class="boxtpl" name="release.startDate" value="2012-02-07">
so when I do the GET request to get this page, my date ONLY renders if I delete that last line in the javascript that sets the format WHICH is very important as that is the format I have playframework configured for!!!!! If I don't set the format, the POST then breaks because formats don't match :(
Why is setting the format of datepicker clearing out my date????
I can try scripting more to set it manually though I tried calling the api to set it and that DID NOT work so it might not work doing raw javascript set either...not sure yet. anyone know why this occurs or better yet how to fix it???
thanks,
Dean
Not sure if it's a bug in jquery ui, but it seems that setting the format effectively deletes the default value. You can fix this with a chained
.datepicker("setDate", datepicker_default_val );
However, what I did in my web app was define a CSS class ".datepicker" then writing this code snippet provide date pickers to any with that class.
$( ".datepicker" ).each( function(index){
var datepicker_default_val = $(this).val();
$( this ).datepicker({numberOfMonths: 3, showButtonPanel: true});
$( this ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
$( this ).datepicker("setDate", datepicker_default_val );
});
What this does is grabs every element with the tagged class, saves the default value to local var datepicker_default_val, sets the formatting, and then restores the value.
Little bit of a hack but put that in a $(document).ready(function(){ }); block and you should be good.
If the input field does not match the default dateFormat, it will simply delete it.
The option setting in the second line is too late then, after the first line it is already deleted.
Solution: Set the dateFormat in the first call:
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd"
});
What do you mean by:
the POST then breaks because formats don't match
Also, I don't quite understand what you mean by your GET and POST requests? Do you mean the form methods? In such case you should amend your HTML code with the surrounding form tags and add a submit button so we can understand exactly what you want and try to reproduce the problem.
Anyway, see if this is what you want : http://jsfiddle.net/DAMEj/
Actually I just included the Jquery UI library in addition to their CSS for a full test of your code.
Besides, I don't get the purpose of these attributes name="${field.name}" value="${release?.startDate}", could you clarify?
And finally, what is it exactly that doesn't work for you?
EDIT:
So according to my last comment about the default date display, please check this out http://jsfiddle.net/sidou/ZUrPj/ and see if it fits your needs.
Happy JS fiddling ;)
If the input value is not parseable by jQuery, it will indeed delete the value from the input field (and even from the altField, if you set one).
For example, this might happen when using different locales. If you set the datepicker dateFormat to 'dd MM yy' and use French localisation, it will parse "10 Mars 2012", however a value of "10 March 2012" will get deleted.
In my case, i found than the JQuery was inyected by a "formoid" solution, soo, i just replace the function where the data was reinjected, adding the line
"value": date.attr("value")
I mixed with the Shaun answer too:
jQuery(".formoid-flat-blue").find('input[type=date]').each(function(){
var date = $(this);
var datepicker_default_val = $(this).val();
var text = $('<input type="text">');
text.get(0).className = date.get(0).className;
text.attr({
"name": date.attr("name"),
"placeholder": date.attr("placeholder"),
"required": date.attr("required"),
"value": date.attr("value")
});
date.replaceWith(text);
text.datepicker({
format: _dateFormat || date.attr("data-format") || 'yyyy-mm-dd'
});
if (datepicker_default_val) {
text.datepicker({
setDate: datepicker_default_val
});
}
});
Greeting,
I would like the jqueryui datapicker to use polish localization. Additionally, the dates have to be limited so it should not be possible to choose past dates. I have something like this:
$.datepicker.setDefaults($.datepicker.regional['pl']);
$("#StartDate").datepicker({ minDate: 0, maxDate: '+1Y ' });
$("#StartDate").datepicker('option', $.datepicker.regional['pl']);
Limitation works find, but I cannot achieve polish localization. Please help.
Make sure you included http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepicker-pl.js.
Also you don't need to set the option, setDefaults is enough.
$.datepicker.setDefaults($.datepicker.regional['pl']);
$("#StartDate").datepicker({ minDate: 0, maxDate: '+1Y ' });
How can I change the selected date of jquery Date picker dynamically on the fly?
I have say created a inline date picker.
Then after some time, I want to reflect a different date there without recreating the datepicker from the scratch.
I tried the setDate method, but did not work, and there is not much documentation in the doc.
There is another (extended?) plugin here, but I want to use the plugin which is shipped with jquery.ui.all.js.
What version of jQuery-UI are you using? I've tested the following with 1.6r6, 1.7 and 1.7.1 and it works:
//Set DatePicker to October 3, 2008
$('#dateselector').datepicker("setDate", new Date(2008,9,03) );
Check that the date you are trying to set it to lies within the allowed date range if the minDate or maxDate options are set.
This example shows of how to use default value in the dropdown calendar and value in the text box. It also shows how to set default value to previous date.
selectedDate is another variable that holds current selected date of the calendar control
var date = new Date();
date.setDate(date.getDate() - 1);
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
defaultDate: date,
onSelect: function () {
selectedDate = $.datepicker.formatDate("yy-mm-dd", $(this).datepicker('getDate'));
}
});
$("#datepicker").datepicker("setDate", date);
Noted that for DatePicker by Keith Wood (http://keith-wood.name/datepickRef.html) the following works - note that the setting of the default date is last:
$('#datepicker').datepick({
minDate: 0,
maxDate: '+145D',
multiSelect: 7,
renderer: $.datepick.themeRollerRenderer,
***defaultDate: new Date('1 January 2008')***
});
$('.date-pick').datePicker().val(new Date()).trigger('change')
finally, that what i look for the last few hours! I need initiate changes, not just setup date in text field!
For some reason, in some cases I couldn't make the setDate work.
A workaround I found is to simply update the value attribute of the given input.
Of course the datepicker itself won't be updated but if what you just look for is to display the date, it works fine.
var date = new Date(2008,9,3);
$("#your-input").val(date.getMonth()+"/"+date.getDate()+"/"+date.getFullYear());
// Will display 9/3/2008 in your #your-input input
This is a old thread but I just want to give some information how I have used. If you want to set today date you can simply apply it like below.
$("#datepickerid").datepicker("setDate", "0");
If you want to set some days before/after the current date then use the symbol -/+ symbol of how many days you want like below.
$("#datepickerid").datepicker("setDate", "-7");
$("#datepickerid").datepicker("setDate", "+5");
This works for me:
$("#dateselector").datepicker("option", "defaultDate", new Date(2008,9,3));
please Find below one it helps me a lot to set data function
$('#datepicker').datepicker({dateFormat: 'yy-mm-dd'}).datepicker('setDate', '2010-07-25');
setDate only seems to be an issue with an inline datepicker used in jquery UI, the specific error is InternalError: too much recursion.
In Html you can add your input field with a date picker like this
<input class="form-control date-picker fromDates" id="myDate" type="text">
and then in java script, initialize your datepicker and set your value to the date like this,
$('.fromDates').datepicker({
maxDate: '0',
dateFormat: "dd/mm/yy",
changeYear: true,
changeMonth: true,
yearRange: "-100:+0"
});
var myDateVal = moment('${value}').format('DD/MM/YYYY');
$('#myDate').datepicker().datepicker('setDate', myDateVal );
(In here fromdate attribute shows the previous dates of the current date)
var dt = new Date();
var renewal = moment(dt).add(1,'year').format('YYYY-MM-DD');
// moment().add(number, period)
// moment().subtract(number, period)
// period : year, days, hours, months, week...
I had a lot of trouble with the setDate method as well. seems to only work in v1. What does seem to work however is using the dpSetSelected method:
$("#dateselector").dpSetSelected(new Date(2010, 0, 26).asString());
good luck!
or you can simply have
$('.date-pick').datePicker().val(new Date()).trigger('change')