I am trying to get range of dates "from" and "to" to add it to my DB. I use altFormat and altField to capture the date in DB format (yy-mm-dd) while displaying normal date format in the UI using Datepicker jquery UI component.
My question is: How do I use this in the Datepicker UI range. Where can I specify the altField for my from and to datepickers?
http://jqueryui.com/demos/datepicker/#date-range
My Code:
var dates = $( "#hotel_display_checkin_date, #hotel_display_checkout_date" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
altFormat: "yy-mm-dd",
altField: "#hotel_checkin_date",
onSelect: function( selectedDate ) {
var option1 = this.id == "hotel_display_checkin_date" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings ),
options = {option1: date}
dates.not( this ).datepicker( "option", options );
}
});
I tried adding the altField option to options = {option1: date}, but that does not work
To set date range of one month from current date, we will use 'M' option to "+1" for maxDate and for minDate "0" So the current date becomes the value of minDate. See below jQuery code. $(document). ready(function(){ $("#txtDate").
If you like to restrict access of users to select a date within a range then there is minDate and maxDate options are available in jQuery UI. Using this you can set the date range of the Datepicker. After defining these options the other days will be disabled which are not in a defined range.
inside the jQuery script code just paste the code. $( ". selector" ). datepicker({ dateFormat: 'yy-mm-dd' });
By default DatePicker has standard height and width (height: '30px' and width: '143px'). You can change this height and width by using height and width property respectively. $(function () { // creates DatePicker from input $("#datePicker").
Your main problem is that you're trying to use the same altField
for both the check-in and check-out dates:
altField: '#hotel_checkin_date'
If you bind them separately:
var opts = {
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
altFormat: "yy-mm-dd"
onSelect: function(selectedDate) { ... }
};
$('#hotel_display_checkin_date').datepicker(
$.extend({
altField: '#hotel_checkin_date'
}, opts)
);
$('#hotel_display_checkout_date').datepicker(
$.extend({
altField: '#hotel_checkout_date'
}, opts)
);
so that you can specify separate altField
s then things should work better.
Demo: http://jsfiddle.net/ambiguous/bJ8bh/1/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With