一、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

  })

})

二、获取时间

一、bootstrap-datepicker的更多相关文章

  1. bootstrap datepicker含有hasDatepicker无法弹出

    bootstrap datepicker 初始化时,会给控件添加hasDatepicker类 ,如果此时调用 $singleDay.datepicker(initDayOpts);无法弹出时间控件 需 ...

  2. bootstrap datetimepicker、bootstrap datepicker日期组件对范围的简单封装

    1.bootstrap datepicker 使用 <div class="row form-group"> <label class="control ...

  3. bootstrap datepicker显示日历

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

  4. 【Bootstrap】Bootstrap Datepicker使用

    插件:http://url.cn/V4S8w4 1.添加样式和引用JS文件 <link href="CSS/bootstrap-datetimepicker.css" rel ...

  5. bootstrap datepicker 属性设置 以及方法和事件

    DatePicker支持鼠标点选日期,同时还可以通过键盘控制选择: page up/down - 上一月.下一月 ctrl+page up/down - 上一年.下一年 ctrl+home - 当前月 ...

  6. 常见问题：bootstrap datepicker日期插件汉化

    引入简体中文js(bootstrap-datepicker.zh-CN.js),并在datepicker属性配置language为‘zh-CN’即可,示例如下: $(".form_datet ...

  7. Bootstrap datepicker 在弹出窗体modal中不工作

    解决办法 在 show 方法后面 添加 下面一段代码 $('#modalCard').modal('show');—例子 打开 弹出窗体 //$('#modalCard').modal('hide') ...

  8. 年视图，选择月份 ---bootstrap datepicker

    $.fn.datepicker.dates['cn'] = { //切换为中文显示 days: ["周日", "周一", "周二", &qu ...

  9. Bootstrap datepicker可配置网址

    http://eternicode.github.io/bootstrap-datepicker/?markup=input&format=&weekStart=&startD ...

  10. bootstrap datepicker时间插件显示位置不对

    bppystrap-datetimepicker.min.js中,修改如下:将原来的        if(!b(this.element)){l=l+document.body.scrollTop}改 ...

随机推荐

  1. win10 中文

    按 WinKey+I 鍵,開啟「設定」對話框,再選取「時間與語言」選項.

  2. <select multiple="multiple"> 数据回显

    var names = yunying_name.split(","); for (var i = 0; i < names.length; i++) { names[i] ...

  3. Go(三)面向对象

    封装数据和行为 数据封装 结构定义 type Employee struct { Id string Name string Age int } field后面没有逗号 实例创建及初始化 e := E ...

  4. vue项目中引入mui.poppicker.js文件时报错“Uncaught ReferenceError: mui is not defined”

    解决:在mui.js的源文件后最后加上 window.mui = mui;

  5. Angular JS - 4 - Angular JS 作用域与控制器对象

    1. 控制器对象使用 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...

  6. hdu 5120 Intersection (圆环面积相交->圆面积相交)

    Problem Description Matt is a big fan of logo design. Recently he falls in love with logo made up by ...

  7. JavaScript中操作节点

    1.获取节点 1.1.用 getElement 方法获取 获取元素节点时,必须等到DOM树加载完成后才能获取.两种处理方式:(1)将JS写在文档最后:(2)将代码写入window.onload函数中: ...

  8. txt操作

    C#解决读写包含汉字的txt文件时乱码的问题 C#解决读写包含汉字的txt文件时乱码的问题 当我们用System.IO.StreamReader读取包含汉字的txt文件时,经常会读出乱码(Stream ...

  9. Oracle or Question Solve(二)

    数据库常用语句和函数 ----update update()函数主要注意的是后面的where限制条件--例子:update tab_a a set a.v1 = (select b.v1 from t ...

  10. 洛谷 4099 [HEOI2013]SAO——树形DP

    题目:https://www.luogu.org/problemnew/show/P4099 结果还是看了题解才会…… 关键是状态,f[ i ][ j ] 表示 i 子树. i 号点是第 j 个出现的 ...