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);
}
});
I want to set mindate on basis of first datetimepicker, its working fine first time but when I setting for second time , its not working properly. What I missing, any suggestion.
Thanks in advance.
$('#start_dateTime').datetimepicker({
minDate: moment()
}).on('dp.change', function (event) {
var start_dateTime = this.value;
$('#end_dateTime').attr('readonly', false);
$('#end_dateTime').datetimepicker({
minDate: moment(start_dateTime)
})
});
Below is the code for jQuery without using Moment This is for DatePicker Same is applicable for Datetimepicker too.
jQuery(document).ready(function ($) {
$('#startdate_0').datepicker({
//changeMonth: true, changeYear: true,
dateFormat: "yy-mm-dd",
minDate: new Date(),
onClose: function (selectedDate) {
$("#enddate_0").datepicker("option", "minDate", selectedDate);
}
});
$('#enddate_0').datepicker({
// changeMonth: true, changeYear: true,
dateFormat: "yy-mm-dd",
onClose: function (selectedDate) {
$("#startdate_0").datepicker("option", "maxDate", selectedDate);
}
});
});
I'm trying to implement the JQuery DatePicker w/ week no and returning the selected date in format YYYYMMDD. When looking into the api for how to format date it says this could be done by using dateFormat: "yy-mm-dd". However, I'm not able to return the date in specified format.
I'm able to return the date in 'original format' with this code:
$(function DatePicker() {
$( "#datepicker" ).datepicker({
onSelect: function(date) {
var date = $(this).datepicker( 'getDate' );
alert(date);
( 'getDate' ).getDate();
},
showWeek: true,
//showOn:"button",
firstDay: 1
});
});
Here is my code for trying to return (show a pop up) wewith the format 'YYYYMMDD':
$(function DatePicker() {
$( "#datepicker" ).datepicker({
// dateFormat: 'yy-mm-dd',
onSelect: function() {
dateFormat: 'yy-mm-dd',
//var dateFormat = $(this).datepicker( "option", "dateFormat" );
//$.(this).datepicker("option", "dateFormat", "yy-mm-dd"); //Senast insatt
alert(dateFormat);
},
showWeek: true,
firstDay: 1
});
});
Obviously I'm new to JQuery, and fairly new to JavaScript as a language.
Thanks!
Check this:
$( "#datepicker" ).datepicker({
dateFormat: 'yymmdd',
onSelect: function(v){
alert(v);
},
showWeek: true,
firstDay: 1
});
Test code here: http://codepen.io/anon/pen/yOBwLo
i have a requirement in which i need to two date pickers for entering from and To Dates.ToDate Should be greater than or equal to From Date(After selecting fromdate,all previous dates should be disabled in second Datepiker).Also both from date and todate should be from current Year only.How can i do the same using jquery date picker configuration.Current i am creating date pikers like this
$(document).on('click', '#From', function () {
$(this).datepicker({ dateFormat: 'dd/mm/yy', changeMonth: true, yearRange: new Date().getFullYear().toString() + ':' + new Date().getFullYear().toString(), changeYear: false });
});
$(document).on('click', '#To', function () {
$(this).datepicker({ dateFormat: 'dd/mm/yy', changeMonth: true, yearRange: new Date().getFullYear().toString() + ':' + new Date().getFullYear().toString(), changeYear: false });
});
Can anyone help on this
The way to do this without losing the year restriction is:
<script type="text/javascript">
$(function () {
$("#From").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
yearRange: new Date().getFullYear().toString() + ':' + new Date().getFullYear().toString(),
onClose: function (selectedDate) {
$("#To").datepicker("option", "minDate", selectedDate);
}
});
$("#To").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
yearRange: new Date().getFullYear().toString() + ':' + new Date().getFullYear().toString(),
onClose: function (selectedDate) {
$("#From").datepicker("option", "maxDate", selectedDate);
}
});
});
</script>
I am using 2 datepickers in which return should not be less than
departure.
On selecting of the datepicker, it is executing onSelect
event functionality(pls check the datepicker script). But i want to make this while initial load
without on select. Because issue is return datepicker is showing
before date since i not select departure datepicker.This issue will happening when it is posted to another page, with same datepickers.
eg: In first page i have selected 22-12-2014 and return 30-12-2014 ,
if i post these values to another page having same datepickers for
return i can able to select before 22-12-2014.
$("#departure").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
minDate: '+1d',
numberOfMonths: 2,
showButtonPanel: true,
onSelect: function (selectedDate) {
var minDate = $(this).datepicker('getDate');
if (minDate) {
minDate.setDate(minDate.getDate());
}
$("#return").datepicker("option", {minDate: minDate}, selectedDate);
}
});
$("#return").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
minDate: '+1d',
numberOfMonths: 2,
showButtonPanel: true,
onSelect: function (selectedDate) { //alert($('#startPicker').val());
var minDate = $(this).datepicker('getDate');
if (minDate) {
minDate.setDate(minDate.getDate());
}
$("#departure").datepicker("option", {maxDate: minDate}, selectedDate);
}
});
You will need to add the minDate again on the new page.
You could add something like:
<?php if ($_SERVER['REQUEST_METHOD'] == "POST") { ?>
$( document ).ready(function() {
$("#return").datepicker("option", {minDate: <?=$_POST['departureDate']; ?>}, selectedDate);
});
<?php } ?>
Not tested but you get the idea.