Set jQuery Datepicker value restricted to last month only - javascript

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
});
});

Related

Jquery ui datepicker preselect date that is not a sunday

I have modified the jquery ui datepicker to pre-select the day that is 2 days from now and I have also disabled Sundays in the datepicker. However, the input field is still being pre-filled with the Sunday if the Sunday is 2 days from now. How do I prevent this?
$(function() {
$("#delivery-date").datepicker({
minDate: +2,
maxDate: '+2M',
dateFormat: "DD, d MM yy",
showOn: "both",
buttonText: "Change",
beforeShowDay: function(date) {
var day = date.getDay();
return [(day != 0), ''];
}
}).datepicker("setDate", "0");
});
Assuming you would switch to the Next day, Monday, you can use conditional (ternary) operator.
Here is an example.
$(function() {
$("#delivery-date").datepicker({
minDate: new Date().getDay() + 2 == 7 ? 3 : 2,
maxDate: '+2M',
dateFormat: "DD, d MM yy",
showOn: "both",
buttonText: "Change",
beforeShowDay: function(date) {
var day = date.getDay();
return [(day != 0), ''];
}
}).datepicker("setDate", "0");
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="delivery-date"></p>
If today is Friday (5), adding 2 days, would make it Sunday of the next week (7, or in JS: 0). So we can check for that.
Normally we might make a function:
function pickDay(n){
var d = new Date().getDay(); // Returns the day of the week: 5
if(d + n == 7){
return n + 1;
}
return n;
}
and then use it like so:
minDate: pickDay(2),
I tested this and it's not liked, there seems to be some timing issue.

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;

datepicker from - to and select x-value for set x-month later

I have an datepicker from - to.
For the date -to i use an select value (stands for x month later).
My code works only, f.e when i set a number like 6 (date.setMonth(date.getMonth() + 6 );).
What is wrong?
My code is http://jsfiddle.net/uFcX7/3/
$(function (form) {
var month = $('select[name=GetMes]').val();
$(".fecha_inicio").datepicker({
dateFormat: "dd/mm/yy",
onSelect: function (dateText, instance) {
date = $.datepicker.parseDate(instance.settings.dateFormat, dateText, instance.settings);
date.setMonth(date.getMonth() + month);
//date.setMonth(date.getMonth() + 6);
$(".fecha_fin").datepicker("setDate", date);
}
});
$(".fecha_fin").datepicker({
dateFormat: "dd/mm/yy"
});
});
When i use select value, the date are wrong.
This is because Javascript month has the range of 0 - 11. You would need to work out the difference and add a year. For instance:
if((date.getMonth() + month) > 11)
you will want to add 1 year to the date and then add the difference on months i.e.
date.setMonth(date.getMonth() + (month - 11));

Jquery DatePicker YearRange based on current month

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'
});
});

Categories