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 );
}
}
});
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 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
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 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>
This question already has answers here:
Jquery datepicker restrict dates in second date field based on selected date in first date field
(3 answers)
Closed 9 years ago.
In the "From" field, the user selects one date and in the "To" field, the date should not be less than "From" field date.
How can I achieve this?
<script type="text/javascript">
$(document).ready(function() {
$('.ui-datepicker-prev ui-corner-all').hide();
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-0:c+10",
dateFormat: "dd - M - yy",
onClose: function(selectedDate) {
$('#datepicker1').datepicker("setDate", selectedDate);
}
});
$('#datepicker').datepicker("setDate", new Date());
$("#datepicker1").datepicker({
changeMonth:false,
yearRange: "-0:+0",
dateFormat: "dd - M - yy"
});
});
</script>
Here is my code (so far) in action: http://jsfiddle.net/Mounika_Garrepalli/8z2UH/
You can compare the dates by passing them to a function
var dt1_temp = date1.split("-");
var ctdt1 = new Date(dt1_temp[2],dt1_temp[1],dt1_temp[0]); // Y/m/d format
var dt2_temp = date2.split("-");
var ctdt2 = new Date(dt2_temp[2],dt2_temp[1],dt2_temp[0]);
Now we can compare the dates
if(ctdt1>ctdt2) {
alert("To date should not be equal or before the from date");
}
Here's the FIDDLE
$(document).ready(function () {
$('.ui-datepicker-prev ui-corner-all').hide();
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-0:c+10",
dateFormat: "dd - M - yy",
onClose: function (selectedDate) {
$('#datepicker1').datepicker("setDate", selectedDate);
}
});
$('#datepicker').datepicker("setDate", new Date());
$("#datepicker1").datepicker({
yearRange: "-0:+0",
dateFormat: "dd - M - yy"
});
$('#datepicker').change(function () {
checkDate($(this), $('#datepicker1'));
});
$('#datepicker1').change(function () {
checkDate($('#datepicker'), $(this));
});
});
function checkDate(date1, date2) {
if (date1.val() > date2.val()) {
alert('Error');
date2.val(date1.val());
}
}
You can use the minDate option:
$("#datepicker1").datepicker({
yearRange: "-0:+0",
//Set the initial minDate
minDate: $("#datepicker").datepicker("getDate"),
dateFormat: "dd - M - yy"
});
And then react:
$("#datepicker").on("change", function() {
$("#datepicker1").datepicker("option", "minDate", $(this).datepicker("getDate"));
});
http://jsfiddle.net/8z2UH/5/
Once try this
$(document).ready(function() {
$('.ui-datepicker-prev ui-corner-all').hide();
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-0:c+10",
dateFormat: "dd - M - yy",
onClose: function(selectedDate) {
$('#datepicker1').datepicker("setDate", selectedDate);
}
});
$('#datepicker').datepicker("setDate", new Date());
$("#datepicker").change(function() {
datepicker1_mindate = $(this).datepicker('getDate');
datepicker1_mindate = new Date(datepicker1_mindate.getTime());
$("#datepicker1").datepicker("option", "minDate", datepicker1_mindate);
});
$("#datepicker1").datepicker({
yearRange: "-0:+0",
dateFormat: "dd - M - yy",
});
});
Try this:
$(document).ready(function() {
$('.ui-datepicker-prev ui-corner-all').hide();
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-0:c+10",
dateFormat: "dd - M - yy",
onSelect: function(selectedDate) {
$("#datepicker1").datepicker("option", "minDate", selectedDate);
$('#datepicker1').datepicker("setDate", selectedDate);
}
});
$('#datepicker').datepicker("setDate", new Date());
$("#datepicker1").datepicker({
yearRange: "-0:+0",
dateFormat: "dd - M - yy"
});
});