如何从日期范围选择器中获取两个日期？

Question

我有一个 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 Documentation

Answer 1

如果您没有选择日期，那么您的功能将无法按预期工作。

我会使用日期选择器的select 事件来实际获取值。

根据 BeatPicker 文档，获取开始日期和结束日期的方法是 getSelectedStartDate 和 getSelectedEndDate。由于您使用了声明式语法，您还可以通过data-beatpicker-id="myPicker" 为您的日期选择器提供id。如果这样做，您可以通过该 ID 引用日期选择器。

更新你的元素声明：

<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);
    });