如何在 daterangepicker 中添加时间答案

【问题标题】：How to add time in daterangepicker如何在 daterangepicker 中添加时间
【发布时间】：2017-08-31 00:28:30
【问题描述】：

我需要使用 jQuery 和 JavaScript 在daterangepicker 中添加时间。我在下面解释我的代码。

<input class="form-control" name="startgroupdate" id="stdate" type="text" placeholder=""  onfocus="removeBorder('stdate')">

$('input[name="startgroupdate"]').daterangepicker({
    singleDatePicker: true,
    showDropdowns: true,
    drops: "up",
    minDate: '01/01/2012',
    maxDate: '12/31/2017'
});

这里只有日期来自日历，但我还需要添加时间，所以结果应该是“03/04/2017 12 10 PM”。

【问题讨论】：

标签： javascript jquery twitter-bootstrap bootstrap-daterangepicker

【解决方案1】：

检查一下..您需要添加时间属性和 daterangepicker js

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="style.css" />
  <link href="daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
  <script src="moment.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.js"></script>
  <script src="script.js"></script>

</head>

<body>
  <h1>Hello Plunker!</h1>
  <input class="form-control" name="startgroupdate" id="stdate" type="text" placeholder="">
  <script>
    $(function() {
      $('input[name="startgroupdate"]').daterangepicker({
        timePicker: true,
        locale: {
          format: 'MM/DD/YYYY h:mm A'
        },
        singleDatePicker: true,
        showDropdowns: true,
        drops: "down",
        minDate: '01/01/2012',
        maxDate: '12/31/2017'
      });
    });
  </script>
</body>

</html>

【讨论】：

我按照你的要求做了，但日期只反映在输入字段上，但时间还没有到来。
不，同样的问题。您在哪里进行了更改。
有一些变化，请检查更新的代码。它在我的系统中工作。如果您使用 document.ready 功能，请确保在其中添加上述代码并从中删除自动功能以上代码。
让我创建一个plunkr和你分享。
请查看此链接plunkr code。

【解决方案2】：

您需要将 timepicker 标志添加到 daterangepicker。

$('input[name="startgroupdate"]').daterangepicker({
    timePicker: true,
    timePickerIncrement: 30,
    singleDatePicker: true,
    showDropdowns: true  
    drops: "up",
    minDate: '01/01/2012',
    maxDate: '12/31/2017'
});

【讨论】：

【解决方案3】：

你必须添加属性

 timePicker: true

此链接可能会有所帮助 http://www.daterangepicker.com/#ex2

【讨论】：

最佳答案！谢谢。