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 =)
Related
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.
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
AIM: TO only allow users to select sunday on the datpicker calendar.
Currently I have it almost done, except for some reason every other day except Sunday works. When I use 7 for Sunday in the code below the entire calendar is unclickable, any other day works perfect.
$(document).ready(function() {
$("#datepicker2").datepicker({
autoSize: true, // automatically resize the input field
altFormat: 'yy-mm-dd', // Date Format used
firstDay: 1, // Start with Monday
beforeShowDay: function(date)
{ return [date.getDay() == 7,''];}}); // Allow only one day a week
});
Question: How can I only allow Sunday selection?
Date.getDay() returns a value in the range 0-6, not 1-7.
beforeShowDay: function(date) {
return [date.getDay() === 0,''];
}
I would like to disable certain days like every monday or every tuesday or every monday, thursday friday, etc. on a jQuery UI datepicker.
I tried a lot of code without result. Anyone can help me!
My current code is as below:
<script type="text/javascript">
$(function() {
var $hiddenInput = $('#travelDate');
$('#datepicker').datepicker({dateFormat: 'yy-mm-dd'});
$("#datepicker").datepicker("option", "minDate", 2);
$('#datepicker').datepicker({
inline: true
});
// this code not working for my example
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var day = date.getDay();
return [(day != 1 && day != 2), ''];
}
});
$(document).on("change", "#datepicker", function () {
$hiddenInput.val($(this).val());
})
});
</script>
You're initializing the datepicker more than once. This is causing the problems. Consolidate your options into one options object and everything works fine:
$("#datepicker").datepicker({
inline: true,
minDate: 2,
dateFormat: 'yy-mm-dd',
beforeShowDay: function (date) {
var day = date.getDay();
return [(day != 1 && day != 2), ''];
}
});
Example: http://jsfiddle.net/WP29E/54/
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