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

【问题标题】：need timepicker in 24 hr format to be added inline需要内联添加 24 小时格式的时间选择器
【发布时间】：2018-01-31 16:46:08
【问题描述】：

我是 javascript 新手，需要一个 24 小时格式的时间选择器。虽然网上有几个时间选择器，但大多数都是 12 小时格式，带有复杂的代码和外部文件。有许多可用于 datepicker 的 jquery 和 javascript 代码，但没有可用于 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>

【问题讨论】：

请创建一个小提琴，完成后告诉我。通过这样称呼我：@lajosarpad 在你的回答命令中
@lajosarpad 我尝试了一个新代码，但我只想让它工作..它不工作..

标签： javascript html timepicker

【解决方案1】：

在 HTML 5 中，建议允许：

<Input type="time">

这种情况下的 24 小时取决于客户，但这个解决方案很简单。

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

【讨论】：

【解决方案2】：

在 HTML 5 中，建议允许：

<input type="time">

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

另一种方法是使用 input type='number' 输入，最小 0 - 24 小时，最小 0 - 60 分钟。

另一种替代方法可以通过更好的响应性属性来解决，选择下拉菜单持续数小时和数分钟。

【讨论】：

不是时间选择器

【解决方案3】：

您是否尝试过使用bootstrap-datetimepicker？

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

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

格式还规定了显示的组件，例如MM/dd/YYYY 不会显示时间选择器。

Here是该工具格式的完整文档。

更新

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

【讨论】：

转到eonasdan.github.io/bootstrap-datetimepicker/Installing，然后按照手册部分进行操作。我向你保证它很简单，你可以找到自己的方式。试试看吧。
给出了很多代码和文件..我应该下载什么