How to restrict jqueryui date range? - jquery-ui

I have two date-pickers #from and #to, as usual, now what I need to do is make sure that the date range selected between the two is always within 3months of each other. So basically, on selecting one of the pickers, I need to set minDate/maxDate option for the other one relative to the selected date, But I don't know what would be the best way to find these relative dates. Any suggestions?

Alternatively you could do it like this:fiddle
Both ways are valid, i suppose.
.js
$("#startDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText,dateObj){
var dateObject = $(this).datepicker("getDate");
dateObject.setMonth(dateObj.currentMonth+3);
$("#endDatePicker").datepicker( "option", "maxDate",dateObject);
}
});
$("#endDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
onSelect: function(dateText,dateObj){
var dateObject = $(this).datepicker("getDate");
dateObject.setMonth(dateObj.currentMonth-3);
$("#startDatePicker").datepicker( "option", "minDate",dateObject);
}
});

I have created a jsfiddle.The range between the days is set to 3 days.you can edit based on ur requirement
$(document).ready(function () {
$("#startDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function (date) {
if ($('#endDatePicker').val() == "") {
var selectedDate = new Date(date);
var secsPerDay = 86400000;
var endDate = new Date(selectedDate.getTime() + 2 * secsPerDay);
alert(endDate);
$("#endDatePicker").datepicker("option", "minDate", selectedDate);
$("#endDatePicker").datepicker("option", "maxDate", endDate);
}
}
});
$("#endDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
onSelect: function (date) {
if ($('#startDatePicker').val() == "") {
var selectedDate = new Date(date);
var secsPerDay = 86400000;
var startDate = new Date(selectedDate.getTime() - 5 * secsPerDay);
$("#startDatePicker").datepicker("option", "minDate", startDate);
$("#startDatePicker").datepicker("option", "maxDate", selectedDate);
}
}
});
});
and HTML
<p>Start Date:
<input type="text" id="startDatePicker"/>
</p>
<p>End Date:
<input type="text" id="endDatePicker"/>
</p>

Related

Ensuring a date is at least 1 day later than another date using jQuery UI Datepicker

