Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using altFormat and altField in jquery UI datepicker range

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

like image 799
swordfish Avatar asked May 16 '12 04:05

swordfish


People also ask

How do I set a Datepicker range?

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").

What is minDate and maxDate in jQuery Datepicker?

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.

How can change date format in jQuery ui Datepicker?

inside the jQuery script code just paste the code. $( ". selector" ). datepicker({ dateFormat: 'yy-mm-dd' });

How do I change my Datepicker size?

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").


1 Answers

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 altFields then things should work better.

Demo: http://jsfiddle.net/ambiguous/bJ8bh/1/

like image 195
mu is too short Avatar answered Sep 22 '22 15:09

mu is too short