同时使用 jquery 时间选择器和日期选择器

Use jquery timepicker and datepicker simultaneously

本文关键字:选择器 日期 时间 jquery      更新时间:2023-09-26

我需要同时使用时间选择器和日期选择器。但其中只有一个有效。我的代码在下面提到。我正在使用多个jquery文件。

    <script type="text/javascript">

    $(document).ready(function() {


        $(".datepicker").datepicker({
            changeMonth: true,
            changeYear: true
        });

    });



    </script>




    <script type="text/javascript">
    $(document).ready(function() {

       $('.timepicker').timepicker({
                                        showPeriod: true,
                                        showLeadingZero: true
                                    });

    });

    </script>
     Date : <input type="text" class="datepicker"/>
     Time : <input type="text" class="timepicker"/>

使用日期选择器检查时间选择器 这个插件将两个选择器作为一个组件。

我用了 https://github.com/trentrichardson/jQuery-Timepicker-Addon

<link href="yourpath/jquery-ui-timepicker-addon.css'?>" rel="stylesheet" media="all">
<script src="yourpath/jquery-ui-timepicker-addon.js'?>"></script>
$(function() {
$( ".datepicker" ).datepicker();
});
$(function() {
$(".timepicker").timepicker();
});

和网页 输入类型="文本" 名称="日期" 值=" 占位符="会议名称" id="日期选择器"

  input type="text" name="start_time" value="" placeholder="Starting Time" class="timepicker"
  input type="text" name="end_time" value="" placeholder="Ending Time" class="timepicker"

它对我有用。我认为它的jquery版本问题

  1. 确保库是从 CDN http://cdnjs.com/libraries/jquery-ui-timepicker-addon 加载
  2. 成功加载 js 和 CSS 后,您可以按照 httpp://jonthornton.github.io/jquery-timepicker/中给出的示例使用该插件。我使用以下选项来获取 AM/PM 选择器;

    $('input.timepicker

    ').timepicker({controlType: 'select', timeFormat: 'hh:mm TT', 下拉菜单:真, 滚动条:假, 安普姆:真});

  3. 有关详细选项列表,请参阅 httpp://timepicker.co/options/

2 个链接有 httpp 而不是 http cz 所以不允许我在一个答案中发布很多链接。