Using jquery-ui datepicker
I would like to use altField and altFormat to 2 datepickers on the same page but I can't figure out how to add these 2 options which are specific to each datepicker along with my common set of options.
Code sample below. #dt1 does not work, but #dt2 works. How can I get #dt1 to work while using the datepickerOpts?
var datepickerOpts = {
minDate: -2,
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd'
};
$('#dt1').datepicker(datepickerOpts,
{altField: '#alt1',
altFormat: 'mm-dd-yy'
});
$('#dt2').datepicker({
minDate: -2,
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
altField: '#alt2',
altFormat: '#'
});
You passed in altField and altFormat as one array option in #dt1, but you did put them as 2 different options in #dt2 (which is the right way). What you have to do is make a copy of the opts(in case you add new elements in the future) for dt1 and dt2, append the altField altFormat as part of the datepickerOpts, and pass them as the only option to datepicker initialization.
Related
Using date picker if the users fills out the start date field how to I make the end date field copy that same value?
$('#sdate').datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true ,
firstDay: 1,
onSelect : function(){
document.getElementById('edate').value = $.datepicker.formatDate('dd/mm/yy', '#sdate');
}
});
$('#edate').datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true ,
firstDay: 1
});
Change your onSelect function to:
onSelect: function () {
$('#edate').val(this.value);
}
jsFiddle example
Can someone explain me how to create a jquery UI datepicker with both properties changeMonth and localization?
I have these two lines of code:
$('.datePicker').datepicker($.datepicker.regional['en']);
$('.datePicker').datepicker({ changeMonth: true });
I'd like to merge them into a single line, since the second one seems to fail if not called when and only when constructing the datepicker for the first time. Unfortunately, I can't do this since I don't know to which property assign the $.datepicker.regional['en'].
Thanks.
I've already tried this, with no success: jQueryUI datepicker: Month/Year Menus with Localization
var obj = $.extend($.datepicker.regional['en'], { changeMonth: true, other settings... })
$('.datePicker').datepicker(obj);
Using jquery $.extend, we can combine both the settings object and the localizator object.
You can set any number of properties after you initialize the datapicker as follows:-
$.datepicker.setDefaults({
showOn: "both",
buttonImageOnly: true,
buttonImage: "calendar.gif",
buttonText: "Calendar"
});
I have two datePickers in the same page and I wanna change the second datepicker's minDate depending the first one. Here is my code:
$("#datepickerDepart" ).datepicker({
dateFormat: "mm-dd-yy",
minDate: 0,
onSelect: function(dateText, inst) {
var m = dateText.substring(0,2);
var d = dateText.substring(3,5);
var y = dateText.substring(6,10);
console.log(d);
console.log(m);
console.log(y);
var newDate = new Date(y,m-1,d);
console.log(newDate);
$('#datepickerReturn').val("");
$('#datepickerReturn').datepicker({
dateFormat: "mm-dd-yy",
minDate: newDate
})
}
});
But I have a question, the first time I select a date in the first datePicker, the minDate of second one will be set according to this, but when I reselect the first one, the second datePicker's minDate won't change anymore, it will remain. I don't know why. Please help!!
I just wanna the minDate of the second one will change as long as the selected date of the first one change.
You are updating the second datepicker incorrectly. I am assuming you have already initialized the second one previously, although your code posted doesn't appear to. You need to use the option syntax when updating it, instead of the constructor.
http://jqueryui.com/demos/datepicker/#option-minDate
$('#datepickerReturn').val("");
$('#datepickerReturn').datepicker({'option','minDate', newDate});
Full code:
$('#datepickerReturn').datepicker({
dateFormat: "mm-dd-yy",
minDate: 0
});
$("#datepickerDepart" ).datepicker({
dateFormat: "mm-dd-yy",
minDate: 0,
onSelect: function(dateText, inst) {
var m = dateText.substring(0,2);
var d = dateText.substring(3,5);
var y = dateText.substring(6,10);
console.log(d);
console.log(m);
console.log(y);
var newDate = new Date(y,m-1,d);
console.log(newDate);
$('#datepickerReturn').val("");
$('#datepickerReturn').datepicker({'option','minDate', newDate});
}
});
$("#strStartDate").datepicker({
dateFormat: 'dd/mm/yy',
constrainInput: true,
firstDay: 1,
hideIfNoPrevNext: true,
onSelect: function(){
if ($("#strStartDate").val() > $("#strEndDate").val()){
$("#strEndDate").val($("#strStartDate").val());
}
}
});
$("#strEndDate").datepicker({
dateFormat: 'dd/mm/yy',
constrainInput: true,
firstDay: 1,
hideIfNoPrevNext: true,
beforeShow: function (input, inst) {
inst.settings.minDate = $("#strStartDate").val();
}
});
You can update secodn datepicker's mindate with following code :
$( "#ddate" ).datepicker({
showOn: "button",
buttonImage: base_path+"img/date_picker.png",
buttonImageOnly: true,
onSelect: function (selectedDate) {
$("#rdate").datepicker("option", "minDate", selectedDate);
},
minDate: 'today'
});
$( "#rdate" ).datepicker({
showOn: "button",
buttonImage: base_path+"img/date_picker.png",
buttonImageOnly: true,
minDate: 'today'
});
I have multiple datepickers in one page.
I user class name to set the option for things like appears.
$('.datepickers').datepicker({
dateFormat: "yy-mm-dd",
showButtonPanel: true,
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true,
showWeek: true
});
Then, I want to set onSelect event for two of them.
$('#to').datepicker({
onSelect: function(selectedDate) {
$('#from').datepicker("option", "minDate", selectedDate);
}
});
Similar onSelect event setting for others.
However, this would not work. Any suggestion for how to fix this, besides setting all options individually by id?
did you try the following syntax? You don't want to _init the datepicker widget again. You just want to change an option. This is the way to do that with jquery ui widgets.
$('#to').datepicker('option', 'onSelect', function(selectedDate) {
$('#from').datepicker("option", "minDate", selectedDate);
});
i created a functional demo here to show a possible solution:
click for the jsfiddle
you don't have to create multiple datepicker methods. just use the "onSelect" method to:
test whether the current datepicker has "#to"
if so, use the "dateText" value from this datepicker to intialize the "#from" datepicker
use the current "inst" value to traverse the dom to the "#from" datepicker and set it's value.
these were the key lines:
onSelect: function(dateText, inst) {
if(inst.id === 'to'){
$('.datepickers').filter($('input#from')).datepicker("option", "minDate", dateText);
}
}
I'm using the range date-picker of jQuery UI. When selecting the "from date", I want to open automatically the "to date" date-picker. So, I call the .datepicker("show"). The "to date" picker is showing for a second and immediately fade away. Surprisingly, if I go to another application and then come back and focus on the browser window, the "to date" picker is shown.
I also tried to add the $('#toDate').focus(); but it didn't help.
$( ".fromDatePicker" ).datepicker({
defaultDate: "+1w",
dateFormat: 'dd/mm/yy',
altFormat: 'yymmdd',
altField: "#fromDateFormatted",
numberOfMonths: 2,
showOn: "both",
buttonImage: "images/calender_icon_a1.jpg",
buttonText: "open calendar",
buttonImageOnly: true,
onSelect: function( selectedDate ) {
$('#toDate').datepicker( "option", "minDate", selectedDate );
$('#toDate').datepicker("show");
//$('#toDate').focus(); //commented cause it's not working
}
});
The reason for the flashing appearance is because show would be called before minDate finishes. This would confuse datepicker when triggering beforeShowDay event just before showing the picker.
One somewhat hacky workaround is to delay the call to show the datepicker. For example, something like the following would work:
onSelect: function( selectedDate ) {
$('#toDate').datepicker( "option", "minDate", selectedDate );
setTimeout(function() { $('#toDate').datepicker("show") }, 50);
}
See this in action: http://jsfiddle.net/william/PVuTC/2/.