Как получить значение Datepicker для CSS MetroUI с помощью javascript

Question

Я хотел бы видеть дату, выбранную с помощью датпикера Metro UI CSS, используя javascript. В конечном итоге эти данные будут использоваться для создания объекта JSON, который будет отправлен в запросе AJAX. Пока что, я был бы счастлив просто увидеть это в предупреждающем сообщении браузера.

Вот элемент управления datepicker: http://metroui.org.ua/datepicker.html Обратите внимание, что второй datepicker имеет значение по умолчанию.

Как я могу использовать консоль браузера, чтобы получить это значение по умолчанию в предупреждающее сообщение? Конечно, мне не хватает чего-то очевидного, но мне не повезло с такими делами, как проверка «val()» входного элемента и т. Д.

Answer 1

Я только что нашел небольшое обходное решение (быстрое и грязное): дайте уникальный идентификатор <input type="text"... в <div class="input-control text"..., а затем пусть JQuery сделает волшебство! Вот код:

<div id="dpContainer" class="input-control text"> 
    <input id="inputToRead" type="text"> 
    <button class="btn-date"></button> 
</div> 

<script> 
    function getDPValue(){ 
     var selectedDate = $('#inputToRead').val(); 
     return selectedDate; 
    } 
</script> 

Я знаю, что это немного грязный, вероятно, вы можете получить некоторые полезные подсказки от http://metroui.org.ua/calendar.html функций.

более быстрый и более загрязнен:

<script> 
    function getDPValue(){ 
    return $('#dpContainer').children('input[type=text]').val(); 
    } 
</script> 

НТН, Стефано.

Answer 2

datepicker имеет calendar контроль внутри него. Вы можете получить выбранную дату календаря управление работает .calendar ('getDate'). Затем разрешите JQuery выполнять свою работу и достичь календаря контроль внутри datepicker.

<div id="myDate" class="input-control text" data-role="datepicker" data-preset="2016-01-01"> 
    <input type="text"> 
    <button class="button"><span class="mif-calendar"></span></button> 
</div> 

<script> 
    function getMyDate(){ 
     return $('#myDate .calendar').calendar('getDate'); 
    } 
</script> 

<button class="button" onclick="alert(getMyDate())">Show My Date</button>