Using jQuery DatePicker, I'd like to ensure that the departure date is at least 1 day after the arrival date. The closest I've managed to get to this is to ensure that the departure date is on the same day as the arrival date (I just couldn't figure out how to add 'selectedDate + 1 day' in the JS). I'd appreciate any help with this, thanks.
Here's my JS:
$(".datepicker_arrival").datepicker({
dateFormat: 'dd/mm/yy',
minDate: new Date(),
onSelect: function(dateText, inst) {
if($('.datepicker_departure').val() == '') {
var current_date = $.datepicker.parseDate('dd/mm/yy', dateText);
current_date.setDate(current_date.getDate()+1);
$('.datepicker_departure').datepicker('setDate', current_date);
}
},
onClose: function( selectedDate ) {
$( ".datepicker_departure" ).datepicker( "option", "minDate", selectedDate );
}
});
$(".datepicker_departure").datepicker({
dateFormat: 'dd/mm/yy',
minDate: new Date(),
onClose: function( selectedDate ) {
$( ".datepicker_arrival" ).datepicker( "option", "maxDate", selectedDate );
}
});
Here's my HTML:
<input type="text" name="arrival" class="datepicker datepicker_arrival textfield" placeholder="Arrival Date" />
<input type="text" name="departure" class="datepicker datepicker_departure textfield" placeholder="Departure Date" />
You can pass the datepicker object in the onClose method:
http://api.jqueryui.com/datepicker/#option-onClose
Consequently, this should work fine:
$(".datepicker_arrival").datepicker({
dateFormat: 'dd/mm/yy',
minDate: new Date(),
onSelect: function(dateText, inst) {
if($('.datepicker_departure').val() == '') {
var current_date = $.datepicker.parseDate('dd/mm/yy', dateText);
current_date.setDate(current_date.getDate()+1);
$('.datepicker_departure').datepicker('setDate', current_date);
}
},
onClose: function( selectedDate, test) {
var MyDateString = ('0' + (parseInt(test.selectedDay)+1)).slice(-2) + '/'
+ ('0' + (test.selectedMonth+1)).slice(-2) + '/'
+ test.selectedYear;
$( ".datepicker_departure" ).datepicker( "option", "minDate", MyDateString);
}
});
Fiddle:
http://jsfiddle.net/SpAm/9mSxk/1/
Credit for the padding idea comes from the accepted answer by user113716 in this thread:
Javascript add leading zeroes to date

set minDate of next datepicker instance based on previous datepicker date + 1 day

HTML
<label for="checkIn">Check in</label>
<input type="text" readonly="readonly" name="checkIn" id="checkIn" />
<label for="checkOut">Check out</label>
<input type="text" readonly="readonly" name="checkOut" id="checkOut" />
javaScript
var dates = $( "#checkIn, #checkOut" ).datepicker({
autoSize: true,
minDate: "+0",
maxDate: "+6M",
onSelect: function( selectedDate ) {
var option = this.id == "checkIn" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat
|| $.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});
now what I want that, whenever a user set any date for checkIn, checkOut should be next to that selected date along with all other options.
see the fiddle for the same
I tried a lot but not succeed. Please help me what logic to apply?
Try to separate the fields and initiate datepicker separately, and then, try this:
$('#date1').datepicker({
constrainInput: true,
dateFormat: 'D, dd M yy',
// Once change, set date2 min date
onSelect: function (dateText, inst) {
$('#date2').datepicker("option", "minDate", dateText);
}
});
$('#date2').datepicker({
constrainInput: true,
minDate: 0,
dateFormat: 'D, dd M yy'
});
Hope this help :)
shennyL answer didn't account for selected date + n.
So:
On your #checkIn place:
minDate: 0, //sets the minDate offset to 0, meaning today.
onSelect: function() {
var date = $(this).datepicker('getDate');
if (date) {
date.setDate(date.getDate() + 1);
$("#checkOut").datepicker("option", "minDate", date)
}
}
This works quite ok as far as I can tell. You may just need to clean up some code on your fiddle perhaps ?

jquery datepicker range firing an event

I have a jquery ui datepicker range with a from-date and to-date, how do I send an alert when the date range is changed? here's my code:
$(function() {
var dates = $("#date-from, #date-to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
onSelect: function(selectedDate) {
instance = $(this).data("datepicker"), date = $.datepicker.parseDate(
instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.datepicker("option", "dateFormat", "DD, d MM, yy");
}
});
$('#date-from').datepicker({
onClose: function() {
alert("closed");
}
});
});
but the onClose: event is not fired. Thanks
You can either separately initialise #date-from and #date-to, or include the onClose option in the combined initiation and check for the element ID. Here is an example for the 2nd approach:
var dates = $("#date-from, #date-to").datepicker({
...
onClose: function() {
if ($(this).attr('id') == 'date-from') {
alert("closed");
}
}
});
See this in action: http://jsfiddle.net/william/L9Szd/1/

Restrict date in jquery datepicker based on another datepicker or textbox

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);
}
});

Jquery UI datePicker

I have this code
$("#calendar").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText, inst) {
$('.selected-date').html(dateText);
}
});
I am looking for a way to send the date in 1 format to the database with ajax(not shown) and also update a div with a different date format.
What is the best way to do this?
Update # 1
$("#calendar").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText, inst) {
var fmt2 = $.datepicker.formatDate("mm-dd-yy", dateText);
$(".selected-date").html(fmt2);
}
});
Update # 2
$("#calendar").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText, inst) {
var d = new Date(dateText);
var fmt2 = $.datepicker.formatDate("DD, d MM, yy", d);
$(".selected-date").html(fmt2);
}
});
You've already got the function that's called when a date is selected, so you can then do something similar to the following:
onSelect: function(dateText, inst) {
$('.selected-date').html(dateText);
var fmt1 = $.datepicker.formatDate("yy-mm-dd", dateText);
$.get("/your/ajax/url/" + fmt1, yourCallbackFunction);
var fmt2 = $.datepicker.formatDate("mm-dd-yy", dateText);
$("#someotherdiv").html(fmt2);
}
Not tested but should work... :-)
Update #1
Looks like the datepicker.formatDate() function needs a Date object to work with. The following works here...
onSelect: function(dateText, inst) {
$('.selected-date').html(dateText);
var d = new Date(dateText);
var fmt1 = $.datepicker.formatDate("dd/mm/y", d);
$.get("/your/ajax/url/" + fmt1, yourCallbackFunction);
var fmt2 = $.datepicker.formatDate("MM o, yy", d);
$("#someotherdiv").html(fmt2);
}

Resources