JQuery UI Datepicker Rangeselect - PullRequest
       9

JQuery UI Datepicker Rangeselect

2 голосов
/ 22 декабря 2010

Из их документации я знаю, что есть возможность использовать одно поле ввода для выбора диапазона.

Как этого достичь? Я пробовал код, предложенный в jQuery UI 1.6 - Библиотека пользовательского интерфейса для jQuery , но, похоже, он не работает. Вот код, который я пытаюсь:

$(function(){     
       //create config object
       var pickerOpts = {
         rangeSelect: true,
         rangeSeparator: " to "
      };     
        //create the date picker
        $("#date").datepicker(pickerOpts); 
      });

Что происходит, так это то, что он просто выбирает ОДНУ дату, не учитывая выбор диапазона, который я ищу.

Ответы [ 8 ]

6 голосов
/ 10 января 2014

Вот идея о том, как ее решить, используя только jquery ui и один DatePicker.

    $("#date").datepicker({
    numberOfMonths: 2,
    onSelect: function( selectedDate ) {
        if(!$(this).data().datepicker.first){
            $(this).data().datepicker.inline = true
            $(this).data().datepicker.first = selectedDate;
        }else{
            if(selectedDate > $(this).data().datepicker.first){
                $(this).val($(this).data().datepicker.first+" - "+selectedDate);
            }else{
                $(this).val(selectedDate+" - "+$(this).data().datepicker.first);
            }
            $(this).data().datepicker.inline = false;
        }
    },
    onClose:function(){
        delete $(this).data().datepicker.first;
        $(this).data().datepicker.inline = false;
    }
})

Вот скрипка: http://jsfiddle.net/Z3FrL/3/

5 голосов
/ 24 июня 2011

Как сказал предыдущий автор, опция rangeSelect была исключена. Тем не менее, виджет календаря, чья опция rangeSelect, полученная из JQuery, по-прежнему доступен здесь:

http://keith -wood.name / datepick.html # диапазон

3 голосов
/ 22 июня 2011

Функция диапазона была удалена в последней версии jQuery!Плагин datepicker подвергается рефакторингу , но, как говорит один из членов команды jQuery, :

Плагин был реорганизован для упрощения.Есть планы по дальнейшему его рефакторингу в будущем.Функциональность диапазона дат запланирована, но как отдельный плагин, который будет использовать плагин Datepicker.

1 голос
/ 02 мая 2013

Вы также можете оформить заказ на http://stephencelis.github.io/timeframe/

1 голос
/ 20 апреля 2013

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

Этого можно добиться с помощью плагина DatePick.js , доступного для , скачать здесь .

Вот кое-что, что должно помочь ...

Источник: Выберите диапазон дат с помощью Datepick.js

[Демо на Jsfiddle] [Демо на сайте Datepick.js]

Html

<h2>Select date range using datepick.js</h2>

<p>
    <span class="demoLabel">Date range:</span>
    <input type="text" id="rangePicker" size="20" />
</p>

<p id="selectedDates">
</p>

Jquery:

$(function(){
    $('#rangePicker').datepick({ 
        rangeSelect: true,
        onClose:function(dates) {        
            setSelectedDateRange(dates);
        }
    });

    function setSelectedDateRange(dates){
        var startDate = "start date = " + dates[0];
        var endDate = "end date = " + dates[1];

        $("#selectedDates").html(startDate + "<br/>" + endDate);
    }
});

Выход:

enter image description here

0 голосов
/ 14 октября 2016

В дополнение к победителю Виктора.Я также добавил некоторый код для выделения выбранных дат и добавил, как небольшую задержку в сокрытии календаря.

    $("#period").datepicker({ 
        minDate: "+2D", 
        maxDate: "+1Y",
        dateFormat : "mm-dd-yy",    
        numberOfMonths: 1,
        showAnim : "fadeIn",
        onSelect: function( selectedDate ) {

            if(!$(this).data().datepicker.first){
                $(this).data().datepicker.inline = true
                $(this).data().datepicker.first = selectedDate;
                $(this).data().datepicker.s_first = selectedDate;
                delete $(this).data().datepicker.s_second;
            }else{
                if(selectedDate > $(this).data().datepicker.first){
                    $(this).data().datepicker.s_second = selectedDate;
                    $(this).data().datepicker.s_first = $(this).data().datepicker.first;
                    $(this).val($(this).data().datepicker.first+" - "+selectedDate);
                }else{
                    $(this).val(selectedDate+" - "+$(this).data().datepicker.first);
                    $(this).data().datepicker.s_second = $(this).data().datepicker.first;
                    $(this).data().datepicker.s_first = selectedDate;
                }
                $(this).data().datepicker.inline = true;

                var $this = $(this);
                setTimeout(function(){
                    $this.datepicker("hide");
                    $this.data().datepicker.inline = false;
                },750)
            }
            $(this).datepicker("show"); // update the dates

        },
        onClose:function(){

            delete $(this).data().datepicker.first;             
            $(this).data().datepicker.inline = false;
            $(this).blur()

        },  beforeShowDay: function (date) {

            var d = date.getTime();
            var d_str = date.toJSON().slice(0,10);

            s1 = $(this).data().datepicker.s_first;
            if (s1){
                var d1 = new Date(new String(s1).replace(new RegExp("-", 'g'), "/"));
                var d1_str = d1.toJSON().slice(0,10);
                var d1 = d1.getTime();
            }

            s2 = $(this).data().datepicker.s_second
            if (s2){
                var d2 = new Date(new String(s2).replace(new RegExp("-", 'g'), "/"));
                var d2_str = d2.toJSON().slice(0,10);
                var d2 = d2.getTime();
            }

            if (d_str == d1_str || d_str == d2_str) {
                return [true, 'ui-state-active', ''];
            }else if (d >  d1 && d < d2) {
                return [true, 'ui-state-highlight', ''];
            } else {
                return [true, ''];
            }
        }
    });
0 голосов
/ 20 декабря 2013

Я также создал хороший плагин jquery.Может использоваться на любом языке сценариев.Он поддерживает от и до даты выбора.Пожалуйста, обратитесь по ссылке ниже.http://webtech -training.blogspot.in / 2010/09 / JQuery-дата-диапазона plugin.html

0 голосов
/ 22 декабря 2010

Это самая близкая вещь, которую я могу найти, но я не посмотрел точные детали реализации.

После того, как вы нажмете поле ввода, выберите «диапазон дат», который является последним вариантом.

http://www.filamentgroup.com/examples/daterangepicker_v2/

...