JQuery UI DatePicker с выбором диапазона

Question

JQuery UI DatePicker с выбором диапазона

0

Я хочу использовать jQuery UI datepicker на моей странице aspx asp.net. Я хочу выбрать диапазон и кнопку ОК в календаре пользовательского интерфейса jQuery. Я нашел ссылку, где это делается:

jQuery UI Datepicker - выбор диапазона с использованием только одного элемента управления

Но когда я использую код на этой странице и нажимаю на текстовое поле, почти 4 календаря отображаются горизонтально, а стили испорчены. Я не уверен, какие файлы необходимы для этой страницы, а какие - дополнительные.

Пожалуйста, предложите, как использовать jQuery UI datepicker, как это.

DotnetSparrow 07 янв. 2014, в 13:46

Источник

0

Можете ли вы предоставить свой код или демо-версию на jsfiddle?
Irvin Dominin 07 янв. 2014, в 12:09
0

Я создаю jsfiddle впервые, не знаю, как загрузить файлы relted файлов. Пожалуйста, проверьте это jsfiddle.net/gVt3K
DotnetSparrow 07 янв. 2014, в 12:16

Теги:

javascript

jquery

asp.net

datepicker

jquery-ui

3 ответа

0

From: <input type="text" name="date_from" id="date_from"/>
Кому: <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);
       }
    });
});

Демо-ссылка: http://jsfiddle.net/wimarbueno/fpT6q/1/

wimarbueno 25 апр. 2014, в 13:30

-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>

Попробуй это.

Dipak 07 янв. 2014, в 09:24

0

это разрешит выбор диапазона как ссылка, которую я отправил?
DotnetSparrow 07 янв. 2014, в 12:12
0

Да, просто скопируйте его и попробуйте в простом файле date.html, он будет работать. для диапазона дат.
Dipak 07 янв. 2014, в 12:20

Ещё вопросы

Можете ли вы предоставить свой код или демо-версию на jsfiddle?
Я создаю jsfiddle впервые, не знаю, как загрузить файлы relted файлов. Пожалуйста, проверьте это jsfiddle.net/gVt3K
это разрешит выбор диапазона как ссылка, которую я отправил?
Да, просто скопируйте его и попробуйте в простом файле date.html, он будет работать. для диапазона дат.

Irvin Dominin · Accepted Answer · 2014-01-07T10-50-00.000Z

Начиная с предоставленной ссылки, я создаю jsfiddle с соответствующим кодом. Я не вижу проблемы, с которой вы столкнулись.

Код:

$.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();
    });

});

Демо: http://jsfiddle.net/IrvinDominin/LALED/