需要内联添加 24 小时格式的时间选择器



我是javascript的新手,需要一个24小时格式的时间选择器......虽然网上有几个时间选择器,但大多数都是12小时格式的,带有复杂的代码和外部文件。 有许多jQuery和JavaScript代码可用于DatePicker,但没有一个可用于Timepicker。

我正在使用这个时间选择器,但它不起作用..日期选择器工作正常..可以进行哪些更改?

<head>
    <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker({ minDate: 0, maxDate: "+1M +10D" });
  } );
  </script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
  <script type="text/javascript">
  $(function(){
  $("#timepicker1").timepicker();
  });
  </script>
<link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="inputvalidation.js"></script>

    </head>

在 HTML 5 中,建议允许:

<Input type="time">

在这种情况下,24 小时取决于客户,但此解决方案很简单。

或者,对于响应更好的属性,下拉列表可以表示 0-24 小时,另一个下拉列表可以表示 0-60 分钟。

在 HTML 5 中,建议允许:

<input type="time">

时间输入格式取决于客户端的浏览器。

另一种方法是使用输入类型='数字'输入,最小值 0 - 24 表示小时,最小值为 0 - 60 分钟。

另一种替代方法可以通过小时和分钟的选择下拉列表使用更好的响应属性来解决。

你试过使用bootstrap-datetimepicker吗?

使用bootstrap-datetimepicker,如果您需要24小时格式,我相信您必须像这样编辑Moment.js

moment().format("dddd, MMMM Do YYYY, HH:mm:ss");

格式还指示显示哪些组件,例如 MM/dd/YYYY 不会显示时间选择器。

这是此工具格式的完整文档。

更新

我知道您因为此工具中使用的各种库而感到困惑。这个问题之前已经在这里问过了。您可以将库从那里复制并粘贴到您的页面,因为它们都是指向现有服务器的外部链接。

最新更新