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(
......
);
Related
When I make my datepicker readonly I see that the user cannot type anything into the text box. However, they can still change the value using the calendar Icon. How can I hide the calendar icon so that users cannot change the date value?
I do not want to disable the datepicker since I need the value posted to the server upon form submit.
$(function () {
$(".datepicker").datepicker({
showOn: "button",
buttonImage: "../calendar/images/calendar.gif",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
onClose: function () {
$(this).focus();
}
});
});
There is no such a way to do the stuff but you can go through the following aspects:
You can set the range allowed to some invalid range so the user can't select any date:
$(".datepicker").datepicker({
minDate: -1, // Add this one further
maxDate: -2, // Add this one further
showOn: "button",
buttonImage: "../calendar/images/calendar.gif",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
onClose: function () {
$(this).focus();
}
}).attr('readonly', 'readonly');
JS Fiddle
Just destroy the datepicker when you change the input to readonly:
$(".datepicker").datepicker("destroy").prop("readonly", true);
Demo #1
Alternately, you can hide the image trigger:
$(".datepicker").prop("readonly", true).next("img").hide();
Demo #2
For button trigger you can simply disable it:
$(".datepicker").prop("readonly", true).next("button").prop("disabled", true);
Demo #3
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"
});
I have these following lines of code:
jQuery
$(".datepicker").datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
dateFormat: "MM d, yy",
changeMonth: true,
changeYear: true
});
Javascript
var element1 = document.createElement("input");
element1.type = "text";
element1.setAttribute("class", "datepicker");
Suppose to be the element I created in javascript must be a datepicker, so I set its class to "datepicker" which was defined in the jQuery code. But this thing doesn't work.
Any possible solutions? Setting classes which are defined in css works for me, but this.
What you're doing should work perfectly fine as long as the jQuery code runs after your element has been created and appended to the DOM.
$(document).append($('<input/>', {
'class': 'datepicker',
type: 'text'
})).on('click', function() {
$(this).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
dateFormat: "MM d, yy",
changeMonth: true,
changeYear: true
});
})
Why not use jQuery for this?
$('input').addClass('datepicker');
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('');
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>