flatpickr 插件 (24小时值)

最新推荐文章于 2025-09-14 00:29:12 发布

原创最新推荐文章于 2025-09-14 00:29:12 发布 · 677 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flatpickr

Jquery 专栏收录该内容

5 篇文章

订阅专栏

这篇博客介绍了如何利用flatpickr插件在HTML表单中添加24小时制的时间选择功能。通过设置`data-enable-time`和`data-no-calendar`属性，禁用日历并启用时间选择。同时，展示了JavaScript代码，实现在关闭选择器时进行时间校验，确保开始时间不会晚于结束时间。如果开始时间大于结束时间，会弹出错误提示。

<div class="form-group">
    <label class="col-sm-3 control-label">周一~周五：</label>
    <div class="col-sm-9 ">
        <div class="input-group">
            <input id="summerWorkStartTimeF" class="form-control"
                   name="summerWorkStartTime"
                   data-enable-time=true
                   data-no-calendar=true placeholder="开始时间" value="08:00">
            <span class="input-group-addon">~</span>
            <input id="summerWorkEndTimeF" class="form-control"
                   name="summerWorkEndTime"
                   data-enable-time=true
                   data-no-calendar=true placeholder="结束时间" value="18:00">
        </div>
    </div>
</div>

/*---------------日期处理 ------------------------------*/
$("#summerWorkStartTimeF").flatpickr({
    enableTime: true,
    time_24hr: true,
    onClose: function (selectDates, dateStr, instance) {
        var endTimeValue = $("#summerWorkEndTimeF").val();
        var date = new Date();
        var a = dateStr.split(":");
        var b = endTimeValue.split(":");
        if (date.setHours(a[0], a[1]) > date.setHours(b[0], b[1])) {
            layer.msg("开始日期不能大于结束日期", {icon: 2});
            $("#summerWorkStartTimeF").val("");
        }

    }
})

$("#summerWorkEndTimeF").flatpickr({
    enableTime: true,
    time_24hr: true,
    onClose: function (selectDates, dateStr, instance) {
        var startTimeValue = $("#summerWorkStartTimeF").val();
        var date = new Date();
        var a = startTimeValue.split(":");
        var b = dateStr.split(":");
        if (date.setHours(a[0], a[1]) > date.setHours(b[0], b[1])) {
            layer.msg("开始日期不能大于结束日期", {icon: 2});
            $("#summerWorkEndTimeF").val("");
        }

    }
})