【问题标题】:How to get the date input from flatpickr?如何从 flatpickr 获取日期输入?
【发布时间】:2020-05-06 22:39:02
【问题描述】:

我正在将我的 jquery ui datepicker 更改为 flatpickr。但我需要知道如何为 flatpickr 做到这一点$('#from2').datepicker('getDate')。我在网上找不到如何使用 flatpickr 进行操作。

感谢您的宝贵时间。

*编辑

function getDays() {
    let start = $('#from1').datepicker('getDate'),
        end   = $('#to1').datepicker('getDate'),
        days  = (end - start) / 1000 / 60 / 60 / 24;
        if(days == 0 || days > 0) {
    $('#howManyNights').val(days);
  }
    return days;
}

*不适用于 flatpickr:

function getDays() {
    let start = $('#from1').val();
        end   = $('#to1').val();
        days  = (end - start) / 1000 / 60 / 60 / 24;
        console.log(days);
        if(days == 0 || days > 0) {
    $('#howManyNights').val(days);
    }
    return days;
}

天 = 南

【问题讨论】:

  • 应该可以从输入的 .val() 中获取。
  • @ReverendPete 感谢您的回答。如果我这样做了,我的计算就不再像以前的日期选择器那样工作了*请参阅编辑

标签: jquery html datepicker flatpickr


【解决方案1】:

像这样尝试,通过使用 flatpickr 的值制作日期对象(您可以运行的工作 sn-p)

var from1 = flatpickr('#from1', {});
var to1 = flatpickr('#to1', {});

function getDays() {
    var start = new Date($('#from1').val());
    var end   = new Date($('#to1').val());
    days  = (end - start) / 1000 / 60 / 60 / 24;
    if(days == 0 || days > 0) {
      $('#howManyNights').val(days);
    }
    return days;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.3/flatpickr.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.3/flatpickr.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

From:<input name="from1" id="from1" type="text">
To:<input name="to1" id="to1" type="text">
How Many:<input name="howManyNights" id="howManyNights" type="text">
<button onclick="getDays()">Get Days</button>

【讨论】:

  • 我在强调这一点。但现在多亏了你,我有了一个完整的工作日期选择器,其中包含来自数据库的禁用日期。非常感谢您的时间和精力!
  • 嘿!有个小问题,求指点。如果我选择日期 2020 年 1 月 1 日到 2020 年 1 月 5 日。这些日期在日期选择器中被禁用。用户怎么可能将日期更改为“2020 年 1 月 1 日 ----- 2020 年 1 月 3 日”,我在想这个,不知道我怎样才能让这个对用户好?
猜你喜欢
  • 2021-01-06
  • 1970-01-01
  • 2018-01-13
  • 1970-01-01
  • 1970-01-01
  • 2020-04-21
  • 1970-01-01
  • 1970-01-01
  • 2016-02-13
相关资源
最近更新 更多