Initialize JQuery Datepicker with a blank value - javascript

This code still sets the field to today's date
<script type="text/javascript">
$(document).ready(function () {
$('.date').datepicker({ dateFormat: "mm/dd/yy", changeMonth: true,
changeYear: true, yearRange: '1900:2020', defaultDate: ''
});
});
</script>
How do I universally configure the field to start as blank?

If the field is showing today's date it's because of how the input field is populated. The datepicker will start with whatever value the html element has, regardless of what that is:
Demo
If you cannot control the value of the input field through changing markup, but still needs the input field to be reset, you'll have to do this manually:
$(document).ready(function () {
$('.date').datepicker({ dateFormat: "mm/dd/yy", changeMonth: true,
changeYear: true, yearRange: '1900:2020'
}).val('');
});

$("#start-date-filter").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yyyy-mm-dd',
yearRange: '-2:+4'
}).val('');

Related

jquery-ui-datepicker update only first input

I'm trying to create 1 or 2 or more datepicker.
I've created a jquery code to do that but when the script is executed, both input elements open a datepicker, but only the first one is updated.
When I click on the second datepicker, the first input is edited.
Any help?
that is the jquery code:
$(".datepicker" ).each(function (){
var max = "+0";
if(typeof($(this).data('limit')) != 'undefined'){
max = $(this).data('limit');
}
$(this).datepicker({
yearRange: '-100:'+max,
dateFormat: "dd-mm-yy",
maxDate: max,
showButtonPanel: true,
changeMonth: true,
changeYear: true,
});
});
thank you!
See if this will work.
$(".datepicker" ).datepicker({
yearRange: '-100:'+max,
dateFormat: "dd-mm-yy",
maxDate: function(){
// do some logic here and return max
var max = "+0";
if(typeof($(this).data('limit')) != 'undefined'){
max = $(this).data('limit');
}
return max;
},
showButtonPanel: true,
changeMonth: true,
changeYear: true,
});

how to set year in dropdown of jquery ui calender?

I have to show a datepicker for date of birth, since the year range will be about 80 years I am using the following code.
$('#<%=txtdob.ClientID%>').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
yearRange: 'c-100:c-20'
});
it is working but whenever we change the year range it goes back 100 years!. I think I am missing something . Fiddler code is-->
http://jsfiddle.net/MCheP/
Please help..
Edit: when textbox is clicked calender show up. but when I change year from 1914 to say 1920 it shows 1820 instead of 1920.
Try following for yearRange:
yearRange: "-80:+0",
DEMO
Why is there a c in there ?
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
yearRange: '-100:-20',
defaultDate: '-100y'
});
FIDDLE
the leading c sets the range relative to the selected date, so when you select a date, it sets the range back another 100 years from that date. To keep the range static you remove the c
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
yearRange: '-100:-20',
defaultDate: '-100y'
});
Demo
http://jsfiddle.net/MCheP/6/
please see the documentation
http://api.jqueryui.com/datepicker/#option-yearRange
the actual syntax/example is
$( ".selector" ).datepicker({ yearRange: "2002:2012" });
You can also use it like this also
yearRange: "-100:-20"
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
minDate: "-100Y",
maxDate: "-20Y"
});

Set jQuery datepicker minDate depending on input

I'm trying to make a jQuery datepicker set minDate depending on the value of a radio button.
When I try to write a function returning a string, my JavaScript keeps crashing. Any ideas on why this is not working?
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-35:+0",
dateFormat: "yy-mm-dd",
minDate: function() {
var str = "-35Y";
if($("#inputfield").val() == "value") {
str = "-33Y";
}
return str;
}
});
jsFiddle
This works fine.... you need to make sure that you have inputfield with a value
<input type='text' id='datepicker'></div>
<input type='text' value='value' id='inputfield'>
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-35:+0",
dateFormat: "yy-mm-dd",
minDate:mdate()
});
function mdate(){
var str = "-35Y";
if($("#inputfield").val() == "value"){
str = "-33Y";
}
return str;
}
Edit:*
$('#inputfield').on('change',function(){
$('#datepicker').datepicker('option', 'minDate', mdate());
});
The option minDate expects a value, not a function. A datepicker will not automagically update the value of minDate whenever the selection of your radio button changes.
If you want the datepicker's minimum date to change whenever the radio button selection changes, then you must explicitly program this. Something along the following lines:
$('[name=myradiogroup]').change(function () {
var newMininumDate = /*insert logic here*/;
$('#datepicker').datepicker('option', 'minDate', newMininumDate);
});
See http://api.jqueryui.com/datepicker/#method-option
This works for me:
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-35:+0",
dateFormat: "yy-mm-dd",
minDate: $("#inputfield").val()
});

jQuery datepicker: preselect month of second datepicker

I have two datepickers: arrival and departure. Now if one selects the 26th April in arrival, the departure datepicker should be preselected to the April (currently it would be March). So how could I implement this?
I tried the following:
$( "#arrival" ).datepicker({
buttonImage: 'fileadmin/templates/images/calendar.png',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
showOn: 'both',
buttonText: 'arrival',
onSelect: function(){
var arrivalDate = $(this).datepicker('getDate').getDate();
var arrivalMonth = $(this).datepicker('getDate').getMonth();
var arrivalYear = $(this).datepicker('getDate').getFullYear();
$('#departure').datepicker({ defaultDate: new Date(arrivalYear,arrivalMonth,01) });
}
});
$( "#departure" ).datepicker({
buttonImage: 'fileadmin/templates/images/calendar.png',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
showOn: 'both',
buttonText: 'departure'
});
setDate would fill out the text input field which is not desired. Is this possible?
Problem
Currently in your onSelect callback you're attempting to reinitialize the departure element in order to change its defaultDate option:
$('#departure').datepicker({ defaultDate: new Date(arrivalYear,arrivalMonth,01) });
However, after initialization, the datePicker options should be set in this form, without re-initializing the element:
datePicker('option','some-option','some-option-value').
Solution
Use the correct form to set the defaultDate option of the depature element.
For example:
...
var departure_date = new Date(arrivalYear,arrivalMonth,01);
$('#departure').datepicker('option','defaultDate', departure_date);
...
See jsFiddle demo
first caluculate the value then set like this
$( "#departure" ).val($("#arrival").val())datepicker(
......
);

jQuery UI DatePicker displaying wrong date

I've got a jquery UI DatePicker with the following parameters:
changeMonth: true,
changeYear: true,
yearRange: "-16:-1",
dateFormat: 'dd-mm-yy'
It correctly displays only years 1996 till 2011. However, when I select a date for the first time, it's strangely displayed as 08-03-2012. 2012 is not even an option for selection in the datepicker, but this is the date which is then produced in my text box.
If I then select a date once again, it's correctly displayed - this only occurs for the first time.
Any ideas?
You can set a default date in your range like this:
<script type="text/javascript">
$(function() {
$("#birthdate" ).datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-16:-1",
dateFormat: 'dd-mm-yy',
defaultDate: '01-01-1996'
});
});
</script>
Here is another way to set the default date with the first year of the range.
<script type="text/javascript">
var default_date = new Date(); //Create a new date object
default_date.setYear(date.getYear() - 16); //Substract the current year with the first year of the range
$(function() {
$("#birthdate" ).datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-16:-1",
dateFormat: 'dd-mm-yy',
defaultDate: default_date
});
});
</script>

Categories

Resources