【问题标题】:flatpickr formatting end value after selection选择后flatpickr格式化结束值
【发布时间】:2019-02-25 18:22:19
【问题描述】:

我有以下html:

<div class="form-group">
    @Html.LabelFor(x => x.StartDate)
    @Html.TextBoxFor(m => m.StartDate, "{0:dd-MM-yyyy}", new { type = "text", @class = "flatpickrStart form-control", @id = "absenceStartDate", @Required = true })
    @Html.ValidationMessageFor(x => x.StartDate, null, new { @class = "text-danger" })
</div>
<div class="form-group">
    @Html.LabelFor(x => x.EndDate)
    @Html.TextBoxFor(m => m.EndDate, "{0:dd-MM-yyyy}", new { type = "text", @class = "flatpickrEnd form-control", @id = "absenceEndDate", @Required = true })
    @Html.ValidationMessageFor(x => x.EndDate, null, new { @class = "text-danger" })
</div>

和脚本:

function InitializeDateTimePickers() {
    $(".flatpickrStart, .flatpickrEnd").flatpickr({
        dateFormat: "dd-MM-yyyy H:i:s",
        enableTime: true,
        weekNumbers: true,
        altInput: true,
        altFormat: "F j, Y - h:i",
        time_24hr: true
    });
}

例如我的代码笔: https://codepen.io/andrelange91/pen/YOgwaJ

选择工作正常,但是当我选择了一个值时, 我得到的价值在某些地方似乎翻了一番。

例如我使用选择器选择这个:2018 年 9 月 21 日 - 8:00 返回的值是这样的:2121-SepSep-18181818 08:00:0

有没有办法让我获得正确的日期时间格式? 第一次用这个插件,一直没找到解决办法。

【问题讨论】:

  • 无需写两次代码。只写一次$(".flatpickrStart, .flatpickrEnd").flatpickr({ dateFormat: "dd-MM-yyyy H:i:s", enableTime: true, weekNumbers: true, altInput: true, altFormat: "F j, Y - h:i", time_24hr: true });。我希望问题能得到解决。如果没有将class 转换为id 然后检查
  • @AlivetoDie 很酷,不知道我能做到这一点^^ thx

标签: jquery datetime flatpickr


【解决方案1】:

无需编写两次代码。只写一次

$(".flatpickrStart, .flatpickrEnd").flatpickr({ 
   dateFormat: "d-M-y H:i:s", //change format also 
   enableTime: true, 
   weekNumbers: true, 
   altInput: true, 
   altFormat: "F j, Y - h:i", 
   time_24hr: true 
});

您的问题将得到解决。

工作 sn-p:- https://codepen.io/anon/pen/VGRWZv

注意:我也更改了链接中的文本输出代码,请检查一下。

【讨论】:

  • 是的,这行得通。好像是 Flatpickr,不支持 dd/MM/yyyy
  • @andrelange91 很高兴为您提供帮助:):)
猜你喜欢
  • 1970-01-01
  • 2021-10-09
  • 2018-10-12
  • 2019-07-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多