Установите значения ввода по умолчанию для входных данных выбора диапазонов jquery ui, чтобы они были конкретными датами - PullRequest
Новая
       6

Установите значения ввода по умолчанию для входных данных выбора диапазонов jquery ui, чтобы они были конкретными датами

0 голосов
/ 11 сентября 2011

Я использую jquery ui daterange datepicker http://jqueryui.com/demos/datepicker/#date-range мой код ниже, это в значительной степени инициализация по умолчанию. Я бы хотел, чтобы значением поля ввода «to» была сегодняшняя дата, а значением поля ввода from - 30 дней назад. Я не нашел в любом случае, чтобы установить эти входные значения динамически, любая помощь приветствуется

Спасибо 

<div id="date-wrapper">
<script>
$(function() {
    var dates = $( "#from, #to" ).datepicker({
        defaultDate: "+1w",
        dateFormat: "M d, yy",
        changeMonth: true,
        numberOfMonths: 1,
        onSelect: function( selectedDate ) {
            var option = this.id == "from" ? "minDate" : "maxDate",
                instance = $( this ).data( "datepicker" ),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings );
            dates.not( this ).datepicker( "option", option, date );
        }
    });
});
</script>
<label for="from"></label>
<input type="text" id="from" name="from"/><span style="font-weight:bold;font-size:15px;">-</span>
<label for="to"></label>
<input type="text" id="to" name="to"/>
</div>
</div>

Ответы [ 2 ]

2 голосов
/ 11 сентября 2011

Вам нужно будет инициировать два поля отдельно.Вы можете сохранить настройки в объекте для повторного использования.

JavaScript будет выглядеть примерно так: 

var settings = {
    dateFormat: "M d, yy",
    changeMonth: true,
    numberOfMonths: 1,
    onSelect: function(selectedDate) {
        var option = this.id == "from" ? "minDate" : "maxDate",
            instance = $(this).data("datepicker"),
            date = $.datepicker.parseDate(
            instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
        $("#from, #to").not(this).datepicker("option", option, date);
    }
};
$("#to").datepicker(settings);
$("#from").datepicker($.extend({}, settings, { defaultDate: '-30d'}));

См. Это в действии: http://jsfiddle.net/william/xtATL/.

Редактировать :

Вы можете использовать функцию полезности $.datepicker.formatDate(format, date, settings) для форматирования даты, отображаемой во входных данных: 

$("#to").val(function() {
    return $.datepicker.formatDate('M d, yy', new Date(), settings);
});
$("#from").val(function() {
    var thirtyDaysAgo = new Date().getTime() - 30 * (1000*60*60*24);
    return $.datepicker.formatDate('M d, yy', new Date(thirtyDaysAgo), settings);
});

См. Обновленный пример: http://jsfiddle.net/william/xtATL/4/.

0 голосов
/ 11 сентября 2011

Либо установите дату во вводе (используя правильный формат даты) до инициализации средства выбора даты, либо используйте метод setDate, если средство выбора даты после инициализации.Например,

var d = new Date ();jQuery ("# ​​to) .datepicker (" setDate ", d);

...