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
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
$('#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.)
I have multiple datepickers in one page.
I user class name to set the option for things like appears.
$('.datepickers').datepicker({
dateFormat: "yy-mm-dd",
showButtonPanel: true,
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true,
showWeek: true
});
Then, I want to set onSelect event for two of them.
$('#to').datepicker({
onSelect: function(selectedDate) {
$('#from').datepicker("option", "minDate", selectedDate);
}
});
Similar onSelect event setting for others.
However, this would not work. Any suggestion for how to fix this, besides setting all options individually by id?
did you try the following syntax? You don't want to _init the datepicker widget again. You just want to change an option. This is the way to do that with jquery ui widgets.
$('#to').datepicker('option', 'onSelect', function(selectedDate) {
$('#from').datepicker("option", "minDate", selectedDate);
});
i created a functional demo here to show a possible solution:
click for the jsfiddle
you don't have to create multiple datepicker methods. just use the "onSelect" method to:
test whether the current datepicker has "#to"
if so, use the "dateText" value from this datepicker to intialize the "#from" datepicker
use the current "inst" value to traverse the dom to the "#from" datepicker and set it's value.
these were the key lines:
onSelect: function(dateText, inst) {
if(inst.id === 'to'){
$('.datepickers').filter($('input#from')).datepicker("option", "minDate", dateText);
}
}
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'm using the range date-picker of jQuery UI. When selecting the "from date", I want to open automatically the "to date" date-picker. So, I call the .datepicker("show"). The "to date" picker is showing for a second and immediately fade away. Surprisingly, if I go to another application and then come back and focus on the browser window, the "to date" picker is shown.
I also tried to add the $('#toDate').focus(); but it didn't help.
$( ".fromDatePicker" ).datepicker({
defaultDate: "+1w",
dateFormat: 'dd/mm/yy',
altFormat: 'yymmdd',
altField: "#fromDateFormatted",
numberOfMonths: 2,
showOn: "both",
buttonImage: "images/calender_icon_a1.jpg",
buttonText: "open calendar",
buttonImageOnly: true,
onSelect: function( selectedDate ) {
$('#toDate').datepicker( "option", "minDate", selectedDate );
$('#toDate').datepicker("show");
//$('#toDate').focus(); //commented cause it's not working
}
});
The reason for the flashing appearance is because show would be called before minDate finishes. This would confuse datepicker when triggering beforeShowDay event just before showing the picker.
One somewhat hacky workaround is to delay the call to show the datepicker. For example, something like the following would work:
onSelect: function( selectedDate ) {
$('#toDate').datepicker( "option", "minDate", selectedDate );
setTimeout(function() { $('#toDate').datepicker("show") }, 50);
}
See this in action: http://jsfiddle.net/william/PVuTC/2/.