jquery timepicker

最新推荐文章于 2025-06-06 16:31:04 发布

转载最新推荐文章于 2025-06-06 16:31:04 发布 · 221 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xp796/p/6060806.html

文章标签：

#javascript #ViewUI

本文介绍了如何配置和使用时间选择器插件，包括设置开始时间和结束时间的输入框，并限制了可选时间范围从上午8点到下午7点半。同时，文章还展示了如何通过JavaScript对输入的时间进行清空操作及表单验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  <div class="form-group row">
            <div class="col-lg-2 control-label l-pd25">选择时间段</div>
            <div class="col-lg-10">
                <input type="text" class="form-control" placeholder="开始时间" name="begin_time" id="begin_time" required
                       data-msg-required="开始时间不能为空"/>
            </div>
        </div>
        <div class="form-group row">
            <div class="col-lg-2 control-label"></div>
            <div class="col-lg-10">
                <input type="text" class="form-control" placeholder="结束时间" name="end_time" id="end_time" required
                       data-msg-required="结束时间不能为空">
            </div>
        </div>
 <?= Html::jsFile('@web/scripts/plugins/timepicker/jquery.timepicker.js') ?>
    <?= Html::cssFile('@web/scripts/plugins/timepicker/jquery.timepicker.css') ?>
    <script>
        $(document).ready(function () {
            $("#date").keyup(function(){
                $("#date").val('');
            });
            $("#begin_time").keyup(function(){
                $("#begin_time").val('');
            });
            $("#end_time").keyup(function(){
                $("#end_time").val('');
            });


            $(".room-submit").click(function () {
                $("#jsForm").validate({
                    focusInvalid: false,
                    submitHandler: function (form) {

                        form.submit();
                    }
                });
            });
            $(".select2").select2();
            $('#begin_time').timepicker({
                'minTime': '8:00AM',
                'maxTime': '7:30PM',
            });
            $('#end_time').timepicker({
                'minTime': '8:00AM',
                'maxTime': '7:30PM',
            });
            $('#date').datetimepicker({
                format: 'yyyy-mm-dd',
                autoclose: true,
                todayBtn: true,
                startView: 'month',
                minView: 'month',
                language: 'zh-CN',
                startDate: "<?=date('Y-m-d')?>",
                todayHighlight: true, //高亮当前日期
            });
        });
    </script>