Develop Reference

How do I disable weekends and specific dates in this code for date picker?

I am using a plugin on woocommerce and I need to disable sundays and some specific dates (Xmas holidays) on date picker. Your help is much appreciated.
I have managed to disable the today date but I am struggling to do the rest.
Also is there a way of adding a if statement that if time is > 17:00 automatically datepicker changes to +2 days and else just +1?
(function( $ ) { $(function() {
if ($('.pcfme-datepicker').length) {
$('.pcfme-datepicker').datepicker({
dateFormat : 'dd-mm-yy'
});
}
var dateToday = new Date();
dateToday.setDate(dateToday.getDate() + 1);
if ($('.pcfme-datepicker-disable-past').length) {
$('.pcfme-datepicker-disable-past').datepicker({
dateFormat : 'dd-mm-yy',
minDate: dateToday
});
}
});

several jquery datepicker widgets, add class to only one of them

I have a problem with jquery datepicker.
I have a form with several datepicker inputs and one of those inputs I need to select the whole week, while in the other one, I need to work just the regular way; the thing is that when I add the class (ui-weekpicker) to the widget so the first input the user can select the whole week,the class affects all the inputs in the form, at least the hover event, meaning that the other inputs in the onSelect event show the correct date...
How can I prevent this to happen?
here is my code for the week-select datepicker
$('#jump-picker').datepicker('destroy').val('').attr('placeHolder','Select Week');
$('#jump-picker').datepicker( {
yearRange: "-3:+3",
showOtherMonths: true,
selectOtherMonths: true,
language :'es',
options: {
dateFormat : 'dd/mm/yy',
showAnim : 'slideDown',
},
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#jump-picker').val($.datepicker.formatDate( dateFormat, startDate, inst.settings )
+ ' - ' + $.datepicker.formatDate( dateFormat, endDate, inst.settings ));
var year = startDate.getFullYear(),
month = startDate.getMonth(),
day = startDate.getDate() - startDate.getDay();
$('#calendar').fullCalendar ('gotoDate', year, month, day);
selectCurrentWeek();
},
beforeShow: function() {
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
}).datepicker('widget').addClass('ui-weekpicker').removeClass ('hide-calendar MonthDatePicker HideTodayButton');
$('.ui-weekpicker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.ui-weekpicker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
thanks for the help

Rather than chaining the call to .addClass('ui-weekpicker') off your $('#jump-picker') selector, add a second invocation to retrieve just one of the elements:
$('#jump-picker.week').addClass('ui-weekpicker')
or, if you're unable to add a class to one element and not the other
$('#jump-picker').first().addClass('ui-weekpicker')
will add the class to the first element matched.
As an aside, it's bad practice to use ids when you have more than one element, they're supposed to be unique within the document. You'd be best served to use a class for jump-picker instead.

jQuery Datepicker Date Formatting Not Working

I am new to jQuery so bear with me here. I have set my code set up so that when the user clicks on a certain date on the jQuery calendar, it displays the date that they have selected. I just want it to show the date in the format of "mm-dd-yyyy" but everything I have tried does not affect the date output.
This is the bare jQuery code:
$(document).ready(function init (){
$("#datepicker").datepicker({
dateFormat: 'mm/dd/yy',
onSelect: function() {
var userdate = $("#datepicker").datepicker("getDate");
document.getElementById("userdate").innerHTML = userdate;
}
});
});
Here is a plunker of my bare code:
http://plnkr.co/edit/T8ARyYg2qZna9QvPGg8m?p=preview
Thank you!

Change your code:
var userdate = $("#datepicker").datepicker("getDate");
By:
var userdate = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' }).val();

just change your onSelect function like this
onSelect: function(dateText) {
var userdate = dateText;
document.getElementById("userdate").innerHTML = userdate;
}
your code should look like this
$(document).ready(function init() {
$("#datepicker").datepicker({
dateFormat: 'mm/dd/yy',
onSelect: function(dateText) {
var userdate = dateText;
document.getElementById("userdate").innerHTML = userdate;
}
});
});
here's a working JSFIDDLE

You can use the formatDate function:
var userdate = $.datepicker.formatDate('mm/dd/yy', $("#datepicker").datepicker("getDate"))

Datepicker with month and year only

I would like to have a datepicker where user can select only the month and year from the datepicker and i also need to restrict the next datepicker with selected month and year from previous datepicker..
Can anyone help me out?

Sean answer is pretty good, if you want to disable day selecting as well, you might use a different approach, you can see the result in this fiddle:
Calendar is hidden, so you can only choose month and year. When selecting a date in first datepicker, minDate of second datepicker is getting adapted.
EDIT
jQuery datepicker has seriously problems when dateformat doesn't provide a day. I changed th code to make it work. Only thing is when opening a datepicker, I have to convert the date to a suitable format. Have a look at the new fiddle.
HTML:
<p>Date: <input type="text" id="first-datepicker"/></p>
<p>Date: <input type="text" id="second-datepicker"/></p>
CSS:
#ui-datepicker-div .ui-datepicker-calendar,
#ui-datepicker-div .ui-datepicker-current
{
display: none !important;
}
JAVASCRIPT:
$('#first-datepicker').datepicker({
changeYear: true,
changeMonth: true,
beforeShow: function (input, inst) {
setMyDate(inst);
},
onClose: function (dateText, inst) {
saveMyDate(inst);
var secondDatePicker = $('#second-datepicker').data('datepicker');
var dateSetted = secondDatePicker.input.data('date-setted');
setMyDate(secondDatePicker);
secondDatePicker.input.datepicker('option', 'minDate', new Date(inst.selectedYear, inst.selectedMonth, 0));
if (dateSetted == true) {
saveMyDate(secondDatePicker);
};
}
});
$('#second-datepicker').datepicker({
changeYear: true,
changeMonth: true,
beforeShow: function (input, inst) {
setMyDate(inst);
},
onClose: function (dateText, inst) {
saveMyDate(inst);
}
});
function saveMyDate(inst) {
inst.selectedDay = 1;
inst.input.data('year', inst.selectedYear);
inst.input.data('month', inst.selectedMonth);
inst.input.data('day', inst.selectedDay );
var date = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
inst.input.datepicker('setDate', date );
formatDate(inst, date);
inst.input.data('date-setted', true);
};
function setMyDate(inst) {
var dateSetted = inst.input.data('date-setted');
if (dateSetted == true) {
var year = inst.input.data('year');
var month = inst.input.data('month');
var day = inst.input.data('day');
var date = new Date(year, month, day);
inst.input.datepicker('setDate', date );
};
};
function formatDate(inst, date) {
var formattedDate = $.datepicker.formatDate('MM - yy', date);
inst.input.val(formattedDate);
};

You can modify the jQuery datepicker to only allow the user to select certain dates, in this case we could restrict it to the first of the month:
$(".datepicker").datepicker({
beforeShowDay: disableDaysExceptFirst
})
function disableDaysExceptFirst(date) {
if (date.getDate() != 1) {
return [false, date.getDate().toString() + "_day"];
}
return [true, ""];
}
You can also modify the options to display the date differently:
$(".datepicker").datepicker({
dateFormat: 'mm/yy'
});
Combine the two and we get:
$(".datepicker").datepicker({
beforeShowDay: disableDaysExceptFirst,
dateFormat: 'mm/yy'
})
function disableDaysExceptFirst(date) {
if (date.getDate() != 1) {
return [false, date.getDate().toString() + "_day"];
}
return [true, ""];
}
You can also use this to restrict your second datepicker:
var restrictedMonth = parseInt($("#myFirstDatePicker").text().split("/")[0]); //replace myFirstDatePicker with the HTML ID of the text input your datepicker is attached to
$("#myFirstDatePicker").datepicker({
beforeShowDay: disableAllExceptCurrentMonth,
dateFormat: 'dd/mm/yy' //swap mm and dd for US dates
});
function disableAllExceptCurrentMonth(date) {
if (date.getMonth() != restrictedMonth) {
return [false, date.getDate().toString() + "_day"];
}
return [true, ""];
}

You can use this monthpicker jquery widget : https://github.com/lucianocosta/jquery.mtz.monthpicker

If you can work in html5 i would suggest to use the new month input support for newer browser
simply use and let the magic happen.
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/month

Datepicker can show month and year only without using css
.ui-datepicker-calendar {
display: none;
}?
You can do like this
var dp=$("#datepicker").datepicker( {
format: "mm-yyyy",
startView: "months",
minViewMode: "months"
});
dp.on('changeMonth', function (e) {
//do something here
alert("Month changed");
});
Documentation here

datepicker beforeShowDay return 3 months

I need to disable some day in jquery datepicker calendar, so in the function beforeShowDay I write this:
beforeShowDay: function(date){
if(parseInt(calMonth) != parseInt(date.getMonth())){
calMonth = date.getMonth();
alert(calMonth + ' - ' + date.getMonth());
}
return {0: true};
}
where calMonth contains the current month number. Now if I run this, I get 3 alert that show in order:
9-9, than 10-10 and than 11-11. Why I have 3 message, while it shouldn't show me anything (because when I open datepicker it shows by default the calendar of current month, so if(parseInt(calMonth) != parseInt(date.getMonth())) should return false.
I also set numberOfMonths: 1.

Had the same problem, this is how i fixed:
$("#datepicker").datepicker({ showWeek: true, showOtherMonths : false,
//I'm using onChangeMonthYear to always keep my datepicker month updated
onChangeMonthYear: function(year, month, inst){
$(this).datepicker( "setDate", month + '/1/' + year );
},
beforeShowDay: function(date) {
//Now I can get only the days of the current selected month, and do whatever I want...
if(date.getMonth()==$(this).datepicker('getDate').getMonth())
console.log(date.getDate()+' - '+date.getMonth()+' - '+$(this).datepicker('getDate').getMonth());
//keep returning as usual to the datepicker
return [true, ''];
}
});
Hope it helps =)