Datepicker from and to minimum one day - javascript

I'm playing around to make a datepicker work for a reservation purpose.
The code below works almost exactly as I want it to.
The problem is: I don't want the "to" datepicker to allow anything below one day into the future.
So for instance if "From" is 25/09/13 I want "To" to be at least 26/09/13.
What do I need to change to make this the way I want it?
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="http://jqueryui.com/datepicker//resources/demos/style.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+0w",
changeMonth: true,
numberOfMonths: 1,
minDate: -0,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate" , selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+0w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", selectedDate );
}
});
});
</script>
<form action="?q=Reservation" method="post">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>


You can do the following:
$("#from").datepicker({
defaultDate: "+0w",
changeMonth: true,
numberOfMonths: 1,
minDate: -0,
onClose: function (selectedDate) {
var date2 = $('#from').datepicker('getDate');
date2.setDate(date2.getDate() + 1);
$("#to").datepicker("option", "minDate", date2);
}
});
So you get the current from date and add one day to it using setDate, then you set the minDate option as you thought.
Demo: http://jsfiddle.net/IrvinDominin/tSrGx/


It looks to me like you are doing it right, just add a day to selectedDate:
var newDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate()+1);
$( "#to" ).datepicker( "option", "minDate" , newDate);


The easiest way to do this would be:
$( ".selector" ).datepicker({ minDate: -1, maxDate: 1 });

Related

Get no of days in selected month in jQuery UI datepicker

I'm using JqueryUI datepicker. I want to calculate no of days on selected month & display in textbox.
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
});
.ui-datepicker-calendar {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
<input name="noofdays" id="noofdays" />

The onChangeMonthYear callback is used when a month or year is changed in the datepicker. For reference
Also, include the Jquery UI after including the Jquery.
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst){
var year = inst.selectedYear, month = inst.selectedMonth+1;
$(this).datepicker('setDate', new Date(year, month, 0));
$("#noofdays").val(new Date(year, month, 0).getDate())
},
onChangeMonthYear:function(year, month, date){
$("#noofdays").val(new Date(year, month,0).getDate());
}
});
.ui-datepicker-calendar {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
<input name="noofdays" id="noofdays" />

How to disable click on month in calendar

As you can see on the image I want to disable click on December 2017 (black box). How can I do this?
My javascript function for the calendar.
$('#datepicker').datepicker({
changeYear: true,
multidate: true,
maxViewMode: 0,
startDate: today,
})

Maybe you could use changeMonth option as following :
$('#datepicker').datepicker({
changeYear: true,
changeMonth: false,
multidate: true,
maxViewMode: 0,
startDate: new Date(),
});
$('#datepicker2').datepicker({
changeYear: true,
changeMonth: true,
multidate: true,
maxViewMode: 0,
startDate: new Date(),
});
input {
width: 25%;
margin: 1%;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<input type="text" id="datepicker" placeholder="You can't change my month !" />
<input type="text" id="datepicker2" placeholder="You can change my month !" />

show datepicker for icon click and fill the text box with selected date

I want to show the datepicker on button click and fill textbox with selected date in jquery
$( function() {
//today=new Date(1000*today);
var dateFormat = "mm/dd/yy",
from = $("#from_filter")
.datepicker({
defaultDate: "+0w",
changeMonth: false,
numberOfMonths: 1
})
.on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
}),
to = $( "#to_filter" ).datepicker({
defaultDate: "+0w",
changeMonth: false,
numberOfMonths: 1
})
.on( "change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});
function getDate( element ) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = NULL;
}
return date;
}
} );
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="col-md-4">
<span>From</span>
<div class="replay-in">
<input type="text" name="" value="" placeholder="04/03/2017" class="form_date" id='from_filter'>
<span class="glyphicon glyphicon-calendar from_icon " style="padding-right: 6px">icon</span>
</div>
</div>
<div class="col-md-4">
<span>To</span>
<div class="replay-in">
<input type="text" name="" value="" placeholder="04/03/2018" class='to_filter' id='to_filter'>
<span class="glyphicon glyphicon-calendar to_icon" style="padding-right: 6px">icon</span>
</div>
</div>
I want to show the datepicker on icon click .Date picker shows only on textbox click

