JQuery: DatePicker: start / end date
I looked around before posting my question
following what I'm looking for in my datepicker (start date and end date):
1) Start date: can be any date (user can select the start date of the current (now) for any future date.
2) Start Date: User can select start date from 6 months. For example: if today is 04/22/2010, then I can go back to 11/22/2009, but no more than 6 months.
3) Start date , if the user selects a start date (current future, not past) less than 10 days, then I would like to alert the message about the need for "at least 10 days" p>
4) End Date: Must be the current date for future dates. All previous dates are disabled.
5) ** Start Date / End Date: ** Must not exceed one year.
Many thanks.
PS: not sure if I'm asking too much here :)
a source to share
I answered a similar question for a friend. It needed a similar cascading date, but I think you can see how to fix the problem if you look at my markup.
Html
<form target="_self" action="ClearForm.aspx">
Visual form
- Start date:
- Expiration date:
- Clear
Js
<script type="text/javascript">
$(document).ready(function () {
$('#endDate').datepicker({ showOn: 'button',
buttonImage: '../images/Calendar.png',
buttonImageOnly: true, onSelect: function () { },
onClose: function () { $(this).focus(); }
});
$('#startDate').datepicker({ showOn: 'button',
buttonImage: '../images/Calendar.png',
buttonImageOnly: true, onSelect:
function (dateText, inst) {
$('#endDate').datepicker("option", 'minDate', new Date(dateText));
}
,
onClose: function () { $(this).focus(); }
});
});
a source to share
<input type="text" id="tbStartDate" value="" disabled="disabled" />
<input type="text" id="tbEndDate" value="" disabled="disabled" />
<script type="text/javascript">
$(document).ready(function () {
$("#tbStartDate").datepicker({
showOn: 'button',
buttonImageOnly: true,
buttonImage: '/Content/Calendar.png',
buttonText: 'Click here (date)',
onSelect: function (dateText, inst) {
var $endDate = $('#tbStartDate').datepicker('getDate');
$endDate.setDate($endDate.getDate() + 1);
$('#tbEndDate').datepicker('setDate', $endDate).datepicker("option", 'minDate', $endDate);
},
onClose: function (dateText, inst) {
//$("#StartDate").val($("#tbStartDate").val());
}
});
$("#tbEndDate").datepicker({
dateFormat: 'dd-mm-yy',
showOn: 'button',
buttonImageOnly: true,
buttonImage: '/Content/Calendar.png',
buttonText: 'Click here (date)',
onClose: function (dateText, inst) {
//$("#EndDate").val($("#tbEndDate").val());
}
});
var $endDate = $('#tbStartDate').datepicker('getDate');
$endDate.setDate($endDate.getDate() + 1);
$('#tbEndDate').datepicker('setDate', $endDate).datepicker("option", 'minDate', $endDate);
});
</script>
a source to share
I prefer to write the default config for the datepicker using a class so that it works with more than one, with fewer duplicates.
onSelect: function(dateText, inst){
// Check if _until exists and auto set mindate
if(inst.id.contains("_from")){
$("#"+inst.id.replace("_from", "_until")).datepicker("option", "minDate", dateText);
}
}
This works if your form IDs are consistent. For example I am using date_until and date_from
a source to share