jQuery datepicker устанавливает выбранную дату на лету

121

Как я могу динамически изменить выбранную дату средства выбора даты jquery на лету? Я сказал, что создал встроенное средство выбора даты. Затем, через некоторое время, я хочу отразить там другую дату, не воссоздавая указатель даты с нуля.

Я попробовал метод SETDATE, но не работает, и там не так много документации в док .

Там будет другой (расширенный?) Плагин здесь , но я хочу , чтобы использовать плагин , который поставляется с jquery.ui.all.js.

Sabya
источник

Ответы:

187

Какую версию jQuery-UI вы используете? Я тестировал следующее с 1.6r6, 1.7 и 1.7.1, и он работает:

//Set DatePicker to October 3, 2008
$('#dateselector').datepicker("setDate", new Date(2008,9,03) );
Бен Келер
источник
16
используйте defaultDate вместо setDate, если setDate не работает.
bingjie2680
8
но для меня это не сработало. дата была изменена. но выбранная дата не отображается в календаре. он показывает мне только сегодня выделенный.
Prageeth godage
28

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

cfwall
источник
10

В этом примере показано, как использовать значение по умолчанию в раскрывающемся календаре и значение в текстовом поле. Он также показывает, как установить значение по умолчанию на предыдущую дату.

selectedDate - еще одна переменная, которая содержит текущую выбранную дату календаря.

    var date = new Date();
    date.setDate(date.getDate() - 1);

    $("#datepicker").datepicker({
        dateFormat: "yy-mm-dd",
        defaultDate: date,
        onSelect: function () {
            selectedDate = $.datepicker.formatDate("yy-mm-dd", $(this).datepicker('getDate'));
        }
    });

    $("#datepicker").datepicker("setDate", date);
Влад Безден
источник
8

Отметил, что для DatePicker Кейт Вуд ( http://keith-wood.name/datepickRef.html ) работает следующее - обратите внимание, что установка даты по умолчанию является последней:

    $('#datepicker').datepick({
        minDate: 0,
        maxDate: '+145D',
        multiSelect: 7,
        renderer: $.datepick.themeRollerRenderer,
        ***defaultDate: new Date('1 January 2008')***
    });
Майкл
источник
7

По какой-то причине в некоторых случаях я не мог заставить setDate работать.

Обходной путь, который я нашел, - просто обновить атрибут value данного ввода. Конечно, само средство выбора даты не будет обновляться, но если вы просто ищете отображение даты, он работает нормально.

var date = new Date(2008,9,3);
$("#your-input").val(date.getMonth()+"/"+date.getDate()+"/"+date.getFullYear());
// Will display 9/3/2008 in your #your-input input
Гийом Фландр
источник
6
Есть отключение на один месяц, так что вам нужно (date.getMonth () + 1)
Адам
1
setDate не работает, если задано в начальных параметрах, потом я связал его с .datepicker ('setDate', ...)
martinedwards
4
$('.date-pick').datePicker().val(new Date()).trigger('change')

наконец то, что я ищу последние несколько часов! Мне нужно инициировать изменения, а не просто установить дату в текстовом поле!

Алексей Семенюк
источник
2
Он должен быть .datepicker()не.datePicker()
Арслан Табассум
3

Это старый поток, но я просто хочу дать некоторую информацию о том, как я его использовал. Если вы хотите установить сегодняшнюю дату, вы можете просто применить ее, как показано ниже.

 $("#datepickerid").datepicker("setDate", "0");

Если вы хотите установить несколько дней до / после текущей даты, используйте символ -/+символа, сколько дней вы хотите, как показано ниже.

 $("#datepickerid").datepicker("setDate", "-7");
 $("#datepickerid").datepicker("setDate", "+5");
Суреш Поннукалай
источник
2

setDate кажется проблемой только со встроенным datepicker, используемым в пользовательском интерфейсе jquery, конкретная ошибка - InternalError: слишком много рекурсии.

Аллен
источник
2

Это работает для меня:

$("#dateselector").datepicker("option", "defaultDate", new Date(2008,9,3));
Гьермунд Даль
источник
2

В Html вы можете добавить поле ввода с помощью такого средства выбора даты

<input class="form-control date-picker fromDates" id="myDate" type="text">

а затем в java-скрипте инициализируйте свой datepicker и установите для своего значения дату, подобную этой,

$('.fromDates').datepicker({
                maxDate: '0',
                dateFormat: "dd/mm/yy",
                changeYear: true,
                changeMonth: true,
                yearRange: "-100:+0"
            });

var myDateVal = moment('${value}').format('DD/MM/YYYY');
$('#myDate').datepicker().datepicker('setDate', myDateVal );

(Здесь атрибут fromdate показывает предыдущие даты текущей даты)

chamzz.dot
источник
0
var dt = new Date();
var renewal = moment(dt).add(1,'year').format('YYYY-MM-DD');
// moment().add(number, period)
// moment().subtract(number, period)
// period : year, days, hours, months, week...
study4u
источник
Ответы только на код не приветствуются в Stack Overflow, потому что они не объясняют, как это решает проблему. Отредактируйте свой ответ, чтобы объяснить, что делает код и как он отвечает на вопрос, чтобы он был полезен и другим пользователям, а также OP.
FluffyKitten
-1

У меня тоже было много проблем с методом setDate. похоже, работает только в v1. Однако, похоже, что работает метод dpSetSelected:

    $("#dateselector").dpSetSelected(new Date(2010, 0, 26).asString());

удачи!

Tijs
источник
-1

или вы можете просто иметь

$('.date-pick').datePicker().val(new Date()).trigger('change')
Gayan
источник
1
Она должна быть .datepicker()не .datePicker().
Флорин Фрэтикэ