Jquery DatePicker YearRange based on current month - javascript

I am using Jquery's Datepicker and I want to know if it's possible to change the yearRange atribute based on the current month.
In my case, if the month it's different from november or december yearRange its the current year
else it's the current year + 1
Example 1:
current month: april
.datepicker({
showOn: "button",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
yearRange: '-12:+0'
Example 2:
current month: november
.datepicker({
showOn: "button",
buttonImage: "../../App_Themes/Samae/images/calendar.png",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
yearRange: '-12:+1'
thanks!

jQuery code
$(function () {
var d = new Date();
var month = d.getMonth();
var range;
if (month == 10 || month == 11) {
range = '-12:+1';
} else {
range = '-12:+0';
}
$('#txtDate').datepicker({
changeMonth: true,
changeYear: true,
yearRange: range
});
});
You can check it working out by changing the condition as if (month == 03 || month == 11).
Alternate
$(function () {
var d = new Date();
var month = d.getMonth();
$('#txtDate').datepicker({
changeMonth: true,
changeYear: true,
yearRange: (month == 10 || month == 11) ? '-12:+1' : '-12:+0'
});
});

Related

Why date difference start with zero

Implemented start date and end date to find the day difference. If i select start date today and end date today then difference is showing that 0 and i have disabled the weekends though its counting the weekends also. Here is my code.
$("#startDate").datepicker({
beforeShowDay: $.datepicker.noWeekends,
changeMonth: true,
todayHighlight: true,
minDate: 0,
numberOfMonths: 1,
todayHighlight: true,
onSelect: function(dateStr) {
var min = $(this).datepicker('getDate'); // Get selected date
$("#endDate").datepicker('option', 'minDate', min || '0'); // Set other min, default to today
}
});
$("#endDate").datepicker({
beforeShowDay: $.datepicker.noWeekends,
changeMonth: true,
endDate: true,
todayHighlight: true,
minDate: 0,
numberOfMonths: 1,
buttonImageOnly: true,
onSelect: function(dateStr) {
var max = $(this).datepicker('getDate'); // Get selected date
$('#datepicker').datepicker('option', 'maxDate');
var start = $("#startDate").datepicker("getDate");
var end = $("#endDate").datepicker("getDate");
var days = (end - start) / (1000 * 60 * 60 * 24);
$("#noofDays").val(days);
}
});
Used date difference calculation function in jquery. its working for me
$("#startDate").datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate: 0,
numberOfMonths: 1,
maxDate: '+1Y+6M',
onSelect: function(dateStr) {
var min = $(this).datepicker('getDate'); // Get selected date
$("#endDate").datepicker('option', 'minDate', min || '0'); // Set other min, default to today
}
});
$("#endDate").datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate: 0,
numberOfMonths: 1,
onSelect: function(dateStr) {
var max = $(this).datepicker('getDate'); // Get selected date
$('#datepicker').datepicker('option', 'maxDate', max || '+1Y+6M'); // Set other max, default to +18 months
var start = $("#startDate").datepicker("getDate");
var end = $("#endDate").datepicker("getDate");
var days = (end - start) / (1000 * 60 * 60 * 24);
$("#noofDays").val(days);
}
});

jQuery UI datepicker "defaultDate" selects a weekend date despite "noWeekend" active

I have two jQuery UI date pickers on a form I am building. Most of the functionality is working as expected, except for one thing.
I have weekends disabled on both dates. However, when the defaultDate and minDate lands on a weekend, it doesn't select the next available week day but, rather, it still selects the weekend date.
Any help would be really appreciative :)
var dateFormat = "dd/mm/yy",
from = $("#from")
.datepicker({
dateFormat: dateFormat,
beforeShowDay: $.datepicker.noWeekends,
minDate: "+3d",
defaultDate: "+3d",
changeMonth: true
})
.on("change", function () {
var date2 = from.datepicker('getDate')
date2.setDate(date2.getDate() + 2)
to.datepicker('setDate', date2)
to.datepicker('option', 'minDate', date2)
}),
to = $("#to").datepicker({
dateFormat: dateFormat,
beforeShowDay: $.datepicker.noWeekends,
defaultDate: "+1w",
minDate: "+1w",
changeMonth: true,
numberOfMonths: 1
})
UPDATE
I have solved the issue. Here is the answer for if anyone else is interested. I updated the day number (0-6) the selected date lands on and added so many days to it to avoid the weekend and stored this in a variable min. I then assigned the min variable to the defaultDate and minDate datepicker options :).
var min = 3;
switch (new Date().getDay()) {
case 3:
min = 5;
break;
case 4:
min = 4;
break;
}
var dateFormat = "dd/mm/yy",
from = $("#from")
.datepicker({
dateFormat: dateFormat,
beforeShowDay: $.datepicker.noWeekends,
minDate: min,
defaultDate: min,
changeMonth: true
})
.on("change", function () {
var date2 = from.datepicker('getDate')
min = 2
switch (date2.getDay()){
case 4:
min = 4;
break;
case 5:
min = 4;
break;
}
date2.setDate(date2.getDate() + min)
to.datepicker('setDate', date2)
to.datepicker('option', 'minDate', date2)
}),
to = $("#to").datepicker({
dateFormat: dateFormat,
beforeShowDay: $.datepicker.noWeekends,
defaultDate: "+1w",
minDate: "+1w",
changeMonth: true,
numberOfMonths: 1
})

