Flatpickr 清除按钮答案

【问题标题】：Flatpickr Clear ButtonFlatpickr 清除按钮
【发布时间】：2019-03-25 09:56:50
【问题描述】：

我正在使用这个加载 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>

看起来很简单，但我显然遗漏了一些东西。有人让这些关闭按钮之一正常工作吗？

【问题讨论】：

标签： javascript jquery time flatpickr

【解决方案1】：

使用以下方法：

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

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

【讨论】：

【解决方案2】：

只需将此按钮添加到您的 HTML：

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

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

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

这是一个工作示例：https://codepen.io/anon/pen/pxKOGP

【讨论】：

这行得通。这是 Flatpickr 规定的方法吗？他们的例子我很不清楚——比如为什么你需要“包装”以及为什么你需要“数据清除”属性，当它似乎没有被使用时。
@SalCangeloso 您可以从 HTML 中清除 title="clear" data-clear 代码。但是，如果您删除 clear_button 类，它将不起作用。我是从文档中得到的。
从 Adbul 的回答中复制：“@Ayxan 的回答是不对的，它所做的是创建一个新的 flatpickr 实例并在其上调用 clear()。最重要的是它不会清除隐藏的实际存储日期的输入字段。”

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

您可以使用 CoffeeScript/JS 来实现它。不幸的是，flatpickr 没有提供在选择后清除字段的选项。

环境：Rails 和咖啡脚本

查看：

<div class="form-group flatpicker">
        <%= f.label :start_time_gt_eq, 'Starting at', class: 'form-control-label font-weight-bold' %>
        <div class="row d-flex justify-content-between ml-1">
          <%= f.text_field :start_time_gt_eq, class: 'form-control active position-relative col-md-11' ,
              data: {
                behavior: 'flatpickr_time',
                enable_time: true,
                alt_input: true,
              } %>
          <button type="button" id="appointment-start-from" class="close" data-dismiss="alert">×</button>
        </div>
      </div>

CoffeeScript 文件

(->
  window.Appointments or (window.Appointments = {})

  Appointments.init = ->
    $ ->
      $('#appointment-start-from').click ->
        $('#q_start_time_gt_eq').flatpickr().clear();

      return
        
).call this

并确保在视图文件中初始化JS

<% content_for :js_init do %>
  Appointments.init();
<% end %>

【讨论】：