I have two text boxes with a datepicker hooked up to them. The text boxes are for start date and end date. The first datepicker is setup so that the user cannot choose a date before today, but can choose any date in the future.
How can I setup the second datepicker so that it cannot choose a date before the date chosen in the first date picker? For example: If today is 12/11/10 and I choose 12/15/10 in the first datepicker, then the second date picker shouldn't be able to choose anything before 12/15/10.
Heres what I have so far:
$("#txtStartDate").datepicker({ minDate: 0 });
$("#txtEndDate").datepicker({});
For example, in this sample code, startDatePicker is selected as 2010-12-12, change event of startDatePicker sets the minDate of endDatePicker 2010-12-13. It locks the cells before this date. This is a sample for what #Victor mentioned..I hope it helps...Regards...Ozlem.
$("#startDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
minDate: new Date(),
maxDate: '+2y',
onSelect: function(date){
var selectedDate = new Date(date);
var msecsInADay = 86400000;
var endDate = new Date(selectedDate.getTime() + msecsInADay);
//Set Minimum Date of EndDatePicker After Selected Date of StartDatePicker
$("#endDatePicker").datepicker( "option", "minDate", endDate );
$("#endDatePicker").datepicker( "option", "maxDate", '+2y' );
}
});
$("#endDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true
});
Update:
The approach above set the minDate only on creation time.
I used the onSelect event to change the minDate option of the second datepicker like this:
$("#txtStartDate").datepicker({
showOn: "both",
onSelect: function(dateText, inst){
$("#txtEndDate").datepicker("option","minDate",
$("#txtStartDate").datepicker("getDate"));
}
});
the Tin Man's solution worked for me after adding $("#txtEndDate").datepicker() at the bottom
$("#txtStartDate").datepicker({
showOn: "both",
onSelect: function(dateText, inst){
$("#txtEndDate").datepicker("option","minDate",
$("#txtStartDate").datepicker("getDate"));
}
});
$("#txtEndDate").datepicker(); //it is not working with out this line
try this man:
$("#dateTo").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
minDate: new Date()
}).datepicker("setDate", new Date());
$("#dateFrom").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
onSelect: function(){
$('#dateTo').datepicker('option', 'minDate', $("#dateFrom").datepicker("getDate"));
}
}).datepicker("setDate", new Date());
$('#start_date').datepicker({
endDate: new Date(),
autoclose: true,
}).on("changeDate", function (e) {
$('#end_date').datepicker('setStartDate', e.date);
});
$('#end_date').datepicker({
autoclose: true,
});
From a pure UI standpoint, you shouldn't. If the user picks the wrong month on both datepickers, and tries to select the correct month, he has a 50% change of being hindered by the UI. Ideally, you would allow the incorrect selection and display a helpful error message saying the end date should be after the end date.
If you wish to implement your idea : give each datepicker a "change" event that changes the options on the other datepicker appropriately.
Use the "getDate" method of the first datepicker UI and pass it into minDate option of the second datepicker:
$("#txtEndDate").datepicker({
showOn: "both",
minDate: $("#txtStartDate").datepicker("getDate")
});
Use This Code:
<script type="text/javascript">
$(function () {
$("#txtStartDate").datepicker({
dateFormat: 'dd/mm/yy',
inline: true,
minDate: 'dateToday'
});
$("#txtEndDate").datepicker({
dateFormat: 'dd/mm/yy',
inline: true,
minDate: $("#txtStartDate").datepicker("getDate") });
});
</script>
Hi everyone going to show what works with me in this case:
2 Datepickers ( DateFrom and DateTo)
HTML:
<!-- Datapicker dateFrom -->
<label for="dateFrom"> Date from: </label>
<div>
<input type="text" id="dateFrom" class="form-control" autocomplete="off"
th:placeholder="Enter a date From.."/>
</div>
<!-- Datapicker dateTo-->
<label for="dateTo"> Date to: </label>
<div>
<input type="text" id="dateTo" class="form-control" autocomplete="off"
th:placeholder="Enter a date to..."/>
</div>
Next you build your datapickers in JavaScript:
Datapicker activation (With YOUR datapicker build requirements)
$("#dateFrom").datepicker({
dateFormat: 'yy-mm-dd',
showButtonPanel: true
});
$('#dateTo').datepicker({
dateFormat: 'yy-mm-dd',
showButtonPanel: true
});
-And finally on the OnChange Event, for every time a Date is picked in any of the datepickers the selectable range avaliable in the other Datapicker changes.
$("body").on("change", "#dateFrom", function() {
$('#dateTo').datepicker('option', 'minDate', $("#dateFrom").datepicker("getDate"));
});
$("body").on("change", "#dateTo", function() {
$('#dateFrom').datepicker('option', 'maxDate', $("#dateTo").datepicker("getDate"));
});
This make the DateTo DataPicker limit on change the date of the DateFrom Datapicker and viceversa.
$startDateCtrl.change(function () {
setMinEndDateValue($startDateCtrl, $endDateCtrl);
});
$endDateCtrl.datepicker();
I have two Date picker start and end.
End Date min and max date we are setting based on the selection from start.
Min start date for End date picker is start date from start picker selection.
Max end date for end date picker is selected start date from start date picker + 7 days.
function setMinEndDateValue($startDateCtrl, $endDateCtrl) {
var $maxSchedulingDate = new Date(#MaxDate.Year, #MaxDate.Month -1, #MaxDate.Day );
var $startDate = $startDateCtrl.val();
var $selectedStartDate = new Date($startDate);
$selectedStartDate.setDate($selectedStartDate.getDate() + 7); // increasing the start date by 7 days (End Date max)
var $maxEndDate = new Date();
if ($selectedStartDate > $maxSchedulingDate) {
$maxEndDate = $maxSchedulingDate;
}
else {
$maxEndDate = $selectedStartDate;
}
$endDateCtrl.datepicker("option", "minDate", $startDate);
$endDateCtrl.datepicker("option", "maxDate", $maxEndDate);
}
Building on the previous answers in this thread, I felt a solution that worked with defaults and reapplied both min and max dates would be useful:
// Defaults
var defaultFromDate = new Date();
var defaultToDate = new Date();
defaultToDate.setMonth(defaultToDate.getMonth() + 1);
// To
$("#datepickerTo").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true,
});
$("#datepickerTo").datepicker("setDate", defaultToDate);
function limitToDateSpan(currentFromDate) {
$("#datepickerTo").datepicker("option", "minDate", currentFromDate);
var maxDate = new Date(currentFromDate.getTime());
maxDate.setFullYear(maxDate.getFullYear() + 1);
$("#datepickerTo").datepicker("option", "maxDate", maxDate);
}
limitToDateSpan(defaultFromDate);
// From
$("#datepickerFrom").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true,
minDate: "2013-01-01",
maxDate: "+1Y",
onSelect: function (dateText) {
limitToDateSpan(new Date(dateText));
}
});
$("#datepickerFrom").datepicker("setDate", defaultFromDate);
$("#<%=txtFromDate.ClientID%>").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-M-yy',
showOn: "button",
buttonImage: "../Images/Calendar.png",
buttonImageOnly: true,
yearRange: '-20:+20',
buttonText: "Date with abbreviated month name",
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() + 1);
$("#<%=txtToDate.ClientID%>").datepicker("option", "minDate", dt);
}
});
$("#<%=txtToDate.ClientID%>").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-M-yy',
showOn: "button",
buttonImage: "../Images/Calendar.png",
buttonImageOnly: true,
yearRange: '-20:+20',
buttonText: "Date with abbreviated month name",
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() - 1);
$("#<%=txtFromDate.ClientID%>").datepicker("option", "maxDate", dt);
}
});
Greatings
i have a couple of datepicker inputs, the first sets the limits for the second, but if the user trys to select an other initial date the limits of the second input stays the same as the first time it was selected.
how could i reset the datepickers every time i select an other sdate
//
function load_pmForm(){
$("#main_rcol").hide().load('frontend/incs/assets.php #p_milestones', function(){
var limit1 =jQuery.data( document.body,"pd1");
var limit2 =jQuery.data( document.body,"pd2");
$("#pm_sdate").datepicker({
dateFormat: "yy-mm-dd",
minDate: limit1,
maxDate: limit2,
onSelect: function(dateText, inst) {
$("#pm_edate").datepicker({
dateFormat: "yy-mm-dd",
minDate: dateText,
maxDate: limit2
});
}
});
}).fadeIn('500');
}
if you want to influence one datepicker by other, you can do this e.g. this way. Here are datepickers date_from and date_to
$("#date_from").datepicker({
...
onSelect: function () {
date = $(this).datepicker("getDate");
date.setDate(date.getDate() + 1);
$("#date_to").datepicker("option", "minDate", date);
$(this).change();
}
});
$("#date_to").datepicker({
...
onSelect: function () {
date = $(this).datepicker("getDate");
date.setDate(date.getDate() - 1);
$("#date_from").datepicker("option", "maxDate", date);
$(this).change();
}
});
In your case you need also add to your code $(this).change();
onSelect: function(dateText, inst) {
$("#pm_edate").datepicker({
dateFormat: "yy-mm-dd",
minDate: dateText,
maxDate: limit2
});
>>>> $(this).change(); <<<<
}
I am working on my personal work website.
My problem is, in calender "From" date can be picked even before today (not good), moreover if "From" date is selected 5 days from today, in "To" date it still gives me option to select date for before "From" selected date.
while it should only let me select date beyond what I have in "From" date. Moreover can't figure out how to bring hover effect in "end date"(Like even if hover 6th day from now, shouls highlight 5th & sixth day.)
JavaScript:
$(document).ready(function(){
$('#from').datepicker({
numberOfMonths:2
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#to').datepicker({
numberOfMonths:2
});
});
</script>
To adjust the from date and set the minDate try something like the following.
You can find the api documentation here: http://api.jqueryui.com/datepicker
$(document).ready(function(){
$('#from').datepicker({
minDate: 0,
numberOfMonths:2,
onSelect: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$('#to').datepicker({
minDate: 0,
numberOfMonths:2
});
});
According to API DatePicker
you need to set minDate & maxDate on selection.
$(document).ready(function(){
$('#from').datepicker({
numberOfMonths:2,
onSelect: function (date) {
$("#to").datepicker("option", "minDate", date);
}
});
$('#to').datepicker({
numberOfMonths:2,
onSelect: function (date) {
$("#from").datepicker("option", "maxDate", date);
}
});
});
Click on the first field;
select any day; (then automatic opening second datepicker)
click next month button
showing datepicker has flash, but month not change
after this, next month button (and prev month button) have work.
WHYYYYYYY ?????
Fiddel Demo
$(".from_date").datepicker({
minDate: 'D',
dateFormat: "dd/mm/yy",
defaultDate: "+1w",
numberOfMonths: 2,
onClose: function(selectedDate) {
$(".to_date").datepicker("option", "minDate", selectedDate);
$(this).parents('.span2').next().children().find('.to_date').focus();
}
});
$(".to_date").datepicker({
minDate: '+1D',
dateFormat: "dd/mm/yy",
defaultDate: "+1w",
numberOfMonths: 2
});
I can confirm the bug, it has something to do with opening the second datepicker from the onClose function, adding a zero delay timeout seems to work though:
onClose: function(selectedDate) {
var $toDate = $(this).closest('.span2').next().find('.to_date');
$toDate.datepicker("option", "minDate", selectedDate);
setTimeout(function(){$toDate.datepicker('show')},0);
}
Updated fiddle
Note: I changed your code a bit, I optimized your .to_date selector and made it so only the corresponding input is updated with the selected date
I am working on a project which involves using HTML5 and Javacript/JQuery. I am trying to make use of the Jquery datepicker and trying to set the minimum date to today's date so the user can't select a date from yesterday.
Below is my Javascript.
$(function()
{
var today = new Date();
$("#txtStartDate").datepicker(
{
changeMonth: true,
numberOfMonths: 1,
minDate: new Date(today.getYear(), today.getMonth() +1, today.getDay()),
onClose: function(selectedDate)
{
$("#txtStartDate").datepicker("option", "dateFormat", "dd-mm-yy", selectedDate);
}
});
});
It doesn't seem to be making any difference as I can still go back to days before yesterday.
Thanks for any help you can provide.
I guess you did'nt read the documentation ?
minDate
Type: Date or Number or String
Default: null
The minimum selectable date. When set to null, there is no minimum.
Multiple types supported:
Date: A date object containing the minimum date.
Number: A number of days from today. <- set to 0, it's no days from today !
So setting minDate to 0 should work, right !
$(function () {
var today = new Date();
$("#txtStartDate").datepicker({
changeMonth: true,
numberOfMonths: 1,
minDate: 0,
onClose: function (selectedDate) {
$("#txtStartDate").datepicker("option", "dateFormat", "dd-mm-yy", selectedDate);
}
});
});