Question

我正在使用以下方式加载flatpickr：

<script type="text/javascript">
jQuery(document).ready(function($){
    $('#Mydatetime').flatpickr({
        altInput: true,
        altFormat: "M j, Y @ H:i",
        enableTime: true,
        dateFormat: 'Y-m-d\\TH:i'
    });
});

<input type="text" id="Mydatetime" class="MyDate" name="my_expire_date" value="' . $variable . '"/>

变量只是我的日期时间。它可以工作，但是我想添加一个类似于this的清除按钮。无论我做什么，按钮都不会清除日期。

示例：

<a class="input-button" title="clear" data-clear>
    <i class="icon-close"></i>
</a>

看起来很简单，但是我显然缺少一些东西。有人让其中一个关闭按钮正常工作了吗？

Answer 1

只需将此按钮添加到HTML：

<button class="clear_button" title="clear" data-clear>
Clear
</button>

并将此代码添加到“文档就绪”功能的内部

  $(".clear_button").click(function() {
    $('#Mydatetime').flatpickr().clear();
  })

这是一个有效的示例：https://codepen.io/anon/pen/pxKOGP

Answer 2

@Ayxan的答案不正确，它正在做的是制作一个flatpickr的新实例并在其上调用clear()。最重要的是，它不会清除实际上存储日期的隐藏输入字段。

使用以下方法：

const $flatpickr = $("#flatpickr_id").flatpickr();

$("#some_button_id").click(function() {
   $flatpickr.clear();
})

Answer 3

$(function() {
  $(".input_button").click(function() {
    $('#Mydatetime')[0]._flatpickr.clear();
  });
});

Answer 4

如果不使用 jQuery，你可以试试这个：

const my_fp = document.querySelector("#fp_field")._flatpickr;
my_fp.clear();

Flatpickr清除按钮

4 个答案: