I am using JqueryUI datepicker, and I cannot call 'setDate' method on a datepicker if I use a format like this: 'mm yy'.
See my snippet here:
$(function(){
$('#datepicker').datepicker(
{dateFormat: 'mm yy'}
);
$('#datepicker').datepicker('setDate', new Date(2010, 10, 1));
var d = $("#datepicker" ).datepicker('getDate');
alert(d); //this should alert 2010,10,1, but it is not! it alerts the current time instead
});
http://jsfiddle.net/wintlu/DmmQU/
My observation is that:
if I use format including day part, like 'dd mm yy', then i can use setDate, but if I use format without day part, like 'mm yy', then i cannot use setDate.
My question is :
Is this a bug of datepicker?
If so, what is the walk around ?
Thanks in advance
I have a jQuery UI datepicker on my page and I set a defaultDate using the below code - but it keeps picking the month after the month I set! For example the below is showing as 1st December, not November!
var datePickDate = new Date(2011, 11, 01);
$("#datepicker").datepicker({
defaultDate: datePickDate,
onSelect: function(dateText, inst){
$("#datepicker_value").val(dateText);
}
});
Your code is Ok, except the fact that in javascript months are 0-based. So you should put 10 for month if you want November. Check it here
I'm trying to render sliders instead of select components.
Each page has several select components marked with class='jqselect' and all of them will have decreasing year values (some years may be missing).
Eg. a select may have values [2010, 2009, 2006, 2005, 2004].
I have tried binding it both following the examples in the jQuery UI doc (but ignoring the missing years) and using selectToUISlider by filamentgroup (http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support//). None of them work.
Here is what I've done so far:
Binding selects with following slider container divs:
$('#content div.jqslider').slider({
animate: true,
min: $(this).prev().children().last().val(),
max: $(this).prev().children().first().val(),
slide: function(event, ui) {
var select = $(this).prev();
select.val($(this).slider('option', 'value'));
console.log($(this).slider('option', 'value')); //debug
}
});
This renders the slider, but console logs values from 0 to 100 and selects obviously does not change with the event.
Using selectToUISlider:
$('#content select.jqselect').selectToUISlider();
This does not even render the slider, throwing an error 'b is undefined' in jquery-min.js (line 30, v1.4.2). If I pass the identifier of only one of the sliders, it is rendered but very buggy.
Please, I'm stucked in the by two days and any help is much appreciated.
Regards,
Arthur
Thanks for those who have visited.
After 2 days trying I could have it working using selectToUISlider.
Simple stuff, but got me plenty of work and trial/errors.
selects = $('#content select.jqselect');
$.each(selects, function(key, value) {
$('#' + $(selects[key]).attr('id')).selectToUISlider().hide();
});
If anyone know of a better of more optimized way of doing this, please comment, and you will be very welcome.
Regards.
Greeting,
I would like the jqueryui datapicker to use polish localization. Additionally, the dates have to be limited so it should not be possible to choose past dates. I have something like this:
$.datepicker.setDefaults($.datepicker.regional['pl']);
$("#StartDate").datepicker({ minDate: 0, maxDate: '+1Y ' });
$("#StartDate").datepicker('option', $.datepicker.regional['pl']);
Limitation works find, but I cannot achieve polish localization. Please help.
Make sure you included http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepicker-pl.js.
Also you don't need to set the option, setDefaults is enough.
$.datepicker.setDefaults($.datepicker.regional['pl']);
$("#StartDate").datepicker({ minDate: 0, maxDate: '+1Y ' });
How can I change the selected date of jquery Date picker dynamically on the fly?
I have say created a inline date picker.
Then after some time, I want to reflect a different date there without recreating the datepicker from the scratch.
I tried the setDate method, but did not work, and there is not much documentation in the doc.
There is another (extended?) plugin here, but I want to use the plugin which is shipped with jquery.ui.all.js.
What version of jQuery-UI are you using? I've tested the following with 1.6r6, 1.7 and 1.7.1 and it works:
//Set DatePicker to October 3, 2008
$('#dateselector').datepicker("setDate", new Date(2008,9,03) );
Check that the date you are trying to set it to lies within the allowed date range if the minDate or maxDate options are set.
This example shows of how to use default value in the dropdown calendar and value in the text box. It also shows how to set default value to previous date.
selectedDate is another variable that holds current selected date of the calendar control
var date = new Date();
date.setDate(date.getDate() - 1);
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
defaultDate: date,
onSelect: function () {
selectedDate = $.datepicker.formatDate("yy-mm-dd", $(this).datepicker('getDate'));
}
});
$("#datepicker").datepicker("setDate", date);
Noted that for DatePicker by Keith Wood (http://keith-wood.name/datepickRef.html) the following works - note that the setting of the default date is last:
$('#datepicker').datepick({
minDate: 0,
maxDate: '+145D',
multiSelect: 7,
renderer: $.datepick.themeRollerRenderer,
***defaultDate: new Date('1 January 2008')***
});
$('.date-pick').datePicker().val(new Date()).trigger('change')
finally, that what i look for the last few hours! I need initiate changes, not just setup date in text field!
For some reason, in some cases I couldn't make the setDate work.
A workaround I found is to simply update the value attribute of the given input.
Of course the datepicker itself won't be updated but if what you just look for is to display the date, it works fine.
var date = new Date(2008,9,3);
$("#your-input").val(date.getMonth()+"/"+date.getDate()+"/"+date.getFullYear());
// Will display 9/3/2008 in your #your-input input
This is a old thread but I just want to give some information how I have used. If you want to set today date you can simply apply it like below.
$("#datepickerid").datepicker("setDate", "0");
If you want to set some days before/after the current date then use the symbol -/+ symbol of how many days you want like below.
$("#datepickerid").datepicker("setDate", "-7");
$("#datepickerid").datepicker("setDate", "+5");
This works for me:
$("#dateselector").datepicker("option", "defaultDate", new Date(2008,9,3));
please Find below one it helps me a lot to set data function
$('#datepicker').datepicker({dateFormat: 'yy-mm-dd'}).datepicker('setDate', '2010-07-25');
setDate only seems to be an issue with an inline datepicker used in jquery UI, the specific error is InternalError: too much recursion.
In Html you can add your input field with a date picker like this
<input class="form-control date-picker fromDates" id="myDate" type="text">
and then in java script, initialize your datepicker and set your value to the date like this,
$('.fromDates').datepicker({
maxDate: '0',
dateFormat: "dd/mm/yy",
changeYear: true,
changeMonth: true,
yearRange: "-100:+0"
});
var myDateVal = moment('${value}').format('DD/MM/YYYY');
$('#myDate').datepicker().datepicker('setDate', myDateVal );
(In here fromdate attribute shows the previous dates of the current date)
var dt = new Date();
var renewal = moment(dt).add(1,'year').format('YYYY-MM-DD');
// moment().add(number, period)
// moment().subtract(number, period)
// period : year, days, hours, months, week...
I had a lot of trouble with the setDate method as well. seems to only work in v1. What does seem to work however is using the dpSetSelected method:
$("#dateselector").dpSetSelected(new Date(2010, 0, 26).asString());
good luck!
or you can simply have
$('.date-pick').datePicker().val(new Date()).trigger('change')