I am using date range picker from http://tamble.github.io/jquery-ui-daterangepicker/
All I want is a drop down to select Month & Year.
I know there are options available to jQuery UI to render as a drop down instead of text for month and year.
However when I used that it applies only on first Datepicker only. I want drop down on both calender.
Below capture is form my demo on which I am working.
I found reference from here
var $datePicker = $("#TxtStrtDate,#TxtExpDte");
$datePicker.datepicker({
changeMonth: true,
changeYear: true,
inline: true,
altField: "#datep",
}).change(function(e){
setTimeout(function(){
console.log(e, e.currentTarget, $datePicker.find('.ui-datepicker-current-day:visible')[0]);
$datePicker
.find('.ui-datepicker-current-day')
.next('td')
.children('.ui-state-default')
.addClass('ui-state-active');
});
});
Fiddle
I am using jquery date picker with cakephp 2.3. Datepicker popup is OK.
When I want to edit a any record, it does not display date field value in form. I checked many ways and I am sure that it is date picker issue.
Populated source code of date field
<input id="CallDateTo" class="hasDatepicker" type="text" value="2013-04-15" name="data[Call][date_to]">
Here we see that value exist in HTML but it does not display in form.
Any one can help me?
Yes, I found the solution. I have to write as bellow
$( "#CallDateFrom, #CallDateTo" ).datepicker({ dateFormat: "yy-mm-dd"});
Before that I wrote as bellow and caused the problems.
$( "#CallDateFrom, #CallDateTo" ).datepicker({ changeMonth: true, changeYear: true});
$( "#CallDateFrom, #CallDateTo" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
Set the date using correct format
$('#CallDateTo').datepicker({
dateFormat: "yy-mm-dd"
});
Demo: Plunker
The question is the in title. When I am showing the year list in Jquery-UI datepicker, can I control what year the list starts with?
UPDATED CODE
$(".datepicker").datepicker({
changeYear: true,
dateFormat: 'dd-M-yy',
altFormat: 'dd-M-yy',
minDate: '2001-01-01',
duration: ''
});
I need the year list to start with 2001. Is this possible with this control? The code above doesn't achieve this.
You could accomplish it a couple of different ways:
$(".datepicker1").datepicker({ yearRange: "2001:2012", changeYear: true, defaultDate: new Date(2001,0,1)});
$(".datepicker2").datepicker({changeYear: true, defaultDate: new Date(2001,0,1)});
datepicker1 includes a defaultDate but it doesn't have to. If you leave it out, it will default to today's date and the year select will start with the current year.
Note that datepicker2 includes the default year range in the year select box.
yearRange
http://jsfiddle.net/ymvNT/
You can use the defaultDate parameter.
Link.
If you want to set a specific year only, use the minDate and maxDate parameters (ie {minDate: '2010-01-01', maxDate: '2010-12-31'}. It's all in the documentation. Give it a read.
<script>
$('#end_time').ready(function(){
$('#end_time').datepicker({
altFormat: "yy-mm-dd h:i:s",
changeYear: true,
changeMonth: true,
dateFormat: "yy-mm-dd h:i:s",
yearRange: "2011:2020"
});
});
</script>
=> output: 2011-06-30 h:i:s
I want output is: 2011-06-30 15:14:21
Who can help me ?
CMIIW, datepicker is only to pick date. time (hour,minute,second) is not included.
so the formatting for time is not there.
use this one that extend jquery ui datepicker. you can pick up both date and time.
http://trentrichardson.com/examples/timepicker/
a datepicker is for picking a DATE
there is no time component available via datepicker.
if you want to use the current time or any other time, you can write your own functions for parsing the date (without the time, so that datepicker still works) and for appending the time after picking a date
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')