I have two date pickers. A startdate and an enddate.
The way I have the code set up is that the second datepicker won't be initiated until the first one has been changed. The enddate datepicker is initialized with the current date on startdate. The only problem is that if you change the time on the first datepicker it doesn't refresh the mindate on enddate.
$(function(){
$( "#startdate" ).datepicker({ minDate: currentTime });
//When the startdate changes change the mindate for the enddate picker
$( "#startdate" ).change(function (){
startTime = ($("#startdate").val());
$("#enddate").datepicker({ minDate: startTime });
});
//$( "#enddate" ).datepicker({ minDate: currentTime });
});
You will need to use the option method as described in the documentation (http://jqueryui.com/demos/datepicker/#method-option) to update the minDate option of an already initialized widget:
$( "#startdate, #enddate" ).datepicker({ minDate: currentTime });
$('#startdate').change(function () {
var startTime = ($("#startdate").val());
$("#enddate").datepicker('option', 'minDate', startTime);
});
Notice I put a var statement in-front of the startTime variable so it will be declared in the local scope of the event handler. Also both Datepickers get initialized strait-off and then the #enddate widget gets an updated minDate option each time the #startdate element is changed.
Here is a demo: http://jsfiddle.net/VP25m/
EDIT: Try using the refresh() function on datepicker:
$( "#startdate" ).change(function (){
startTime = ($("#startdate").val());
$("#enddate").datepicker({ minDate: startTime });
$("#enddate").datepicker('refresh');
});
OLD ANSWER BELOW:
You will probably want to set the end date datepicker to a variable so you can destroy and re-initialize it when the start date changes.
$( "#startdate" ).change(function (){
startTime = ($("#startdate").val());
if($("#enddate").datepicker("enabled")) {
endDatePicker.datepicker( "destroy" );
}
var endDatePicker = $("#enddate").datepicker({ minDate: startTime });
});
Use datepicker's onSelect event instead of change event of textbox. In this event you get the selected date as the first argument which you can use to set as minDate of enddate datapicker.
$( "#startdate" ).datepicker({
minDate: currentTime,
onSelect: function(date){
//if the datepicker is not initialized
$("#enddate").datepicker({ minDate: date });
//if the datepicker is already initialized
$("#enddate").datepicker("option", "minDate", date);
}
});
Demo
Reference: http://jqueryui.com/demos/datepicker/#event-onSelect
Related
How can I change the setting of one datepicker inside of other datepicker?
This is what I tried
$('#from_date').datepicker({
autoclose:true,
}).on('changeDate', function() {
$('#to_date').datepicker({
minDate: $('#from_date').val(),
});
});
I also tried this
$('#from_date').datepicker({
autoclose:true,
}).on('changeDate', function() {
$('#to_date').datepicker('option', 'minDate', $('#from_date').val())
});
I want to disable the date before the from_date value if the from_date date is changed.
Thanks for the help
Try setStartDate method
Note: jquery-ui-datepicker and bootstrap-datepicker are different
$('#from_date').datepicker({
autoclose:true,
}).on('changeDate', function(e) {
$('#to_date').datepicker('setStartDate', e.date)
});
You should use the option api.
Use it like this:
example:
$( ".selector" ).datepicker( "option", "disabled", true );
With your code:
$('#to_date').datepicker( "option", "minDate", $('#from_date').val())
I have datepicker codes below to display me calendar, the current date is selected by default, i would like to select the previous date by default instead (the day before today). I have tried but i failed anybody can help me please?
$(function() {
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()
});
I finally resolved my issue this way
$(function() {
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val();
$("#datepicker").click(function() {
date = new Date();
date.setDate(date.getDate()-1);
$( "#datepicker" ).datepicker( "setDate" , date);
});
});
Try this:
$(".datepicker").datepicker("setDate", -1)
More info: http://api.jqueryui.com/datepicker/#method-setDate
I am not able to set the startDate parameter to a datePicker.
I was trying to look for a solution and came up with nothing that works.
What i need is to set default value to the datePicker (1/1/1970) and when I click it I want it to show me the date of today.
This is what I came up with, although it's not working:
$(".from-date").datepicker( "setDate" , "1/1/1970" );
$(".from-date").datepicker("option", { startDate: "1/1/2015" } );
What am I doing wrong?
Use this Demo here
$('.datepicker').datepicker();
$('.datepicker').datepicker('setDate', '1/1/1970');
$('.datepicker').click(function(){
var myDate = new Date() ;
$('.datepicker').datepicker('setDate', myDate);
});
You should set your date first as default date and on textbox selection fire jquery for change default date of datepicker and set today's date as default date
$('.datepicker').datepicker();
$('.datepicker').datepicker('setDate', '1/1/1970');
$('.datepicker').click(function(){
var myDate = new Date() ;
$('.datepicker').datepicker('setDate', myDate);
});
Here Is Fiddle
You can put a minDate in the datePicker that will disable all the dates before this minDate.
Find the Fiddle
$(function() {
var todayDate = new Date();
//$('.datepicker').datepicker();
$( ".datepicker" ).datepicker({
minDate:"01/01/1970"
});
$( ".datepicker" ).datepicker("setDate", todayDate);
});
I am working on my personal work website.
My problem is, in calender "From" date can be picked even before today (not good), moreover if "From" date is selected 5 days from today, in "To" date it still gives me option to select date for before "From" selected date.
while it should only let me select date beyond what I have in "From" date. Moreover can't figure out how to bring hover effect in "end date"(Like even if hover 6th day from now, shouls highlight 5th & sixth day.)
JavaScript:
$(document).ready(function(){
$('#from').datepicker({
numberOfMonths:2
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#to').datepicker({
numberOfMonths:2
});
});
</script>
To adjust the from date and set the minDate try something like the following.
You can find the api documentation here: http://api.jqueryui.com/datepicker
$(document).ready(function(){
$('#from').datepicker({
minDate: 0,
numberOfMonths:2,
onSelect: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$('#to').datepicker({
minDate: 0,
numberOfMonths:2
});
});
According to API DatePicker
you need to set minDate & maxDate on selection.
$(document).ready(function(){
$('#from').datepicker({
numberOfMonths:2,
onSelect: function (date) {
$("#to").datepicker("option", "minDate", date);
}
});
$('#to').datepicker({
numberOfMonths:2,
onSelect: function (date) {
$("#from").datepicker("option", "maxDate", date);
}
});
});
I want to disable all the future dates after today in Jquery Ui Datepicker
Here is the Demo :
Code :
$( "#start_date" ).datepicker(
{
maxDate: '0',
beforeShow : function()
{
jQuery( this ).datepicker('option','maxDate', jQuery('#end_date').val() );
},
altFormat: "dd/mm/yy",
dateFormat: 'dd/mm/yy'
}
);
$( "#end_date" ).datepicker(
{
maxDate: '0',
beforeShow : function()
{
jQuery( this ).datepicker('option','minDate', jQuery('#start_date').val() );
} ,
altFormat: "dd/mm/yy",
dateFormat: 'dd/mm/yy'
}
);
Try this
$(function() {
$( "#datepicker" ).datepicker({ maxDate: new Date() });
});
Or you can achieve this using as below:
$(function() {
$( "#datepicker" ).datepicker({ maxDate: 0 });
});
Reference
DEMO
UPDATED ANSWER
This worked for me endDate: "today"
$('#datepicker').datepicker({
format: "dd/mm/yyyy",
autoclose: true,
orientation: "top",
endDate: "today"
});
SOURCE
In my case, I have given this attribute to the input tag
data-date-start-date="0d"
data-date-end-date="0d"
You can simply do this
$(function() {
$( "#datepicker" ).datepicker({ maxDate: new Date });
});
JSFiddle
FYI: while checking the documentation, found that it also accepts numeric values too.
Number: A number of days from today. For example 2 represents two days
from today and -1 represents yesterday.
so 0 represents today. Therefore you can do this too
$( "#datepicker" ).datepicker({ maxDate: 0 });
Change maxDate to current date
maxDate: new Date()
It will set current date as maximum value.
In case you are appending Dtpicker,use the following code
$('#enddate').appendDtpicker({
"dateOnly": true,
"dateFormat": "YYYY-MM-DD",
"closeOnSelected": true,
maxDate: new Date()
});
//Disable future dates after current date
$("#datepicker").datepicker('setEndDate', new Date());
//Disable past dates after current date
$("#datepicker").datepicker('setEndDate', new Date());
Datepicker does not have a maxDate as an option. I used this endDate option. It worked well.
$('.demo-calendar-default').datepicker({
autoHide: true,
zIndex: 2048,
format: 'dd/mm/yyyy',
endDate: new Date()
});
maxDate: new Date()
its working fine for me disable with current date in date range picker