简体   繁体   English

Bootstrap DateTime Picker插件?

[英]Bootstrap datetime picker plugin?

Here is a simple DatePicker that works. 这是一个有效的简单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>

How should the above code change in order to make it use a DATETIME picker? 为了使它使用DATETIME选择器,上述代码应如何更改? Im assuming I need to use different plugins within the header? 我假设我需要在标题中使用其他插件? Please could someone advise? 有人可以请教吗?

 $(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> 

Source: https://eonasdan.github.io/bootstrap-datetimepicker/ 资料来源: https : //eonasdan.github.io/bootstrap-datetimepicker/

Make working in SO with help from : https://stackoverflow.com/a/40036266/4091337 and @Abhishek in comments 在以下帮助下在SO中工作: https ://stackoverflow.com/a/40036266/4091337和@Abhishek

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM