Как я могу получить обе даты из средства выбора диапазона дат?

У меня есть html-страница, которая использует простой ввод DateRange из: BeatPicker/demos. Я могу получить StartDate из ввода, но я не могу получить EndDate. Обе даты вводятся с помощью одного элемента ввода.

<input type="text" id="demo" data-beatpicker="true" data-beatpicker-position="['*','*']" data-beatpicker-range="true"/>

<button onclick="myFunction()">Click me</button>

<script>
function myFunction() {
alert(demo.value);  // gives Start Date
alert(demo.startDate);  // gives Start Date

// below show undefined
//var x = myDatePicker.getSelectedEndDate;
//var x = document.getElementById("demo").getSelectedEndDate.value];
//alert(x);
}
</script>

Документация по BeatPicker


javascript jquery date-range daterangepicker
person user1892770    schedule 10.05.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Если вы не выбрали дату, то ваша функция не будет работать должным образом.

Я бы использовал событие select средства выбора даты, чтобы фактически получить значения.

Согласно документации BeatPicker, методы получения даты начала и окончания — getSelectedStartDate и getSelectedEndDate. Поскольку вы использовали декларативный синтаксис, вы также можете указать для средства выбора даты id через data-beatpicker-id="myPicker". Если вы это сделаете, вы можете ссылаться на средство выбора даты через этот идентификатор.

Обновите объявление элемента:

<input data-beatpicker-id="myPicker" type="text" id="demo" data-beatpicker="true" data-beatpicker-position="['*','*']" data-beatpicker-range="true" />

Попробуйте изменить свою функцию, чтобы использовать эти методы:

function myFunction(){
  var startDt = myPicker.getSelectedStartDate();
  var endDt = myPicker.getSelectedEndDate();

  console.log(startDt, endDt);
}

В нижней части демонстрационной страницы вы можете увидеть пример подключения к событиям средства выбора данных. Использование события select или change — лучшая идея, чем функция, вызываемая кнопкой:

    var statusGenerator = function (text) {
        var statusElem = $(".status");
        var child = $("<span></span>").text(text);
        statusElem.append(child);
    };

    myDatePicker.on("select", function (data) {
        myFunction();
        statusGenerator(data.string + " selected")
    });

    myDatePicker.on("change", function (data) {
        myFunction();
        statusGenerator("Date picker changed current date: "+data.string);
    });
person whipdancer    schedule 10.05.2016
comment
Большое спасибо! Он работает идеально. Я попытался использовать getSelectedEndDate(), но не знал, как использовать его как функцию, и получил ошибку из-за () в конце. Спасибо, что показали мне, как это работает. Надеюсь, это поможет другим. - person user1892770; 10.05.2016