I'm in creating appointment form with jQuery datepicker. I've search around but seems that I can't combine all function I want in the beforeshowday.
What I want from the datepicker is disabled all date before today (yesterday and the rest of it because you can't make appointment at date before today it must be later), then disabled on every Sunday (its non working day) and public holiday (this one using array). What I saw from others is the jQuery are specifically for only one function like public holiday it just an array, but how about disabled previous day and sunday?
I tried to follow this articles http://articles.tutorboy.com/2010/09/03/jquery-ui-datepicker-disable-specified-dates/ but I don't know how to combine it. Can someone show me how?
I have this to disabled on every Sunday
function disabledSunday(date) {
var day = date.getDay();
return [(day != 0), ''];
}
$('#datepicker').datepicker({
dateFormat: 'mm-dd-yy',
beforeShowDay: disabledSunday
});
This one for alldates till today
var date = new Date();
var m = date.getMonth(),
d = date.getDate(),
y = date.getFullYear();
// Disable all dates till today
$('#datepicker').datepicker({
minDate: new Date(y, m, d),
dateFormat: 'mm-dd-yy',
});
This one is for specific dates such as public holiday
// Disable a list of dates
var disabledDays = ["5-31-2013", "6-01-2013"];
function disableAllTheseDays(date) {
var m = date.getMonth(),
d = date.getDate(),
y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if ($.inArray((m + 1) + '-' + d + '-' + y, disabledDays) != -1) {
return [false];
}
}
return [true];
}
$('#datepicker').datepicker({
dateFormat: 'mm-dd-yy',
beforeShowDay: disableAllTheseDays
});
How to combine these three function into one, I'm not much into Jquery and javascript
try this :-
html code :
<input id="txtDate" />
function disabledays(date) {
var ymd = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
//if u have to disable a list of day
var removeDays = ["2013-6-11","2013-6-31" ];
if ($.inArray(ymd, removeDays) >= 0) {
return [false];
} else {
//Show accept sundays
var day = date.getDay();
return [(day == 1 || day == 2 || day == 3 || day == 4 ||day == 5 ||day == 6 )];
}
}
$(function () {
$('#txtDate').datepicker({
beforeShowDay: disabledays
});
});
Try this
$("#datepicker").datepicker({ minDate: 0 });
You can use minDate option to disable past dates. In addition, you can use beforeShowDay option to check the other two conditions**.
$("#datepicker").datepicker({
minDate: 0,
beforeShowDay: function (date) {
// it is possible to write the following function using one line
// of code; instead, multiple if/else are used for readability
var ok = true;
if (date.getDay() === 0) { // is sunday
ok = false;
} else {
var dateStr = $.datepicker.formatDate("m-dd-yy", date);
if ($.inArray(dateStr, disabledDays) >= 0) { // is holiday
ok = false;
}
}
return [ok, ""];
}
});
});
** Actually it is possible to check all three conditions in that function.
May u will find your slution here
http://jqueryui.com/datepicker/#min-max
Related
I want to show only month and year. If I refocused same input after select a date, it shows wrong month and year not show previously selected month and year. For example I select December 2010 and then refocused same input it shows April 2015 as below image. How can I?
HTML
<input type="text" class="dp" readonly="true">
CSS
.ui-datepicker-calendar {
display: none;
}
JS
$('.dp').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'mm.yy',
onClose: function (dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay));
}
});
http://jsfiddle.net/46tx62vu/
The datepicker expects to be able to parse the displayed version of the date into a javascript date object.
One way to do this is to add a custom parseDate function for your special date format. The code below looks for the special format of "mm.yy" and if found, parses the value into a date. If the format is anything else, pass processing to the original datepicker.parseDate.
var standardParseDate = $.datepicker.parseDate;
function customParseDate( format, value, options ) {
if (format === 'mm.yy') {
var dt = (value + ".").split(".");
var month = parseInt(dt[0]) - 1;
var year = parseInt(dt[1]);
if (year < 100) {
year += 2000;
}
if (isNaN(month) || isNaN(year)) {
return null;
}
return new Date(year, month, 1);
} else {
return standardParseDate(format,value,options);
}
}
$.datepicker.parseDate = customParseDate;
JSFiddle: http://jsfiddle.net/3drfd35t/
additional code for customParseDate:
} else if (format === 'M-yy') {
var datestr = value;
if (datestr.length > 0) {
var y = datestr.substring(datestr.length - 4, datestr.length); // last 4 chars
var m = jQuery.inArray(datestr.substring(0, datestr.length - 5), options.monthNamesShort);
var newDate = new Date(y, m, 1);
console.log("customParseDate " + "m:" + m + ", y:" + y); // dbg
return newDate;
} else {
console.log("customParseDate " + "null"); // dbg
return null;
}
} else . . .
Thank you for your help to people.
Look, I'm not a jQuery programmer and I stole alredy finished version of calendar, but still have something to change:
var enabledDays = ["6-1-2013", "7-1-2013", "8-1-2013", "9-1-2013", "10-1-2013", "11-1-2013"];
function nationalDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < enabledDays.length; i++) {
if($.inArray((m+1) + '-' + d + '-' + y,enabledDays) != -1 || new Date() > date) {
return [true];
}
}
return [false];
}
$(function(){
$.datepicker.setDefaults($.extend($.datepicker.regional["ru"]));
$("#datepicker1, #datepicker2, #datepicker3").datepicker({dateFormat: "yy-mm-dd",
duration: "normal",
numberOfMonths: [ 1, 2 ],
constrainInput: true,
beforeShowDay: nationalDays});
});
This is regular datepicker which you can find all over in internet. I have var enabledDays which specifying the particulat month-date-year I need just set first date if each month in calendar activated and other disable. How can I do this guys. Thank you.
Does this plugin work for your needs?
http://multidatespickr.sourceforge.net/
I have some problem with hiding days in datepicker depending of day of week e.g. if today is friday hide saturday and if today is saturday - hide sunday.
I have this code who check what day is today:
$(function () {
var day_date = new Date();
var weekday = new Array(7);
weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";
var n = weekday[day_date.getDay()];
$('#day_of_week').val(n);
});
I also have this code to hide (but whole) weekends and days who always be hidden:
var disabledDays = ['15/8/2012', '1/11/2012', '11/11/2012', '25/12/2012', '26/12/2012'];
function nationalDays(date) {
var m = date.getMonth(),
d = date.getDate(),
y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if ($.inArray(d + '/' + (m + 1) + '/' + y, disabledDays) != -1 || new Date() > date) {
return [false];
}
}
return [true];
}
function noWeekendsOrHolidays(date) {
var noWeekend = jQuery.datepicker.noWeekends(date);
return noWeekend[0] ? nationalDays(date) : noWeekend;
}
On datepicker the line who "execute" above code looks like this:
beforeShowDay: noWeekendsOrHolidays,
I try to do this with this code, but it didn't work:
$('#day_of_week').change(function()
if( $("#day_of_week").val() == Friday ) {
$("#date_from, #date_to").datepicker({
beforeShowDay: noWeekendsOrHolidays
});
}
else {
}
});
I will be very grateful for any help.
I am using a date picker in which it automatically work on hiding date.
I hope it will helpful to you.
http://multidatespickr.sourceforge.net/#maxPicks-demo
I got a link regarding this and hopefull it will work.
http://multidatespickr.sourceforge.net
I wonder how to set next month with showing only mondays active:
i tried to do smth like that but it wont work
function onlyMondaysNextMonth(date){
var day = date.getDay();
var mDate = date.getMonth() + 1;
return {
minDate: mDate,
}
return [(day == 1),''];
}
Thank you.
Use the following code to enable only Mondays starting from next month
var minDate = null;
var now = new Date();
if (now.getMonth() == 11) {
minDate = new Date(now.getFullYear() + 1, 0, 1);
} else {
minDate = new Date(now.getFullYear(), now.getMonth() + 1, 1);
}
/* create datepicker */
jQuery(document).ready(function () {
jQuery('#datepicker').datepicker({
minDate: minDate,
constrainInput: true,
beforeShowDay: beforeShowDay
});
});
function beforeShowDay(date) {
var day = date.getDay();
if (day == 1)
return [true]
return [false];
}
The working sample is hosted in http://elangovanr.com/samples/jquery/datepickermonday.html for your reference.
I have one datepicker with numberOfMonths set to 2.
Arrival Date and Departure Date are determined using this logic (within onSelect):
if ((count % 2)==0) {
depart = $("#datepicker-1").datepicker('getDate');
if (arriv > depart) { temp=arriv; arriv=depart; depart=temp; }
$("#check-in").val($.datepicker.formatDate("DD, MM d, yy",arriv));
$("#check-out").val($.datepicker.formatDate("DD, MM d, yy",depart));
} else {
arriv = $("#datepicker-1").datepicker('getDate');
depart = null;
if ((arriv > depart)&&(depart!=null)) { temp=arriv; arriv=depart; depart=temp; }
$("#day-count").val('');
$("#check-in").val($.datepicker.formatDate("DD, MM d, yy",arriv));
$("#check-out").val($.datepicker.formatDate("DD, MM d, yy",depart));
}
if(depart!=null) {
diffDays = Math.abs((arriv.getTime() - depart.getTime())/(oneDay));
if (diffDays == 0) { $("#day-count").val((diffDays+1)+' Night/s'); } else { $("#day-count").val(diffDays+' Night/s'); }
}
Getting the number of days within these 2 dates has no problem
What I want now is highlight those dates starting from the Arrival to Departure
I tried working around the onSelect but had no luck.
I am now using beforeShowDay to highlight these dates but I can't seem to figure it out
Got a sample from here
Basically, it is customized to highlight 11 or 12 days after the selected date (Here's the code from that link).
$('#datePicker').datepicker({beforeShowDay: function(date) {
if (selected != null && date.getTime() > selected.getTime() &&
(date.getTime() - selected.getTime())
Since I am new to using the UI, and the logic is not clear to me yet, I can't seem to figure this out. Any ideas on how I can make this highlight dates between the Arrival and Departure using my aforementioned logic used in determining the two?
Super old question but I came across the answer for anyone that finds this: http://jsfiddle.net/kVsbq/4/
JS
$(".datepicker").datepicker({
minDate: 0,
numberOfMonths: [12, 1],
beforeShowDay: function (date) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
},
onSelect: function (dateText, inst) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
if (!date1 || date2) {
$("#input1").val(dateText);
$("#input2").val("");
$(this).datepicker();
} else {
$("#input2").val(dateText);
$(this).datepicker();
}
}
});
IF this helps.. :-)
$(function() {
var togo=['10/25/2013']
var datesArray=['10/27/2013','10/28/2013']
var datesArray1=['10/25/2013','10/26/2013']
var datesArray2=['10/24/2013']
$( "#datepicker" ).datepicker({
numberOfMonths: 2,
selectMultiple:true,
beforeShowDay: function (date) {
var theday = (date.getMonth()+1) +'/'+
date.getDate()+ '/' +
date.getFullYear();
return [true,$.inArray(theday, datesArray2) >=0?"specialDate":($.inArray(theday, datesArray)>=0?"specialDate2":($.inArray(theday, datesArray1)>=0?"specialDate1":''))];
},
onSelect: function(date){
console.log("clicked"+date);
return [true,$.inArray(['10/24/2013'], togo) >=0?"specialDate":($.inArray(date, datesArray1)>=0?"specialDate1":'')] ;
}
});
//$.inArray(theday, datesArray) >=0?"specialDate":'specialDate1'
});
http://jsfiddle.net/pratik24/Kyt2w/3/
Not quite an answer, but this may be useful:
http://www.eyecon.ro/datepicker/
Rather unfortunately named, but it seems like it could be what you need.