Develop Reference

how to disable all dates except Wednesday and Sunday dates in Jquery Ui Datepicker

I am using Jquery Ui Datepicker. I want to disable all dates except Wednesday and Sunday Dates. I wrote code like below. But it works only for Wednesday dates. And it displays from next month Onwards.I want it enable current month also.
<script>
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'dd-mm-yy',
minDate: 1,
beforeShowDay: enableWednesday,
});
});
function enableWednesday(date) {
var day = date.getDay();
return [(day == 3), ''];
}
</script>
Please help me to enable all Wednesday and Sunday dates for current month also.Thanks in advance

Try this code
$(function(){
$("#datepicker").datepicker(
{
beforeShowDay: function (date) {
if (date.getDay() == 0 || date.getDay() == 3) {
return [true, ''];
}
return [false, ''];
}
});
});

Please refer the following url Disable specific days of the week on jQuery UI datepicker

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 =)

jQuery UI Datepicker conditional mess.. is there a cleaner way to do this?

I'm setting up something of an "appointment" scheduler using the jQuery UI Datepicker, but I have a few conditions that I needed to implement:
Customer could not schedule on a Sunday
Customer can't schedule after 12pm on Saturday (have not implemented this)
Can't schedule next day if the current time is past 12pm
Can't schedule massively in advance (I chose +2 months)
Can't schedule for the current day (and obviously not the past)
Here is my current code:
$(document).ready(function() {
function noSundays(date) {
return [date.getDay() != 0, ''];
}
var timezone = "EST";
$.getJSON("http://json-time.appspot.com/time.json?tz="+timezone+"&callback=?",
function(data){
if (data.hour < 12) {
$("#datepicker").datepicker({
beforeShowDay: noSundays,
minDate: '+1d',
maxDate: '+2m' });
} else {
$("#datepicker").datepicker({
beforeShowDay: noSundays,
minDate: '+2d',
maxDate: '+2m' });
}
})
});
So we set noSundays, get the current time in EST from the JSON server and if it's before 12PM we fire up .datepicker with minDate : +1d (tomorrow), if it's after 12PM we use minDate : +2d. This code works but I feel like I'm doing something really wrong. I'm still relatively inexperienced and would love to know if there is a better way to write this.
Thank you.

It can be shorter like this
$(document).ready(function() {
var timezone = "EST";
$.getJSON("http://json-time.appspot.com/time.json?tz="+timezone+"&callback=?",
function(data){
var parms = {
beforeShowDay: function(date) {
return [date.getDay() != 0, ''];
},
minDate: '+2d',
maxDate: '+2m' }
if (data.hour < 12) {
parms.minDate= '+1d';
parms.maxDate= '+2m';
}
$("#datepicker").datepicker(parms);
})
});

Jquery calender 2 way block date

I am using jquery ui date selector
My query is different from all other asked as i need 2 custom methods to block date
<script>
var unavailableDates = ["5-7-2011","6-7-2011","7-7-2011","15-7-2011","16-7-2011","17-7-2011" ];
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false,"","Unavailable"];
}
}
$(function() {
$( "#datepicker_1,#datepicker_2" ).datepicker({
beforeShowDay: unavailable,
changeMonth: true,
changeYear: true
});
});
i have customized my code to disable few date , which i took refernce for also, but also i want the other date selector to have date set according to first
for eg for selector 2(which is max date) i select 4th july, than the selectot 1 should have date greater than today but less than4th july... if i select from selector1 (which is min date) 1st july it should disable all previous date ...
My problem is similar to jQuery datepicker- 2 inputs/textboxes and restricting range but a step ahead where i need to disable some date as above
Any help will hugely be appreciated as i am new bee in jquery
here is jsfiddle

$(function() { $( "#datepicker_1,#datepicker_2" ).datepicker({
beforeShow: customRange, beforeShowDay: unavailable, changeMonth: true, changeYear: true }); }); function customRange(input) { if (input.id == 'datepicker_2') {
return {
minDate: jQuery('#datepicker_1').datepicker("getDate")
}; } else if (input.id == 'datepicker_1') {
return {
maxDate: jQuery('#datepicker_2').datepicker("getDate")
}; } }
Try this if it helps you