Setting max date value to current date OR 1 year from start date

What should I do to restrict the user to select the end date beyond one year from the starting date OR the current date. I have my codes like this.
$(function () {
$('#DateFrom').datepicker({
dateFormat:'d-M-y',
changeMonth: true,
changeYear: true,
minDate: new Date(2000, 7, 23),
maxDate: 0,
onSelect: function() {
var date = $('#DateFrom').datepicker('getDate');
date.setTime(date.getTime() + (1000*60*60*24*365));
$('#DateTo').datepicker('option', 'maxDate', date);
$('#DateTo').datepicker('option', 'minDate',$('#DateFrom').datepicker('getDate'));
displayToUser();
},
});
$('#DateTo').datepicker({
dateFormat:'d-M-y',
maxDate: 0,
changeMonth: true,
changeYear: true,
onSelect: displayToUser,
});
});
function displayToUser() {}
Here although it restricts the user within one year from starting date, but it allows the user to select dates beyond the current date.
Example: if start date is 23-01-2016, it allows to select the end date upto 22-01-2017. I want it to be at most today's date.
Does this do it?
$(function () {
$('#DateFrom').datepicker({
dateFormat:'d-M-y',
changeMonth: true,
changeYear: true,
minDate: new Date(2000, 7, 23),
maxDate: 0,
onSelect: function() {
var date = $('#DateFrom').datepicker('getDate');
date.setTime(date.getTime() + (1000*60*60*24*365));
var todaysDate = new Date();
if(date.getTime() > todaysDate.getTime()) date = todaysDate;
$('#DateTo').datepicker('option', 'maxDate', date);
$('#DateTo').datepicker('option', 'minDate',$('#DateFrom').datepicker('getDate'));
displayToUser();
},
});
$('#DateTo').datepicker({
dateFormat:'d-M-y',
maxDate: 0,
changeMonth: true,
changeYear: true,
onSelect: displayToUser,
});
});
function displayToUser() {}
I only added these two lines
var todaysDate = new Date();
if(date.getTime() > todaysDate.getTime()) date = todaysDate;

Set jQuery Datepicker value restricted to last month only

I have this script for selecting date.
<script type='text/javascript'>
$(function () {
$("#datepicker").datepicker({
minDate: "-5M",
maxDate: "-1M",
changeMonth: true,
changeYear: true
});
});
function Image13_onclick() {
}
</script>
this allows me to select any date from past five months. I want just one month for the user to select and that should be previous
month. For example if current month is March then datepicker should only have Feb.
Relative dates must contain value and period pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.
So you only need to calculate the right min date and max date. JS Fiddle
$(function () {
var date = new Date();
var maxDate = "-" + date.getDate() + "D";
var minDate = "-1M " + "-" + (date.getDate() - 1) + "D";;
$("#datepicker").datepicker({
minDate: minDate,
maxDate: maxDate,
changeMonth: true,
changeYear: true
});
});

javascript datapicker restrict dates

I have this code to restrict various "datepicker dates". :
$(function() {
$(".datepicker").datepicker({
dateFormat: 'dd-mm-yy'
})({
changeMonth: true,
changeYear: true
});
$(".datepicker").datepicker;
});
var calcDate = function() {
var start = $('#conference_date_in').datepicker('getDate');
var end = $('#conference_date_out').datepicker('getDate');
var days = (end - start) / 1000 / 60 / 60 / 24;
document.getElementById('total_days').value = days;
}
$('#conference_date_out').change(calcDate);
({ minDate: -20, maxDate: "+1M +10D" });
$('#conference_date_in').change(calcDate);
</script>
Is my min/max date in the wrong section?
You have to set mindate and max date like this
$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
Example
Reference: mindate and maxdate
And if you want to disable a specific date range you can use the following code
// unavailable dates range
var dateRange = ["2012/05/20","2012/05/29"]; // yyyy/MM/dd
function unavailable(date) {
var startDate = new Date(dateRange[0]);
var endDate = new Date(dateRange[1]);
var day = date.getDay();
if(date > startDate && date < endDate )
return [false, "disabled"];
else if(day > 0 && day < 6)
return [true, "enabled"];
else
return [false, "disabled"];
}
$('#iDate').datepicker({ beforeShowDay: unavailable });
Working Fiddle

Categories