Javascript datetimepicker 在更改时获取值

Question

我正在尝试拦截对 WooCommerce 额外产品选项 datetimepicker 组件的更改。本质上，它只是一个日期时间选择器。

我有：

<script>
    var box = document.getElementById("myDateTimePicker");
    //console.log("#devlog: Active");  

    box.addEventListener("blur", function(){
        var selectedDate = box.value;
        console.log(selectedDate);    
  });
</script>

几乎工作。它输出日期时间选择器包含的先前值，而不是刚刚更改为的值。

我已经在 eventListener 中尝试了一系列事件，但似乎没有任何效果。有没有好心人可以让我摆脱痛苦，并告诉我如何在更改日期时间选择器时从中获取新值？谢谢

更新：

这是表格中的 html。我正在使用的组件是最后一个 <tr>.

中的日期选择器

<form class="cart" action="http://blahblahblah:8888/product/191/" method="post" enctype='multipart/form-data'>
    <input type="hidden" id="thwepof_product_fields" name="thwepof_product_fields" value="name_of_skater,tel_number,which_day" />
    <table class="thwepo-extra-options thwepo_simple" cellspacing="0">
        <tbody>
            <tr>
                <td colspan="2" class="section-title">
                    <h3 class="">Mandatory information</h3></td>
            </tr>
            <tr class="">
                <td class="label leftside">
                    <label class="label-tag ">Name of skater</label> <abbr class="required" title="Required">*</abbr></td>
                <td class="value leftside">
                    <input type="text" id="name_of_skater" name="name_of_skater" value="" class="thwepof-input-field validate-required">
                </td>
            </tr>
            <tr class="">
                <td class="label leftside">
                    <label class="label-tag ">Telephone number</label> <abbr class="required" title="Required">*</abbr></td>
                <td class="value leftside">
                    <input type="tel" id="tel_number" name="tel_number" value="" class="thwepof-input-field validate-required">
                </td>
            </tr>
            <tr class="">
                <td class="label leftside">
                    <label class="label-tag ">Pick a day <b>only</b></label> <abbr class="required" title="Required">*</abbr></td>
                <td class="value leftside">
                    <input type="text" autocomplete="off" id="which_day" name="which_day" value="" class="thwepof-input-field thwepof-date-picker validate-required" data-readonly="no">
                </td>
            </tr>
        </tbody>
    </table>
    <div class="quantity hidden">
        <input type="hidden" id="quantity_5e583e6ca4c48" class="qty" name="quantity" value="1" />
    </div>

    <button type="submit" name="add-to-cart" value="191" class="single_add_to_cart_button button alt">Add to basket</button>

</form>

Answer 1

你可以试试这个：

document.getElementById('myDateTimePicker').onChange = function() {
console.log(document.getElementById('myDateTimePicker').value);
}

你也许可以使用 this.value，但为了以防万一，我把它写得很长。

希望对您有所帮助。

Javascript datetimepicker 在更改时获取值

Javascript datetimepicker get value on change

javascript

datetimepicker