0

我需要在使用jQuery和JavaScript的daterangepicker中添加時間。我在下面解釋我的代碼。如何在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' 
}); 

這裏只有日期是從日曆來了,但我還需要補充的時候,所以結果應該是像「2017年3月4日12晚上10點」。

回答

2

入住這out..You需要增加時間財產和daterangepicker的js

<!DOCTYPE html> 
<html> 

<head> 
    <script data-require="[email protected]*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <link data-require="[email protected]*" 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> 
+0

我一樣按照您,但到目前爲止,只有反映輸入領域,但隨着時間的不來。 – subhra

+0

檢查更新的代碼。 –

+0

不,同樣的問題。你做了哪些改變。 – subhra

1

您需要的timepicker標誌添加到daterangepicker。

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

呦必須添加屬性

timePicker: true 

這可能有助於鏈接 ​​