一、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. windows和mtu值修改

    前言 有时候我们需要修改mtu值来对付乱七八糟的网络问题 windows修改方法 1.netsh interface ipv4 show subinterfaces 查询到目前系统的MTU值 2.ne ...

  2. HttpRunnerManager安装部署（centos7）

    一.安装python3环境 参考 二.安装依赖环境 根据根目录requirements.txt文件安装依赖,可以使用pip安装 #pip3 install -r requirements.txt 会遇 ...

  3. gps位置坐标转百度坐标

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  4. Es学习第七课， term、terms、match等基本查询语法

    term.terms查询 term query会去倒排索引中寻找确切的term,它并不知道分词器的存在,这种查询适合keyword.numeric.date等明确值的 term:查询某个字段里含有某个 ...

  5. ThinkingRock:使用方法

    摘自:http://www.mifengtd.cn/articles/how_to_use_thinkingrock.html 不使用Thinkingrock的朋友,也可以看看.因为在处理(Proce ...

  6. equals区别==

    来自:https://blog.csdn.net/m0_37721946/article/details/78405595 java中的数据类型,可分为两类: 1.基本数据类型 byte,short, ...

  7. 箭头函数以及this指向问题

    一.定义函数的方式 //1.function const aaa = function () { } //2.对象字面量中定义函数 const obj = { bbb() { } } //3.ES6中 ...

  8. mybatis整合redis二级缓存

    mybatis默认开启了二级缓存功能,在mybatis主配置文件中,将cacheEnabled设置成false,则会关闭二级缓存功能 <settings> <!--二级缓存默认开启, ...

  9. 4412 PWM

    一.PWM原理 1.有源蜂鸣器和无源蜂鸣器的概念 有源蜂鸣器高电平就响,无源蜂鸣器需要PWM波才响. 2.PWM脉冲波 PWM = 定时器 + 定时器中断(重载) + IO输出(翻转) 3.分析原理图 ...

  10. Asp.Net页面间传值常见的几种方法

    一.QueryString QueryString是一种非常简单的传值方式,他是将传送的值显示在浏览器的地址栏中.如果是传递一个或多个安全性要求不高或是结构简单的数值时,可以使用这个方法.但是对于传递 ...