一、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. Sass--混合宏的不足

    混合宏在实际编码中给我们带来很多方便之处,特别是对于复用重复代码块.但其最大的不足之处是会生成冗余的代码块.比如在不同的地方调用一个相同的混合宏时.如: @mixin border-radius{ - ...

  2. ubuntu 解压zip 文件乱码

    用 unzip -O cp936 就可以了, 但是,有些发行版所带的 unzip 没有这个参数,比如 ArchLinux 就需要安装 unzip-iconv. Ubuntu 12.04 里面的 unz ...

  3. ubuntu 安装phpunit

    一.下载安装 wget https://phar.phpunit.de/phpunit-7.2.phar chmod +x phpunit-7.2.phar sudo mv phpunit-7.2.p ...

  4. 厉害了！新AI人工智能研究令人大开眼界

    AI人工智能有很多方法可以操纵照片,让您看起来更好看,消除红眼或镜头眩光等等.但到目前为止,眨眼已经证明了一个顽强的快照对手. 这远远不是智能“绘画中”的唯一例子,因为当一个程序用它认为属于的地方填充 ...

  5. VueJS基础框架代码介绍

    参考文档 https://vuejs.bootcss.com/v2/api/ https://router.vuejs.org/zh-cn/essentials/getting-started.htm ...

  6. 【leetcode】699. Falling Squares

    题目如下: On an infinite number line (x-axis), we drop given squares in the order they are given. The i- ...

  7. 【leetcode】668. Kth Smallest Number in Multiplication Table

    题目如下: 解题思路:几乎和[leetcode]719. Find K-th Smallest Pair Distance 的方法一样.只不过一个是减法一个是乘法,还有一点区别是[leetcode]7 ...

  8. Request Payload 和 Form Data 的区别

    概述 我正在开发的项目前端和后端是完全独立的,通过配置 webpack 的 proxy 将前端请求跨域代理到后台服务.昨天发现,我前端执行 post 请求,后台 springmvc 的 @Reques ...

  9. Git中三种文件状态及其转换和git适用命令

  10. Hibernate:More than one row with the given identifier was found解决办法

    今天写一个Action 通过 HQL 查询一个表 出现异常 “More than one row with the given identifier was found” 问题原因: 数据库出现数据异 ...