Question

我已经使用daterangepicker创建了一个演示，并且运行良好。现在我也想将时间选择器与daterangepicker一起应用。但是我只想选时间一天。当用户从日历中选择日期并进入日期范围时，请选择开始到结束日期，然后时间选择器会自动从日历中隐藏。例如：用户选择06-07-2018至07-07-2018或06-07-2018至10-07-2018，然后选择时间选择器即可。用户选择一天作为开始到结束日期，然后显示时间选择器。例如：用户选择06-07-2018至06-07-2018，然后显示时间选择器。我现在拥有使用CSS手动隐藏功能手动初始化时间选择器的功能。

这是我的html代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
  <style type="text/css">
  .daterangepicker .left .calendar-time{
   display:none !important;
  }
  .daterangepicker .right .calendar-time
   {
    display:none !important;
   }
</style>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<div>
    <input type="text" id="dates" name="dates" value="" />
</div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script type="text/javascript">
    $(function () {            
        $('input[name="dates"]').daterangepicker({
            minDate: new Date(),
            timePicker: true,
       });       
       });       
</script>

现在我的日期选择器显示如下：

我在头标记中给出了正确的CSS之后，然后在那时显示日期选择器，但此时第一次没有显示。

使用CSS我的日期选择器如下所示：

在屏幕截图上方，我的时间选择器处于隐藏状态。

现在，我希望当用户单击相同的开始到结束日期时，我的时间选择器会自动显示，而当用户选择选择日期范围时，开始到结束日期然后会自动隐藏。

我希望通过鼠标单击来实现。

任何人都知道该怎么做。如何通过鼠标单击获取日期。

例如：用户选择06-07-2018至06-07-2018，然后显示时间选择器用户选择2018年6月7日至2018年7月7日为n个日期，然后隐藏时间选择器。

使用DateRangePicker如何仅应用一天的时间选择器？

0 个答案: