Получение значения из JQUERY datepicker - PullRequest
29 голосов
/ 16 ноября 2011

Если я хочу отобразить встроенный указатель даты JQUERY UI, подключив его к DIV, например $("div#someID").datepicker() - как мне получить доступ к выбранной дате?Я предполагаю, что если он не привязан к INPUT, то он не будет отправлен с формой.

Полагаю, в качестве продолжения, если мне нужно привязать его к элементу INPUT, есть ли способ управления позиционированием средства выбора даты относительно элемента INPUT?Если бы я хотел, чтобы указатель даты отображался над или рядом с элементом, а не под ним, как бы я это сделал?

Простите, если этот ответ где-то действительно очевиден.

Ответы [ 7 ]

48 голосов
/ 16 ноября 2011

Если вы хотите получить дату, когда пользователь ее выберет, вы можете сделать это:

$("#datepicker").datepicker({
    onSelect: function() { 
        var dateObject = $(this).datepicker('getDate'); 
    }
});

Я не уверен насчет второй части вашего вопроса. Но пробовали ли вы использовать таблицы стилей и относительное позиционирование?

9 голосов
/ 16 ноября 2011

Вы можете использовать метод getDate:

var d = $('div#someID').datepicker('getDate');

, который даст вам объект Date в d.

Нет никаких вариантов для позиционирования всплывающее окно, но вы можете сделать что-то с помощью CSS или события beforeShow, если это необходимо.

6 голосов
/ 16 ноября 2011
$('div#someID').datepicker({
   onSelect: function(dateText, inst) { alert(dateText); }
});

Вы должны привязать его только к элементу ввода

5 голосов
/ 16 ноября 2011

Вы можете удалить атрибут имени этого ввода, чтобы он не был отправлен.

Чтобы получить доступ к значению этого элемента управления:

$("div#someID").datepicker( "getDate" )

, и вы можете посмотретьв документе в http://jqueryui.com/demos/datepicker/

2 голосов
/ 16 ноября 2011

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

var dt;

if ($("div#someID").is('.hasDatepicker')) {
    dt = $("div#someID").datepicker('getDate');
}
1 голос
/ 13 октября 2016

Если выбранные вами элементы не являются одним, вам нужно использовать этот способ:

$('[type="date"]').datepicker();
$('[type="date"]').change(function() {
    var date = $(this).datepicker("getDate");
    console.log(date);
});
0 голосов
/ 16 февраля 2013

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

$('#datepicker').datepicker({
    beforeShow: function(input, inst)
    {
        inst.dpDiv.css({marginLeft: input.offsetWidth + 'px'});
    }
});
...