You can .datepicker("show") on icon click as in below code snippet.
Alternative is you can also focus in the textbox using $('#to_filter').focus(); which will open the datepicker
$(function() {
//today=new Date(1000*today);
var dateFormat = "mm/dd/yy",
from = $("#from_filter")
.datepicker({
defaultDate: "+0w",
changeMonth: false,
numberOfMonths: 1
})
.on("change", function() {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#to_filter").datepicker({
defaultDate: "+0w",
changeMonth: false,
numberOfMonths: 1
})
.on("change", function() {
from.datepicker("option", "maxDate", getDate(this));
});
function getDate(element) {
var date;
try {
date = $.datepicker.parseDate(dateFormat, element.value);
} catch (error) {
date = NULL;
}
return date;
}
$('.to_icon').click(function() {
$('#to_filter').datepicker("show");
});
$('.from_icon').click(function() {
$('#from_filter').datepicker("show");
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="col-md-4">
<span>From</span>
<div class="replay-in">
<input type="text" name="" value="" placeholder="04/03/2017" class="form_date" id='from_filter'>
<span class="glyphicon glyphicon-calendar from_icon " style="padding-right: 6px">icon</span>
</div>
</div>
<div class="col-md-4">
<span>To</span>
<div class="replay-in">
<input type="text" name="" value="" placeholder="04/03/2018" class='to_filter' id='to_filter'>
<span class="glyphicon glyphicon-calendar to_icon" style="padding-right: 6px">icon</span>
</div>
</div>

There is a way to do this, first create a button and create an invisible tag. Then click on the button to open the date time picke, like that;
HTML
<button id = "btn1">Click Here</button>
<div id = "divDatePicker"></div>
JS
$("#divDatePicker").hide();
$("#btn1").click(function(){
$("#divDatePicker").toggle();
});
$("#divDatePicker").datepicker({
onSelect: function(value, date) {
//chose date
$("#divDatePicker").hide();
}
});
It's a simple code for you, i guess it's help you.

Here is the working code just paste and run.
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="col-md-4">
<span>From</span>
<div class="replay-in">
<input type="text" name="" value="" placeholder="04/03/2017" class="form_date" id='from_filter'>
<span class="glyphicon glyphicon-calendar from_icon " style="padding-right: 6px">icon</span>
</div>
</div>
<div class="col-md-4">
<span>To</span>
<div class="replay-in">
<input type="text" name="" value="" placeholder="04/03/2018" class='to_filter' id='to_filter'>
<span class="glyphicon glyphicon-calendar to_icon" style="padding-right: 6px">icon</span>
</div>
</div>
<script>
$( function() {
//today=new Date(1000*today);
var dateFormat = "mm/dd/yy",
from = $("#from_filter")
.datepicker({
defaultDate: "+0w",
changeMonth: false,
numberOfMonths: 1
})
.on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
}),
to = $( "#to_filter" ).datepicker({
defaultDate: "+0w",
changeMonth: false,
numberOfMonths: 1
})
.on( "change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});
function getDate( element ) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = NULL;
}
return date;
}
} );
$('.from_icon').click(function(){
$("#from_filter").datepicker("show");
});
$('.to_icon').click(function(){
$("#to_filter").datepicker("show");
});
</script>

Set mindate in bootstrap datepicker

I have 2 date picker on change of 1st date picker i need to set selected date as mindate value of the 2nd date picker . Here is my coe for that
<input type="text" size="30" class="date_picker_from form-control valid" id="start" value="" name="start" aria-invalid="false">
<input type="text" size="30" class="date_picker_to form-control valid" id="end" value="" name="end" aria-invalid="false">
$('.date_picker_from').datepicker({
setDate: new Date(),
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose:true,
startDate: '-0m',
minDate:0,
});
$('.date_picker_to').datepicker({
//setDate: new Date(),
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose:true,
startDate: '+1d',
minDate:0,
});
$("#start").change( function() {
var secondDate = new Date($("#start").datepicker( "getDate" ));
var date2 = new Date(secondDate.getTime());
date2.setDate(date2.getDate() + 1);
$("#end").datepicker("setDate", date2);
$("#end").datepicker("minDate", date2);
$('#end').datepicker( "option", "minDate", date2 );
});
Here is the jsfiddle link

This is only thing you need to do for set mindate.This is the way to set mindate using datepicker.
$("#start").change( function() {
$( ".date_picker_hotel_to" ).datepicker("option", "minDate", $("#start").val());
});

Use the onSelect callback option
$('.date_picker_hotel_from').datepicker({
setDate: new Date(),
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose: true,
startDate: '-0m',
minDate: 0,
onSelect: function(text, dt) {
$('#end').datepicker('option', 'minDate', text);
}
});
$('.date_picker_hotel_to').datepicker({
//setDate: new Date(),
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose: true,
startDate: '+1d',
minDate: 0,
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet" />
<input type="text" size="30" class="date_picker_hotel_from form-control valid" id="start" value="" name="start" aria-invalid="false">
<input type="text" size="30" class="date_picker_hotel_to form-control valid" id="end" value="" name="end" aria-invalid="false">

$(function () {
$("#start").change(() => {
let secondDate = $("#start").datepicker("getDate");
secondDate.setDate(secondDate.getDate() + 1);
$("#end").datepicker("setStartDate", secondDate);
$("#end").datepicker('setDate', fromDate);
});
});

<html>
<input asp-for="StartDate" class="form-control datepicker" type="text" autocomplete="off" />
<input asp-for="EndDate" class="form-control datepicker" asp-format="{0:dd.MM.yyyy}" type="text" autocomplete="off" />
<script>
$('#StartDate').datepicker({
keyboardNavigation: false,
autoclose: true,
changeMonth: true,
changeYear: true,
format: "dd.mm.yyyy",
language: "tr",
startDate: new Date('2021,1,1'),
});
$('#EndDate').datepicker({
keyboardNavigation: false,
autoclose: true,
changeMonth: true,
changeYear: true,
format: "dd.mm.yyyy",
language: "tr",
});
$("#StartDate").on("change", function (e) {
var secondDate = $("#StartDate").datepicker("getDate");
secondDate.setDate(secondDate.getDate() + 1);
$("#EndDate").datepicker("setStartDate", secondDate);
});
</script>
</html>

Check valid datepicker

i have form search
<b><span>#Html.Raw(Generic.ToDate):&nbsp</span></b><span>#Html.DateEmpty("ToDate", (DateTime?)ViewBag.ToDate)</span>
<b><span>#Html.Raw(Generic.FromDate):&nbsp</span></b><span>#Html.DateEmpty("FromDate", (DateTime?)ViewBag.FromDate)</span>
I have code js input datepicker:
$("input[type=date]").each(function () { this.type = "input" }).datepicker();
I want check validate fromdate < todate and date > "30/9/2013". please who can help me.

Read date range
js
$(function () {
$("#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$("#to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function (selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
}
});
});
HTML
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />

Categories