$('.selector').datepicker({
onChangeMonthYear: function(year, month, inst) { ... }
});
How can I use the 'inst' parameter of onChangeMonthYear to auto-select the first day of the month?
see: http://jsfiddle.net/sD8rL/
I am currently using the code below but I feel like I should be able to use the 'inst' variable in a more straight-forward way.
$(".datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
maxDate:0,
onChangeMonthYear: function(year, month, inst){
// set date to 1st on year or month change
// this seems bit janky, but works
$('#' + inst.id).datepicker( "setDate", month + '/1/' + year );
// Can't I use the instatnce to set the date?
// $(inst).datepicker( "setDate", month + '/1/' + year ); // fails
// inst.datepicker( "setDate", month + '/1/' + year ); // fails
// inst.selectedDay = 1; // fails
// inst.currentDay = 1; // fails
}
});
If there is no particular reason that you want to use inst, you can always use this:
onChangeMonthYear: function(year, month, inst){
$(this).datepicker( "setDate", month + '/1/' + year );
}
See it in action: http://jsfiddle.net/william/sD8rL/2/.
Solution by William Niu doesn't consider other date formats (such as dd-mm-yyyy).
You'd better get a Date object from your datepicker and modify it the way you like (i.e., setting the first day of the month). After your modifications, you can re-pass the modified Date object to your datepicker.
dateFormat: "dd-mm-yy",
onChangeMonthYear: function(year, month, inst){
var selectedDate = $(this).datepicker( "getDate" );//Date object
selectedDate.setDate(1);//set first day of the month
selectedDate.setMonth(month-1);//month is 1-12, setMonth is 0-11
selectedDate.setFullYear(year);
$(this).datepicker( "setDate", selectedDate );
}
This way you won't overwrite date format (possibly set during datepicker initialization) ;)
Pay attention to the month format: datepicker handles a 1-12 format for months, while the Date object is 0-11.
Hope this can help, bye!
Related
I need to disabled future weeks for jqueryUI calender, i tried something which is disabled future date. but i want future week disable and it's disabled the other dates of week 52 as well. please if anyone can help me in this. below is link of my work. in this you can see disabled dates of week 52. i want whole week selectable.
Fiddle Link of so far i done.
<input type="text" class="form-control weekcal-x" name="start" id="start" custom="" />
$(".weekcal-x").datepicker({
showWeek: true,
firstDay: 1,
maxDate: new Date,
onSelect: function(dateText, inst) {
$(this).val("Week " + $.datepicker.iso8601Week(new Date(dateText)) + ', ' + $.datepicker.formatDate("yy", new Date(dateText)));
}
}).datepicker('widget').addClass('ui-weekpicker');
$('.ui-weekpicker').on('mousemove', 'tr', function() {
$(this).find('td a').addClass('ui-state-hover');
});
$('.ui-weekpicker').on('mouseleave', 'tr', function() {
$(this).find('td a').removeClass('ui-state-hover');
});
Try this
maxDate: +7 instead of maxDate: new Date
Update
Get the first and last day of current week :
var currentDate = new Date; // get current date
var first = currentDate.getDate() - currentDate.getDay() + 1; // First day is the day of the month - the day of the week
var last = first + 6; // last day is the first day + 6
var firstday = new Date(currentDate.setDate(first));
var lastday = new Date(currentDate.setDate(last));
Now you can use them as you want like maxDate: lastday, minDate:firstday
So far I can disable Today's date, but I'm coming up short trying to highlight the next 3 days
$( "#someDiv" ).datepicker({
beforeShowDay: function( date ){
//disable Sundays;
return [date.getDay() != 0, '']
},
/* today is disabled */
minDate: 1
});
... or is there a way to render individual day cells with date info as data attributes or something like that?
In your return, add a condition that will check for the date range you want and add a class to those dates.
Here is a jsFiddle with the full example. I'm sure this can be improved upon though.
The code and CSS to add a background to the dates when the condition is true (style it how you like):
.highlightDay .ui-state-default {
background: #484;
color: #FFF;
}
$(document).ready(function() {
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var newDate = addDays(new Date(), 0);
var thirdDay = addDays(new Date(), 3);
return [date.getDay() != 6,
// This can probably be improved
date >= newDate && date <= thirdDay ? "highlightDay" : ""];
},
minDate: 1
});
});
function addDays(theDate, days) {
return new Date(theDate.getTime() + days*24*60*60*1000);
}
I have something strange with jQuery datepicker.
If i choose a date with datepicker, it's ok, no problem.
But if i write a date directly in the input, for example : 19/05/1990 (french format)
When i write the first number of the year (here 1), jquery select automaticaly the date 2001 in my datepicker and remove the value on my input....
Do you have an idea ?
Edit : Here, all options i use
yearRange: "-113:+0",
changeMonth: true,
changeYear: true,
closeText: 'Fermer',
dateFormat: "dd/mm/yy",
prevText: '<Préc',
nextText: 'Suiv>',
currentText: 'Courant',
monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun',
'Jul','Aoû','Sep','Oct','Nov','Déc'],
dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa']
If you want to prevent the jump to 2001 when you type 1 for the year you can override the behaviour of the plugin overriding the function _doKeyUp before create your instance.
var oldKeyUp = $.datepicker._doKeyUp;
$.datepicker._doKeyUp = function(event){
var inst = $.datepicker._getInst(event.target);
var tmpValue = inst.input.val();
var arr = tmpValue.split('/');
if (arr.length == 3){
if (arr[2].length == 4){
return oldKeyUp(event);
}
}
return false;
}
$( "#datepicker" ).datepicker({...});
With this the plugin will wait until you have the full 4 digits of the year (assuming the format "dd/mm/yy").
You need to specify the correct localization when you instantiate the datepicker() function.
Please see the localization documentation and example or the "Localization" section of datepicker's API (which specifically suggests using jquery.ui.datepicker-fr.js).
$( selector ).datepicker( $.datepicker.regional[ "fr" ] );
Please see a working example of the datepicker() "localized" for France at http://jsfiddle.net/ZfpQ6/4/
I'm using jQuery UI's DatePicker to select a date of birth for consumers on my website. It is currently showing with the month and year via drop downs When, for example, I restrict the years to -18y, via maxDate, the month drop down does not show all of the months when the year 1993 is selected. It only shows the months up until the maximum months.
In usability testing, we've found that our demographic tends to click the month of their birth, then the year, then the day.
Is there a way to show all of the months, even if the dates within that month are not selectable?
Here is the code used to show the DatePicker:
$('.DobWidget').datepicker({
showOn: 'both',
buttonImage: '/media/img/admin/icon_calendar.gif',
buttonImageOnly: true,
dateFormat: js_date_format, // mm/dd/yyyy
constrainInput: false, // Handled server-side for type-in.
changeMonth: true,
changeYear: true,
maxDate: '-18y',
minDate: '-110y',
showButtonPanel: true,
onChangeMonthYear: function(year, month, inst) {
if (inst.currentDay != 0) {
$(this).datepicker("setDate", new Date(year, month - 1, inst.currentDay));
}
}
});
I am currently using jQueryUI v.1.8.16, and jQuery v.1.6.3, both provided by the Google AJAX API's.
Fix for jquery ui 1.8.17
I also had this problem I got in to work by changing some things in the jquery code. Now I see all months and I can select them but dates will still be unselectable as you want.
In _generateHTML function in the if statement you add maxDraw.setMonth('11'):
if (maxDate) {
maxDraw = (minDate && maxDraw < minDate ? minDate : maxDraw);
maxDraw.setMonth('11');
while (this._daylightSavingAdjust(new Date(drawYear, drawMonth, 1)) > maxDraw) {
...
}
}
In _generateMonthYearHeader function in the for loop of the else statement you change:
for (var month = 0; month < 12; month++) {
if ((!inMinYear || month >= minDate.getMonth()) &&
(!inMaxYear || month <= maxDate.getMonth()))
monthHtml += '<option value="' + month + '"' +
(month == drawMonth ? ' selected="selected"' : '') +
'>' + monthNamesShort[month] + '</option>';
}
becomes
for (var month = 0; month < 12; month++) {
if ((!inMinYear || month >= minDate.getMonth()) &&
(!inMaxYear || month <= 11))
monthHtml += '<option value="' + month + '"' +
(month == drawMonth ? ' selected="selected"' : '') +
'>' + monthNamesShort[month] + '</option>';
}
In _restrictMinMax you add maxDate.setMonth('11'):
...
var maxDate = this._getMinMaxDate(inst, 'max');
maxDate.setMonth('11');
var newDate = (minDate && date < minDate ? minDate : date);
...
In _isInRange you add maxDate.setMonth('11'):
var minDate = this._getMinMaxDate(inst, 'min');
var maxDate = this._getMinMaxDate(inst, 'max');
maxDate.setMonth('11');
...
I have a date picker for text field which puts in format of 5-MAY-2011 .On close of this date picker i need to write to hidden field
or text field in this format 5/5/2011
$( '#txt_field').datepicker({dateFormat: 'dd-M-yy', onClose: function() {$( '#hiddenfield').attr('value' ,$( '#txt_field').datepicker({dateFormat: 'mm-dd-yyyy'}) )}});
when i do this iam getting object object in the hidden field
$('#txt_field').datepicker({
dateFormat: 'dd-M-yy',
onClose: function() {
var date = new Date($(this).val());
if (date) {
var formattedDate = (date.getMonth() + 1) + "/" +
date.getDate() + "/" +
date.getFullYear();
$('#hiddenfield').val(formattedDate);
}
}
});
Sample here: http://jsfiddle.net/rSEnB/