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 get this working it gets on week selection "Week number: #" on main field and on alternate field get "yy-mm-dd"
On load I get "yy-mm-dd" from current date (Today) On both fields, but I want on load "Week number: #" on main and "yy-mm-dd" on alternate, from current date.
$(function() {
var currentDate = new Date();
$( "#fecha" ).datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showWeek: true,
firstDay: 1,
dateFormat: 'yy-mm-dd',
altField: "#date1",
altFormat: "yy-mm-dd",
onSelect: function(dateText, inst) {
$(this).val("Semana Numero: " + $.datepicker.iso8601Week(new Date(dateText)));
}
});
$("#fecha").datepicker("setDate", currentDate);
});
Any suggestion?
I'm not very familiar with the datepicker plugin, but it looks like it doesn't have any events you can trigger on it.
Anyways, this might not be the best approach, but what I did was loop through all the datepicker date <a>'s and trigger a click on the date that matches today's date.
https://jsfiddle.net/b3vstmef/
I was just looking over the datepicker and it doesnt look like you can trigger the onselect so I found that the code below will work instead.
$(function() {
var currentDate = new Date();
$( "#fecha" ).datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showWeek: true,
firstDay: 1,
dateFormat: 'yy-mm-dd',
altField: "#date1",
altFormat: "yy-mm-dd",
onSelect: function(dateText, inst) {
populate(this, dateText)
}
});
$("#fecha").datepicker("setDate", currentDate);
});
function populate(field, d){
$(field).val("Semana Numero: " + $.datepicker.iso8601Week(new Date(d)));
}
populate($( "#fecha" ), $("#date1").val());
See it in action:
https://jsfiddle.net/y3llowjack3t/ycok5cwx/
I'm trying to use the jquery datepicker and when my code is simply something like this:
$('#startDate').datepicker({
showButtonPanel: true,
dateFormat: 'MM yy'
});
It works just fine, but when I try to use $(this) or even just $('startDate') again within my call, it throws an "Object doesn't support property or method 'datepicker'" error. (Like in the code below)
$('#startDate').datepicker({
showButtonPanel: true,
dateFormat: 'MM yy',
$(this).datepicker('setDate', new Date(2015, 1, 1));
// Also throws an error when I replace $(this) with $('startDate')
})
I even get the same error just by wrapping it in $(document).ready() and still using the simple working version...
$(document).ready(function() {
$('#startDate').datepicker({
showButtonPanel: true,
dateFormat: 'MM yy'
});
});
Any idea what could be causing this error?
EDIT
Here is a more full example of what I'm trying to do...
Basically, I would like to be able to toggle a date selector to being a monthpicker and a datepicker based on the value of the variable timeBucket...
The issue is that whenever I use $('#startDate').datepicker within my original $('#startDate').datepicker it throws an error...
$('#startDate').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: timeBucket == 2 ? 'MM yy' : "mm/dd/yy",
onSelect: function (dateText, inst) {
if (timeBucket == 2) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$('startDate').datepicker('setDate', new Date(year, month, 1));
}
}
}).focus(function () {
var thisCalendar = $(this);
if (timeBucket == 1) {
$('.ui-datepicker-calendar').detach();
$('.ui-datepicker-calendar').css("display", "none");
} else {
$('.ui-datepicker-calendar').css("display", "");
}
});
Here you are:
$("#StartDate").datepicker({
dateFormat: 'dd/mm/yy',
beforeShow: function() {
// Everytime datepicker open, this function will run
//$(this).datepicker('setDate', new Date(2015, 1, 1));
}
});
// Set datetime here once when page load.
$('#StartDate').datepicker('setDate', new Date(2015, 1, 1));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />Start:
<input type="text" id="StartDate" />
Hope this helps.
I have jquery datepicker like so
$birth.datepicker({
onSelect: function(dateText, inst) {
$(this).parent().find("label#error").html("");
$gender.focus();
},
yearRange: '1950:2006',
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true,
dateFormat: 'yy-mm-dd',
defaultDate: new Date(2006,01,01),
});
I am trying to modify this code so it will take the current year and subtract it by 10 like so
$birth.datepicker({
var currentYear = new Date();
onSelect: function(dateText, inst) {
$(this).parent().find("label#error").html("");
$gender.focus();
},
yearRange: '1950:document.write(currentYear.getFullYear() - 10)',
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true,
dateFormat: 'yy-mm-dd',
defaultDate: new Date(2006,01,01),
});
The code above this does not work, it breaks my datepicker....is there a better way to do this?
Change:
yearRange: '1950:document.write(currentYear.getFullYear() - 10)',
to:
yearRange: '1950:-10',
That will set the yearRange from 1950 to 10 years less than the current year.
jsFiddle example
From the documentation for the yearRange option:
The range of years displayed in the year drop-down: either relative to
today's year ("-nn:+nn"), relative to the currently selected year
("c-nn:c+nn"), absolute ("nnnn:nnnn"), or combinations of these
formats ("nnnn:-nn").
No dude no.
Do all the variable calculations outside the datepicker function call.
This code cannot run.
Use this
var year = (new Date()).getFullYear() - 10
and in the datepicker initializer
yearRange: "1950:" + year,
That should be enough
I've got a jquery UI DatePicker with the following parameters:
changeMonth: true,
changeYear: true,
yearRange: "-16:-1",
dateFormat: 'dd-mm-yy'
It correctly displays only years 1996 till 2011. However, when I select a date for the first time, it's strangely displayed as 08-03-2012. 2012 is not even an option for selection in the datepicker, but this is the date which is then produced in my text box.
If I then select a date once again, it's correctly displayed - this only occurs for the first time.
Any ideas?
You can set a default date in your range like this:
<script type="text/javascript">
$(function() {
$("#birthdate" ).datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-16:-1",
dateFormat: 'dd-mm-yy',
defaultDate: '01-01-1996'
});
});
</script>
Here is another way to set the default date with the first year of the range.
<script type="text/javascript">
var default_date = new Date(); //Create a new date object
default_date.setYear(date.getYear() - 16); //Substract the current year with the first year of the range
$(function() {
$("#birthdate" ).datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-16:-1",
dateFormat: 'dd-mm-yy',
defaultDate: default_date
});
});
</script>