jquery ui datepicker with range selection

Question

I want to use jQuery UI datepicker on my asp.net aspx page. I want to select a range and a OK button on the jQuery UI calendar. I found a link as well where this is done:

jQuery UI Datepicker - Range Selection with Only One Control

But when I use the code on this page and click the textbox, almost 4 calendar's appear horizontally plus styles are messed up. I am not sure which files are required for this page and which ones are extra.

Please suggest how to use jQuery UI datepicker like this.

Answer 1

Starting from the provided link, I build up a jsfiddle with the relevant code. I can't see the issue you are facing.

Code:

$.datepicker._defaults.onAfterUpdate = null;

var datepicker__updateDatepicker = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = function (inst) {
    datepicker__updateDatepicker.call(this, inst);

    var onAfterUpdate = this._get(inst, 'onAfterUpdate');
    if (onAfterUpdate) onAfterUpdate.apply((inst.input ? inst.input[0] : null), [(inst.input ? inst.input.val() : ''), inst]);
}

$(function () {

    var cur = -1,
        prv = -1;
    $('#jrange div')
        .datepicker({
        //numberOfMonths: 3,
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,

        beforeShowDay: function (date) {
            return [true, ((date.getTime() >= Math.min(prv, cur) && date.getTime() <= Math.max(prv, cur)) ? 'date-range-selected' : '')];
        },

        onSelect: function (dateText, inst) {
            var d1, d2;

            prv = cur;
            cur = (new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay)).getTime();
            if (prv == -1 || prv == cur) {
                prv = cur;
                $('#jrange input').val(dateText);
            } else {
                d1 = $.datepicker.formatDate('mm/dd/yy', new Date(Math.min(prv, cur)), {});
                d2 = $.datepicker.formatDate('mm/dd/yy', new Date(Math.max(prv, cur)), {});
                $('#jrange input').val(d1 + ' - ' + d2);
            }
        },

        onChangeMonthYear: function (year, month, inst) {
            //prv = cur = -1;
        },

        onAfterUpdate: function (inst) {
            $('<button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all" data-handler="hide" data-event="click">Done</button>')
                .appendTo($('#jrange div .ui-datepicker-buttonpane'))
                .on('click', function () {
                $('#jrange div').hide();
            });
        }
    })
        .position({
        my: 'left top',
        at: 'left bottom',
        of: $('#jrange input')
    })
        .hide();

    $('#jrange input').on('focus', function (e) {
        var v = this.value,
            d;

        try {
            if (v.indexOf(' - ') > -1) {
                d = v.split(' - ');

                prv = $.datepicker.parseDate('mm/dd/yy', d[0]).getTime();
                cur = $.datepicker.parseDate('mm/dd/yy', d[1]).getTime();

            } else if (v.length > 0) {
                prv = cur = $.datepicker.parseDate('mm/dd/yy', v).getTime();
            }
        } catch (e) {
            cur = prv = -1;
        }

        if (cur > -1) $('#jrange div').datepicker('setDate', new Date(cur));

        $('#jrange div').datepicker('refresh').show();
    });

});

Demo: http://jsfiddle.net/IrvinDominin/LALED/

Answer 2

From: <input type="text" name="date_from" id="date_from" />
To: <input type="text" name="date_to" id="date_to" />

$(function() {
   $("#date_from").datepicker({
       changeMonth: true,
       changeYear: true,
       numberOfMonths: 1,
       showOn: "button",        
       showAnim: "slideDown",
       dateFormat: "yy-mm-dd",
       onClose: function(selectedDate) {
           $("#date_to").datepicker("option", "minDate", selectedDate);
       }
   });
   $("#date_to").datepicker({
       changeMonth: true,
       changeYear: true,
       numberOfMonths: 1,
       showOn: "button",        
       showAnim: "slideDown",
       dateFormat: "yy-mm-dd",
       onClose: function(selectedDate) {
           $("#date_from").datepicker("option", "maxDate", selectedDate);
       }
    });
});

Link demo: http://jsfiddle.net/wimarbueno/fpT6q/1/

Answer 3

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

Try this.