jquery Flatpickr清除按钮

wljmcqd8  于 2023-08-04  发布在  jQuery
关注(0)|答案(6)|浏览(152)

我正在使用以下命令加载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 . '"/>


变量只是我的日期时间。它的工作原理,但我想添加一个类似的清除按钮。不管我怎么做,按钮都不能清除日期。
示例:

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


听起来很简单,但我显然漏掉了什么。有谁的关闭按钮能正常工作吗?

2nbm6dog

2nbm6dog1#

使用以下方法:

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

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

字符串

7vhp5slm

7vhp5slm2#

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

字符串

kiz8lqtg

kiz8lqtg3#

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

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

字符串
并将此代码添加到“文档就绪”功能里面

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


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

7tofc5zh

7tofc5zh4#

如果你不使用jQuery,你可以试试这个:

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

字符串

bvjxkvbb

bvjxkvbb5#

也可以使用readonly属性

<input readonly="readonly" placeholder="Select a Destination" />

字符串
然后用JS做所有的魔术。

kr98yfug

kr98yfug6#

您可以使用CoffeeScript/JS来实现它。不幸的是,flatpickr没有提供在选择后清除字段的选项。
邀请函:Rails & Coffeescript

查看:

<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 %>

相关问题