I have 2 datepickers (From date, to date) or when a people arive at my hotel and when he leaves. What i want to achieve is not to let the user select a range that includes unavailable dates.
For example:
Today is 13.02.2015, a people want to reserve from 15.02.2015 to 23.02.2015 but the dates 19-02-2015, 20-02-2015 are already reserved. So i want to disable all the fields starting from 19.02.2015 meaning that he can select only from 15.02.2015 to 18.02.2015. It depends on what date he picks and he can book only to the first unavailable date, not next to that.
How can I achieve this?
This is my html code:
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
This is the javascript code
var unavailableDates = ["19-2-2015", "20-2-2015", "23-2-2015", "24-2-2015"]
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if (jQuery.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
beforeShowDay: unavailable,
numberOfMonths: 1,
dateFormat: 'dd/mm/yy',
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
beforeShowDay: unavailable,
numberOfMonths: 1,
dateFormat: 'dd/mm/yy',
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
And here is my jsfiddle working example
Here you go...
I have created a function which convert string to Date
function compareDate(str1, sep){
var dt1 = parseInt(str1.split(sep)[0], 10);
var mon1 = parseInt(str1.split(sep)[1], 10);
var yr1 = parseInt(str1.split(sep)[2], 10);
var date1 = new Date(yr1, mon1-1, dt1);
return date1;
}
Next I have created a function which gives the maxDate for #to Smartly.
function setMaxDate()
{
var date = $("#from").val();
for(var i=0; i<unavailableDates.length; i++)
{
if(compareDate(date, "/")<compareDate(unavailableDates[i], "-"))
return compareDate(unavailableDates[i], "-");
}
return null;
}
and doing some modifications in datepicker init
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
beforeShowDay: unavailable,
numberOfMonths: 1,
dateFormat: 'dd/mm/yy',
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
$( "#to" ).datepicker( "option", "maxDate", setMaxDate() ); // Added This
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
beforeShowDay: unavailable,
numberOfMonths: 1,
dateFormat: 'dd/mm/yy',
maxDate: setMaxDate(), // Added This
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
And it worked.. Here is the working jsFiddle
Related
on the on _change event of from_date i want to fetch the value of input days and from_date to add the value of days and from_date and set it to to_date
for example input_days=5 and from_date=10/02/2020 it should add and automatically display 15/02/2020 in to_date....
here is the code which adds from_date and to_date and displays total_date but... what should i change in this logic?
$("#fromdate,#todate").datepicker({
minDate: 0,
changeMonth: true,
changeYear: true,
firstDay: 1,
dateFormat: 'yy/mm/dd',
});
$("#fromdate").datepicker({dateFormat: 'yy/mm/dd'});
$("#todate").datepicker({dateFormat: 'yy/mm/dd'});
$('#enddate').change(function () {
var start = $('#fromdate').datepicker('getDate');
var end = $('#todate').datepicker('getDate');
if (start < end) {
var days = (end - start) / 1000 / 60 / 60 / 24;
$('#total_days').val(days);
} else {
alert("cannot select same or previous date!");
$('#fromdate').val("");
$('#total_days').val("");
}
});
Please refer below code. Also please find fiddle link in comment. If input is blank I am adding 5 days by default.
<label class="required">Days</label> <input type="text" id="days"><br/><br/><br/>
<label class="required">from</label>
<input type="text" id="fromDate" class="form-control date-picker from input-append minDate" placeholder="mm/yyyy"><br/><br/><br/>
<label> To </label>
<input type="text" id="toDate" class="form-control date-picker to input-append maxDate" placeholder="mm/yyyy" >
$(function() {
$( ".from" ).datepicker({
onSelect: function( selectedDate ) {
$( ".to" ).datepicker( "option", "minDate", selectedDate );
var toDate = $('.from').datepicker('getDate');
var days = $("#days").val() != "" ? parseInt($("#days").val()) : 5;
toDate.setDate(toDate.getDate() + days );
$('.to').datepicker('setDate', toDate);
}
});
$( ".to" ).datepicker({
onSelect: function( selectedDate ) {
$( ".from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
I Hope this Helps you ..
$(document).ready(function() {
jQuery("#from").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
onClose: function( selectedDate ) {
jQuery( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
jQuery("#to").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
onClose: function( selectedDate ) {
jQuery( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<input type="text" id="from">
<input type="text" id="to">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Try this
$(document).ready(function () {
$('#txtFromDate').datepicker({
format: 'dd/mm/yyyy',
startDate: 'd',
minDate: new Date('today'),
language: locale,
autoclose: true,
todayHighlight: true
});
$('#txtToDate').datepicker({
format: 'dd/mm/yyyy',
startDate: '+2d',/change value for to 5 for 5 days
minDate: '#txtToDate',
viewMode: 'years',
language: locale,
autoclose: true,
});
var val = $("#fromdate").val(); // your input date ID, like we have input: 5
var myDate = new Date($.datepicker.formatDate('yy/mm/dd', new Date($('#fromdate').datepicker('getDate'))));
var d = myDate.getDate()+parseInt(val, 10);
var m = myDate.getMonth()+1;
var y = myDate.getFullYear();
$("#todate").val(new Date(yy+'/'+mm+'/'+dd));
I am fairly new to JavaScript and through few tutorials have been able to put the following code together for the jQuery date picker. However, I need to be able to store disabled dates in a variable which will be the result of a query.
I also need to prevent someone from booking through disabled dates, therefore if 3/3/15 is disabled someone can't select from 2/3/15 to 3/3/15.
Below is the code which I have in my JS file. Any help would be appreciated.
$(document).ready(function() {
var bookedDays = ["2015-2-27","2015-2-28","2010-6-14"];
***Should be results of select from table query.
e.g SELECT fromdate, todate from table where id = $_GET['id']***
$('#request').hide();
$('.days').html('Please select a date range of at least the same day. <br/> <i>Max booking: 2 Months.</i>');
$( "#from" ).datepicker({
defaultDate: new Date(),
changeMonth: true,
numberOfMonths: 1,
minDate: new Date(),
maxDate: "+1M",
beforeShowDay: isAvailable,
onClose: function( selectedDate ) {
var day = $("#from").datepicker('getDate');
day.setDate(day.getDate()+1);
$( "#to" ).datepicker( "option", "minDate", day );
}
});
$( "#to" ).datepicker({
defaultDate: new Date(),
changeMonth: true,
numberOfMonths: 1,
minDate: ("#to"),
maxDate: "+2M",
beforeShowDay: isAvailable,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
function isAvailable(date){
var dateAsString = date.getFullYear().toString() + "-" + (date.getMonth()+1).toString() + "-" + date.getDate();
var result = $.inArray( dateAsString, bookedDays ) ===-1 ? [true] : [false];
return result;
}
$('#to').on('change',function(){
var days = (daydiff(parseDate($('#from').val()), parseDate($('#to').val())));
var cogs = $('#cogsday').html();
cogs = cogs.replace(/\D/g,'');
var x = days;
var y = cogs * x;
$('.days').html('You have chosen to borrow this item for <b>'+ days + '</b> days at a cost of <b>' + y + '</b> cogs.<br/><br/>');
if(days){
$('#request').show();
}
$('#request').click(function() {
var cogs = $('#cogsday').html();
cogs = cogs.replace(/\D/g,'');
var x = days ;
var y = cogs * x;
$('#total').text(y);
$('#nameID').val(y);
$('#days').text(days);
$('#daysID').val(days);
});
})
function parseDate(str) {
var mdy = str.split('/')
return new Date(mdy[2], mdy[0]-1, mdy[1]);
}
function daydiff(first, second) {
return Math.round((second-first)/(1000*60*60*24));
}
});
I am creating one control for date range. which have below requirements.
Form and To should be till yesterday no future dates [able to achive]
Restrict maximum 3 months of different.
$("#from-datepicker").datepicker({
dateFormat: "dd-M-yy",
maxDate: "-1d",
onClose: function (selectedDate) {
console.log(selectedDate);
$("#to-datepicker").datepicker("option", "minDate", selectedDate);
//$("#to-datepicker").datepicker("option", "maxDate", selectedDate);
}
});
$("#to-datepicker").datepicker({
dateFormat: "dd-M-yy",
maxDate: "-1d",
onClose: function (selectedDate) {
$("#from-datepicker").datepicker("option", "maxDate", selectedDate);
}
});
Here is JSfiddle
Here is the result:
$(function() {
$("#from-datepicker").datepicker({
dateFormat: "dd-M-yy",
maxDate: "-1d",
onClose: function (selectedDate) {
// Set 'TO' minDate
$("#to-datepicker").datepicker("option", "minDate", selectedDate);
// Set 'TO' maxDate at 3 months if before yesterday
var dt = new Date($(this).datepicker("getDate"));
dt.setMonth(dt.getMonth() + 3);
if(dt < Date.now()) {
$("#to-datepicker").datepicker("option", "maxDate", dt);
}
}
});
$("#to-datepicker").datepicker({
dateFormat: "dd-M-yy",
maxDate: "-1d",
onClose: function (selectedDate) {
// Set 'FROM' maxDate
$("#from-datepicker").datepicker("option", "maxDate", selectedDate);
// Set 'FROM' minDate at 3 months if before yesterday
var dt = new Date($(this).datepicker("getDate"));
dt.setMonth(dt.getMonth() - 3);
if(dt < Date.now()) {
$("#from-datepicker").datepicker("option", "minDate", dt);
}
}
});
});
Working jsfiddle: http://jsfiddle.net/382z6ev5/
(Sorry, I got a problem with your jsbin)
I am using jquery date picker .I want to set max and minimum value of calendar ? how to set this value
Example minimum value is 1990 and maximum is 2050
$( "#inputBirthDate" ).datepicker({
changeMonth: true,
changeYear: true
});
<input class="span6 date_h nativedatepicker" id="inputBirthDate" type="text" style="pointer-event:none; width:240px;" readonly>
You need to use min-date and max-date option to set the min and max selectable date.
$("#inputBirthDate").datepicker({
changeMonth: true,
changeYear: true,
minDate: new Date(2007, 1 - 1, 1),
maxDate: new Date(2012, 1 - 1, 1),
});
Try this
$("#inputBirthDate" ).datepicker( { minDate: -0, maxDate: new Date(2020, 1,18) });
Min Date
Max Date
Plz read the documentation before going to use it: Link
$(function() {
$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
});
try it..
<script>
$(function(){
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function() {
var date = $(this).datepicker('getDate');
if (date){
date.setDate(date.getDate() + 1);
$( "#to" ).datepicker( "option", "minDate", date );
}
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function() {
var date = $(this).datepicker('getDate');
if (date) {
date.setDate(date.getDate() - 1);
$( "#from" ).datepicker( "option", "maxDate", date );
}
}
});
})
just use minDate / maxDate attribute like this:
$( "#datepicker" ).datepicker({
minDate: 'some value',
maxDate: 'some other value',
});
try :
$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
minDate: new Date(1990-01-01),
maxDate: new Date(2050-01-01),
inline: true
});
this one worked for me, with date format
$( "#from_date" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: 'dd/mm/yy',
onClose: function() {
var date = $(this).datepicker('getDate');
if (date){
date.setDate(date.getDate() + 1);
$( "#to_date" ).datepicker( "option", "minDate", date );
}
}
});
$( "#to_date" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: 'dd/mm/yy',
onClose: function() {
var date = $(this).datepicker('getDate');
if (date) {
date.setDate(date.getDate() - 1);
$( "#from_date" ).datepicker( "option", "maxDate", date );
}
}
});
I am using the jqueryui datepicker (http://jqueryui.com/datepicker/#date-range) to select a range for scheduling an event. I am attempting to maintain the offset between the two dates when the start date is changed. I was able to find a reasonable solution in another post (Add a day with selected date using Jquery datepicker) but I found that when you pick a date that is before the currently selected start date (Example: change the start date from 10/20/2013 to 10/13/2013) it returns the last date that was selected instead of the offset date.
<script>
$(document).ready(function() {
$( "#date_start" ).datepicker({
changeMonth: true,
numberOfMonths: 1,
dateFormat: "yy-mm-dd",
showOn: "both",
buttonImage: "images/smCal.gif",
buttonImageOnly: true,
constrainInput: true,
onSelect: function( selectedDate ) {
var stDate = $( "#curStartDate" ).val().split('-');
var enDate = $( "#date_end" ).val().split('-');
var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
var firstDate = new Date(stDate[0],stDate[1],stDate[2]);
var secondDate = new Date(enDate[0],enDate[1],enDate[2]);
var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)));
if(!isNumber(diffDays)) {
diffDays = 0;
}
var date2 = $('#date_start').datepicker('getDate');
date2.setDate(date2.getDate()+diffDays);
$('#date_end').datepicker('setDate', date2);
$( "#curStartDate" ).val(selectedDate)
$( "#date_end" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#date_end" ).datepicker({
changeMonth: true,
numberOfMonths: 1,
dateFormat: "yy-mm-dd",
showOn: "both",
buttonImage: "images/smCal.gif",
buttonImageOnly: true,
constrainInput: true,
minDate:$( "#date_start" ).val()
});
$( "#curStartDate" ).val($( "#date_start" ).val());
});
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>
I figured out the issue. I had the minDate set for the #date_end value to the current value of the #date_start. So it was auto correcting the date selection to the latest available date that was the last selected date in #date_start. So to fix the issue I simply change the minDate before attempting to change the #date_end.
New Code:
<script>
$(function() {
$( "#date_start" ).datepicker({
changeMonth: true,
numberOfMonths: 1,
dateFormat: "yy-mm-dd",
showOn: "both",
buttonImage: "images/smCal.gif",
buttonImageOnly: true,
constrainInput: true,
onSelect: function( selectedDate ) {
var diffDays = daydiff(parseDate($('#curStartDate').val()), parseDate($('#date_end').val()));
if(!isNumber(diffDays)) diffDays = 0;
var date2 = $('#date_start').datepicker('getDate');
date2.setDate(date2.getDate()+diffDays);
$( "#date_end" ).datepicker( "option", "minDate", selectedDate );
$('#date_end').datepicker('setDate', date2);
$( "#curStartDate" ).val(selectedDate)
}
});
$( "#date_end" ).datepicker({
changeMonth: true,
numberOfMonths: 1,
dateFormat: "yy-mm-dd",
showOn: "both",
buttonImage: "images/smCal.gif",
buttonImageOnly: true,
constrainInput: true,
minDate:$( "#date_start" ).val()
});
$( "#curStartDate" ).val($( "#date_start" ).val());
});
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function parseDate(str) {
var mdy = str.split('-');
return new Date(mdy[0], mdy[1]-1, mdy[2]);
}
function daydiff(first, second) {
return (second-first)/(1000*60*60*24);
}
</script>