Disable JQuery datepicker dates by selecting date from another datepicker
2 datepickers fromdate and todate
My requirement is to select fromdate and todate should not be more than 30 days from the selected fromdate , so when I select a fromdate , it should only include the next 30 days in the todate datepicker.
I tried to implement this facility for these dumpers but didn't work
//from date
$("#txtTFromDateTeacherDailyReport").datepicker(
{
changeMonth : true,
changeYear : true,
dateFormat : "dd/mm/yy",
maxDate : '0',
beforeShow : function() {
jQuery(this).datepicker(
'option',
'maxDate',jQuery('#txtTToDateTeacherDailyReport').val());
},
}).datepicker("setDate", "0");
//to date
$("#txtTToDateTeacherDailyReport").datepicker(
{
changeMonth : true,
changeYear : true,
dateFormat : "dd/mm/yy",
maxDate :'0',
beforeShow : function() {
jQuery(this).datepicker(
'option',
'minDate',
jQuery( '#txtTFromDateTeacherDailyReport').val());
},
}).datepicker("setDate", "0");
Please help me get rid of this.
+3
source to share
2 answers
jQuery Datepicker - strength range from selected date
http://codepen.io/anon/pen/vENJWd
// From Datepicker
$( "#from" ).datepicker({
defaultDate: "+1d",
changeMonth: false,
numberOfMonths: 1,
minDate: "+1d",
onClose: function(selectedDate) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
// Change value of second parameter for your needs
// 7 = One Week, 14 = Two Weeks, etc
$( "#to" ).datepicker( "option", "maxDate", new_date(selectedDate, 30) );
}
});
// To Datepicker
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: false,
numberOfMonths: 1
});
// Do not edit below this line
function new_date(old_date, days_after) {
var month = parseInt(old_date.substring(0, 2))-1;
var day = parseInt(old_date.substring(3, 5));
var year = parseInt(old_date.substring(6, 10));
var myDate = new Date(year, month, day);
myDate.setDate(myDate.getDate() + days_after);
var newMonth = myDate.getMonth()+1;
var newDay = myDate.getDate();
var newYear = myDate.getFullYear();
var output = newMonth + "/" + newDay + "/" + newYear;
return output;
}
// Created By: Rafael Leonidas Cepeda
+3
source to share
I think this will work for you ...
$(function () {
$("#datepicker1, #datepicker2").datepicker();
$("#datepicker1").datepicker("option", "onSelect", function (dateText, inst) {
var date1 = $.datepicker.parseDate(inst.settings.dateFormat || $.datepicker._defaults.dateFormat, dateText, inst.settings);
var date2 = new Date(date1.getTime());
date2.setDate(date2.getDate() + 30);
$("#datepicker2").datepicker("setDate", date2);
});
});
html
<p>Date1: <input type="text" id="datepicker1" /></p>
<p>Date2: <input type="text" id="datepicker2" /></p>
+1
source to share