So i am trying to restrict the user from selecting the check-out date
to be the same as the check-in date using jQuery UI Date range picker
(http://jqueryui.com/datepicker/#date-range). I have it where they are
not able to select before the check-in date but as of right now the
check-in date and check-out date can be the same files.
This is the jquery
$(function() {
$( "#check-in" ).datepicker({
minDate: 0,
dateFormat: "yy-mm-dd",
changeMonth: true,
numberOfMonths: 2,
changeYear: true,
onClose: function( selectedDate, inst ) {
$( "#check-out" ).datepicker( "option", "minDate", selectedDate);
}
});
$( "#check-out" ).datepicker({
minDate: "+1D",
dateFormat: "yy-mm-dd",
changeMonth: true,
numberOfMonths: 2,
changeYear: true,
onClose: function( selectedDate, inst ) {
$( "#check-in" ).datepicker( "option", "maxDate", selectedDate +"+1D");
}
});
});
This is the HTML
<div class="formInput">
<label for="check-in">Check-in:</label>
<input type="text" id="check-in" name="check-in" value="yyyy/mm/dd" size="30" class="textInput">
</div>
<div class="formInput">
<label for="check-out">Check-out:</label>
<input type="text" id="check-out" name="check-out" value="yyyy/mm/dd" size="30" class="textInput">
</div>
What I want is the check out date to default to 1 day after the check in date every time the check-in date is selected. Thank you in advance
You can't add days using this code
$( "#check-in" ).datepicker( "option", "maxDate", selectedDate +"+1D")
Try this instead:
onClose: function( selectedDate, inst ) {
var maxDate = new Date(Date.parse(selectedDate));
maxDate.setDate(maxDate.getDate() - 1);
$( "#check-in" ).datepicker( "option", "maxDate", maxDate);
}
Here's the fiddle: http://jsfiddle.net/RxTax/1/
change minDate.setDate(maxDate.getDate() + 1);
to minDate.setDate(minDate.getDate() + 1);
the fact is that is just working with dateFormat: "yy-mm-dd" and not with other dateFormat as regional fr or alike.
I have written a work-around for other dateFormats using alternate fields. I tested on IE chrome and Firefox and works quite good.
function resetFrom() {
var altcheck-in = document.getElementById("altcheck-in");
var check-in= document.getElementById("check-in");
altcheck-in.value = "";
if (altcheck-in.value == "") {
check-in.value = "";
$("#check-out").datepicker("destroy");
$("#check-out").datepicker({
minDate: "+1D",
dateFormat: "yy-mm-dd",
altFormat: "dd-mm-yy",
altField: "#altcheck-out",
changeMonth: true,
numberOfMonths: 1,
changeYear: true,
showOn: "button",
buttonImage: "/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date",
onClose: function (selectedDate) {
if (selectedDate != "") {
var maxDate = new Date(Date.parse(selectedDate));
maxDate.setDate(maxDate.getDate() - 1);
$("#check-in").datepicker("option", "maxDate", maxDate);
}
}
});
}
}
function resetTo() {
var altcheck-out = document.getElementById("altcheck-out");
var check-out = document.getElementById("check-out");
altTo.value = "";
if (altcheck-out.value == "") {
to.value = "";
$("#check-in").datepicker("destroy");
$("#check-in").datepicker({
dateFormat: "yy-mm-dd",
altFormat: "dd-mm-yy",
altField: "#altcheck-in",
minDate: 0,
changeMonth: true,
numberOfMonths: 1,
changeYear: true,
showOn: "button",
buttonImage: "/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date",
onClose: function (selectedDate) {
if (selectedDate != "") {
var minDate = new Date(Date.parse(selectedDate));
minDate.setDate(minDate.getDate() + 1);
$("#check-out").datepicker("option", "minDate", minDate);
}
}
});
}
}
$(function () {
$("#check-in").datepicker({
dateFormat: "yy-mm-dd",
altFormat: "dd-mm-yy",
altField: "#altcheck-in",
minDate: 0,
changeMonth: true,
numberOfMonths: 1,
changeYear: true,
showOn: "button",
buttonImage: "/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date",
onClose: function (selectedDate) {
if (selectedDate != "") {
var minDate = new Date(Date.parse(selectedDate));
minDate.setDate(minDate.getDate() + 1);
$("#check-out").datepicker("option", "minDate", minDate);
}
}
});
$("#check-out").datepicker({
minDate: "+1D",
dateFormat: "yy-mm-dd",
altFormat: "dd-mm-yy",
altField: "#altcheck-out",
changeMonth: true,
numberOfMonths: 1,
changeYear: true,
showOn: "button",
buttonImage: "/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date",
onClose: function (selectedDate) {
if (selectedDate != "") {
var maxDate = new Date(Date.parse(selectedDate));
maxDate.setDate(maxDate.getDate() - 1);
$("#check-in").datepicker("option", "maxDate", maxDate);
}
}
});
});
<input name="altcheck-in" type="text" id="altcheck-in" onchange="resetFrom();" style="width:250px;" />
<input name="check-in" type="text" id="check-in" style="display: none" />
<input name="altcheck-out" type="text" id="altcheck-out" onchange="resetTo();" style="width:250px;" />
<input name="check-out" type="text" id="check-out" style="display: none" />
JQuery UI date picker end date 1 day after start date
http://jsfiddle.net/wskhcgdq/1/
You can't add days using this code
$( "#check-in" ).datepicker( "option", "maxDate", selectedDate +"+1D")
Try this instead:
$(function() {
$( "#check-in" ).datepicker({
minDate: 0,
dateFormat: "yy-mm-dd",
changeMonth: true,
numberOfMonths: 2,
changeYear: true,
onClose: function( selectedDate, inst ) {
var minDate = new Date(Date.parse(selectedDate));
minDate.setDate(maxDate.getDate() + 1);
$( "#check-out" ).datepicker( "option", "minDate", minDate);
}
});
$( "#check-out" ).datepicker({
minDate: "+1D",
dateFormat: "yy-mm-dd",
changeMonth: true,
numberOfMonths: 2,
changeYear: true,
onClose: function( selectedDate, inst ) {
var maxDate = new Date(Date.parse(selectedDate));
maxDate.setDate(maxDate.getDate() - 1);
$( "#check-in" ).datepicker( "option", "maxDate", maxDate);
}
});
});
Related
When I activate the jQuery UI I would like to have a default value, both for 'to' and 'from' that is today's date, and how should I do it based on the code below?
'http://jsbin.com/ceyuhudajo/edit?html,output'
$(function() {
$( "#from").datepicker({
showWeek: true,
firstDay: 1,
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
dateFormat: "yy-mm-dd",
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
showWeek: true,
firstDay: 1,
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
dateFormat: "yy-mm-dd",
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
Thanks!
You should delete:
defaultDate: "+1w"
which sets the default date to be one week ahead.
Im trying to get rid of the drop down menu here (circled in red) and have just display the month (circled in green)
Here is my code for the datepicker so far:
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
Get rid of changeMonth: true,.
jsFiddle example
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
I have a datepicker form included on each page of a financial accounting web site. The date picker is designed to allow users to select a range of dates for the data that they want displayed.
Unfortunately, the only way to get the calendars to appear when the text field has focus, as a user navigates from page to page, is for a hard refresh (Ctrl-R). Not the optimum.
here's the form:
<li data-data-theme='b' >
<label for="from">From</label>
<input type="text" id="from" name="from"/>
</li>
<li data-data-theme='d'>
<label for="to">to</label>
<input type="text" id="to" name="to"/>
</li>
And here's the jquery:
$(function() {
console.log("hello world 2");
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 3,
stepMonths: 3,
showOtherMonths: true,
showOptions: {direction: 'up'},
showButtonPanel: true,
yearRange: "2011:2019",
showAnim: "fold",
dateFormat: "yy-mm-dd",
onSelect: function( selectedDate ) {
$( "#to" ).datepicker();
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 3,
stepMonths: 3,
showOtherMonths: true,
showOptions: {direction: 'up'},
showButtonPanel: true,
yearRange: "2011:2019",
showAnim: "fold",
dateFormat: "yy-mm-dd",
onSelect: function( selectedDate ) {
$( "#from" ).datepicker();
}
});
});
}
$(document).ready(function(){
console.log("hello world");
$(function() {
console.log("hello world 2");
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 3,
stepMonths: 3,
showOtherMonths: true,
showOptions: {direction: 'up'},
showButtonPanel: true,
yearRange: "2011:2019",
showAnim: "fold",
dateFormat: "yy-mm-dd",
showOn: 'button',
buttonImage: 'images/datepicker_icon.png',
buttonImageOnly: true,
onSelect: function( selectedDate ) {
$( "#to" ).datepicker();
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 3,
stepMonths: 3,
showOtherMonths: true,
showOptions: {direction: 'up'},
showButtonPanel: true,
yearRange: "2011:2019",
showAnim: "fold",
dateFormat: "yy-mm-dd",
onSelect: function( selectedDate ) {
$( "#from" ).datepicker();
}
});
});
});
I have tried changing the form to include reference to a class: eg:
<li data-data-theme='b' >
<label for="from">From</label>
<input class='datepicker' type="text" id="from" name="from"/>
</li>
<li data-data-theme='d'>
<label for="to">to</label>
<input class='datepicker' type="text" id="to" name="to"/>
</li>
and then referencing that in the jquery function thus:
$(function() {
console.log("hello world 2");
$( ".datepicker" ).datepicker({
...
onSelect: function( selectedDate ) {
$( ".datepicker" ).datepicker();
}
});
});
but all to no avail.
So, here's the question: how do I have the datepicker calendar appear when a user navigates to a new page on the web site?
would you like to open datepicker by default..when user comes to these pages. if yes you have to configure display inline property of datepicker see example Example datepicker display inline
$(function() {
$('#datepicker').datepicker({altField: '#date1'});
});
I am using jQuery ui date picker (date range) I want to restrict it to 6 months
var dates = $("#availability_date_from, #availability_date_to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
minDate:'0',
yearRange:'c-18:c',
onSelect: function( selectedDate ) {
var option = this.id == "availability_date_from" ? "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 );
if(this.id == "availability_date_to"){
commonJSComplete(this.value,'availability_date_to');
$('#responsecontainer').load('profilemeter.php');
}
else if(this.id == "availability_date_from"){
commonJSComplete(this.value,'availability_date_from');
}
}
});
Try:
var dates = $("#availability_date_from, #availability_date_to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
minDate:'0',
maxDate: '+6m', //add this
.....
You can get month/day/year from the selected date, then change the value accordingly. I need to a condition that the user only need to select maximum of 6 months from the date picker. So when to_date is selected then I will set minimun from date to a value that is 6 months below the selected to_date. Try this and let me know :)
$( "#txtFromDate" ).datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
onSelect: function( selectedDate ) {
$( "#txtToDate" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#txtToDate" ).datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
onSelect: function( selectedDate , instance) {
var minDate = $.datepicker.parseDate(instance.settings.dateFormat, selectedDate, instance.settings)
minDate.setMonth(minDate.getMonth() - 6);
$( "#txtFromDate" ).datepicker( "option", "minDate", minDate );
}
});