$('#altdate').datetimepicker({
timeFormat: 'hh:mm:ss',
dateFormat: 'yy-mm-dd',
altField: "#Event_datetime",
altFormat: "yy-mm-dd",
altTimeFormat: 'hh:mm:ss',
altFieldTimeOnly: false,
onClose: function( selectedDate ) {
//alert(selectedDate);
$( "#altenddate" ).datetimepicker( "option", "minDate", selectedDate );
if (selectedDate < ($.datepicker.formatDate('yy-mm-dd', new Date())) ) {
start_in_past = true;
}
}
});
$('#altenddate').datetimepicker({
timeFormat: 'hh:mm:ss',
dateFormat: 'yy-mm-dd',
altField: "#Event_enddatetime",
altFormat: "yy-mm-dd",
altTimeFormat: 'hh:mm:ss',
altFieldTimeOnly: false,
onClose: function( selectedDate ) {
//alert(selectedDate);
$( "#altdate" ).datetimepicker( "option", "maxDate", selectedDate );
}
});
The #Event_datetime field correctly gets filled with the value "2012-12-23 13:00:00" when I leave the datetimepicker field; however, when I close the enddate one, the line
$( "#altdate" ).datetimepicker( "option", "maxDate", selectedDate );
only sets "2012-12-23" on the field! using "maxDateTime" as option also does not work, getting maxDateTime.getFullYear is not a function.
How to set the maxDate(Time) with the full string as requested by the client:
yy-mm-dd hh:mm:ss
So the problem really is that setting the "maxDate" option, the actual hidden field #Event_datetime gets reset to without time - no idea why.
So I solved it by saving temporarily the #Event_datetime variable before calling to set maxDate and resetting it again...
var current = $('#Event_datetime').val();
$( "#altdate" ).datetimepicker( "option", "maxDate", selectedDate );
$('#Event_datetime').val(current);
I had the same problem as you, only without using an alt field. Your solution worked for me as well, though I had to code it slightly differently.
var current = $("#startDate").datetimepicker("getDate");
$("#startDate").datetimepicker( "option", "maxDate", selectedDate );
$("#startDate").datetimepicker( "setDate", current);
(I realize I could have posted this as a comment, but I needed to format the code sample.)
Related
I'm trying to set up a calendar with a specific marked day (fix day). For example 30-04-2015 in the calendar where will not possible select another month or day, only show that specify day.
Similar to the image:
http://i.stack.imgur.com/ILFbJ.png
I'm using jQueryIU to do it but I can not get it.
Here it's my code:
http://jsfiddle.net/andresgl/mr7aokod/3/
HTML
jQuery
(function($) {
$(document).ready(function(){
$( "#datepicker" ).datepicker(
{
beforeShowDay: $.datepicker.noWeekends,
hideIfNoPrevNext: false,
maxDate: "+1m",
minDate: "+1m",
}
);
});
})(jQuery);
(function($) {
$(document).ready(function(){
$( "#datepicker" ).datepicker( "setDate", "04/30/2014" );
});
})(jQuery);
The problem is if I not declare this parameters:
{
beforeShowDay: $.datepicker.noWeekends,
hideIfNoPrevNext: false,
maxDate: "+1m",
minDate: "+1m",
}
The setDate works, but the parameters doesn't work and If I declare the parameters, the setDate doesn't work.
$( "#datepicker" ).datepicker( "setDate", "04/30/2014" );
Can someone tell me what i'm doing wrong or where is the mistake and how can I fix it, please?
BTW: I was following the datepicker documentation: api.jqueryui.com/datepicker/#method-setDate
Thank you!
Not sure if this will suit your needs but you and can set min and max as dates as well. Something like:
$(function() {
$(document).ready(function(){
$( "#datepicker" ).datepicker(
{
beforeShowDay: $.datepicker.noWeekends,
defaultDate: new Date(2015, 04, 04),
maxDate: new Date(2015, 04, 04),
minDate: new Date(2015, 04, 04),
hideIfNoPrevNext: false
}
);
});
});
UPDATED Fiddle
Alternatively, you need to set the date before you limit the range:
$( "#datepicker" ).datepicker( "setDate", "04/05/2015" ).datepicker(
{
beforeShowDay: $.datepicker.noWeekends,
/*defaultDate: new Date(2015, 04, 04),*/
maxDate: new Date(2015, 05, 04),
minDate: new Date(2015, 05, 04),
hideIfNoPrevNext: false
}
);
UPDATED Fiddle 2
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 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 );
}
});
I have 2 input boxes; one for the start date and the other for the end date. What I need is that when user selects the first date, the second date should automatically switch to the month of the first date. I am using the following script; and whenever I choose a date from the past, the second box pops up with today's date.
Any ideas?
Thanks
$(function() {
var dates = $( "#from, #to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
onSelect: function( selectedDate ) {
var option = this.id == "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 );
}
});
});
One way of solving the problem might be to change the second value together with the first value whenever the first value is changed by user. This can be accomplished by adding few lines at the end of onSelect function.
if ( this.id == "from" ) {
dates.not( this ).datepicker( "setDate", date );
}
Working example http://jsfiddle.net/5gbpA/
I think I'm missing something pretty straight forward here..
How do you set the default date on the jqueryui to tomorrow ?
Initialize a datepicker with the defaultDate option specified.
$( ".selector" ).datepicker({ defaultDate: +1 });
Get or set the defaultDate option, after init.
//getter
var defaultDate = $( ".selector" ).datepicker( "option", "defaultDate" );
//setter
$( ".selector" ).datepicker( "option", "defaultDate", +1 );
see: http://jqueryui.com/demos/datepicker/#option-defaultDate
Or if your don't want back dates then you can use as this while initialzing the datepicker
minDate: +1