HTML 5 DatePicker 事件未在 iOS Safari 上触发

Question

我正在尝试实现一个日期选择器来使用某个时间点的一些信息更新图表。使用 jquery，我尝试了 onblur onchange 和 onkeyup，但这些事件似乎都没有在 Mobile chrome 或 iOS safari 上触发。

然后我尝试 onblur= 也没有成功。

谁能看到我在这里做错了什么？

  <div class="col-50 graph-date-select-container">
    <input id="graph-date-input" type="date" class="graph-date-select" style="-webkit-appearance: textfield; -moz-appearance: textfield; height: 20px; margin-top: -15px;" onblur="graphUpdate()"/>
  </div>


function graphUpdate() {
  alert("graphUpdate called.")
  var date = new Date($(this).val());

  var dateString = "" + date.getDay() + "/" + date.getMonth() + "/" + date.getFullYear();

  var url = "{% add_params request.get_full_path period='daily'%}" + "query_param=" + dateString
  window.location.href = url
};

基本上所有需要发生的是，当输入中的值发生更改（用户隐藏日期输入弹出窗口）时，dat 作为参数传递给 django 模板，页面重新加载新信息。

Answer 1

你应该按照我的代码，它会工作::

HTML

<div class="col-50 graph-date-select-container">
    <input id="graph-date-input" type="date" class="graph-date-select" style="-webkit-appearance: textfield; -moz-appearance: textfield; height: 20px;" onchange="graphUpdate(this.value)"/>
</div>

JS

function graphUpdate(value) {
    var date = new Date(value);
    console.log(date);
    var dateString = "" + date.getDay() + "/" + date.getMonth() + "/" + date.getFullYear();

    var url = "{% add_params request.get_full_path period='daily'%}" + "query_param=" + dateString;
    window.location.href = url;
};

请记住，这将打印您选择的日期，其余代码您需要根据需要更改。

================================================ ============================

更新版本:: 请试试这个

HTML

<div class="col-50 graph-date-select-container">
    <input id="graph-date-input" type="date" class="graph-date-select" style="-webkit-appearance: textfield; -moz-appearance: textfield; height: 20px;"/>
</div>
<div id="testingDiv"></div>

JS

$(document).ready(function () {
    $(document).on('change', '.graph-date-select', function () {
        var date = new Date($(this).val());
        $('#testingDiv').html(date);
        alert(date); //first check date is alerting or not
        return false;
        var dateString = "" + date.getDay() + "/" + date.getMonth() + "/" + date.getFullYear();

        var url = "{% add_params request.get_full_path period='daily'%}" + "query_param=" + dateString;
        window.location.href = url;
    });
});