提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

一、bootstrap-datepicker

Bootstrap datepicker
2023-09-11 14:19:05 时间

一、bootstrap-datepicker

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!--时间控件-->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/2.1.30/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
</head>
<body>
<div class="row">
    <div class='col-sm-6'>
        <div class="form-group">
            <label>选择日期：</label>
            <!--指定 date标记-->
            <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 class='col-sm-6'>
        <div class="form-group">
            <label>选择日期+时间：</label>
            <!--指定 date标记-->
            <div class='input-group date' id='datetimepicker2'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
$(function () {
    $('#datetimepicker1').datetimepicker({
        format: 'YYYY-MM-DD',
        locale: moment.locale('zh-cn')
    });
    $('#datetimepicker2').datetimepicker({
        format: 'YYYY-MM-DD hh:mm',
        locale: moment.locale('zh-cn')
    });
});
</script>

</html>

二、bootstrap-datepicker 布局样式

 

<div class="input-group">
  <label class="input-group-addon">开始时间</label>
  <input type="text" class="form-control" data-datetime-picker="YYYY-MM-DD" id="datetime-start">
  <span class="input-group-addon">
    <i class="glyphicon glyphicon-calendar"></i>
  </span>

  <span class="input-group-addon">结束时间</span>
  input type="text" class="form-control" data-datetime-picker="YYYY-MM-DD" id="datetime-stop">
  <span class="input-group-addon">
    <i class="glyphicon glyphicon-calendar"></i>
  </span>
</div>

绑定代码，使用统一的绑定代码：

$('[data-datetime-picker]').each(function() {
  var $this   = $(this)
  var format  = $this.attr('data-datetime-picker')

  $this.datetimepicker({
      locale: 'zh-CN'
    , format: format
  })
})

 

二、获取时间

 

相关文章