簡體   English   中英

Bootstrap DateTime Picker插件?

[英]Bootstrap datetime picker plugin?

這是一個有效的簡單DatePicker。

<head>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>

<script>
    $(document).ready(function(){
      var date_input=$('input[name="date"]'); //our date input has the name "date"
      var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
      var options={
        format: '"dd/MM/yyyy - hh:ii"',
        container: container,
        todayHighlight: true,
        autoclose: true,
      };
      date_input.datetimepicker(options);
    })
</script>
<head>
<body> 
  <div class="form-group"> <!-- Date input -->
      <label class="control-label" for="date">Date</label>
      <input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>
  </div>
</body>

為了使它使用DATETIME選擇器,上述代碼應如何更改? 我假設我需要在標題中使用其他插件? 有人可以請教嗎?

 $(function() { $('#datetimepicker1').datetimepicker(); }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css"> <div class="container"> <div class="row"> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' id='datetimepicker1'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> </div> 

資料來源: https : //eonasdan.github.io/bootstrap-datetimepicker/

在以下幫助下在SO中工作: https ://stackoverflow.com/a/40036266/4091337和@Abhishek

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM