一、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. BZOJ1822 [JSOI2010]Frozen Nova 冷冻波 二分+最大流

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=1822 题解 好久没做网络流的,都没有想到网络流... 首先暴力判断一下一个巫妖和一个精灵之间能 ...

  2. CentOS6.8 安装/升级Python2.7.x，并安装最新setuptools、pip、fabric程序总结

    最终靠谱的可借鉴文档: 1.python官网 2.http://lovesoo.org/python-fabric-yuan-cheng-zi-dong-bu-shu-jian-jie.html 3. ...

  3. boost variant

    Boost Variant resembles union. You can store values of different types in a boost::variant. 1. #incl ...

  4. 系统信息&&硬件信息查看

    系统信息&&硬件信息查看 一系统信息查看 (一)查看系统版本信息 [root@centos7 ~]# cat /etc/redhat-release CentOS Linux rele ...

  5. 基于oracle 的PL/SQL编程 - 存储过程

    接上篇,游标使用的语句,相当于一段匿名的函数,窗口关闭了就不存在了.如果想要窗口关闭了,还能继续执行那段代码,就需要存储过程了: PLSQL是指一个个PLSQL的业务处理过程存储起来进行复用,这些被存 ...

  6. ECS运维：操作系统有异常？诊断日志来帮忙！

    ​云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新.阿里云使用严格的IDC标准.服务器准入标准 ...

  7. php nl2br()函数 语法

    php nl2br()函数 语法 作用:在字符串中的新行(\n)之前插入换行符dd马达 语法:nl2br(string,xhtml) 参数: 参数 描述 string 必须.规定要检查的字符串. xh ...

  8. 【靶场练习_sqli-labs】SQLi-LABS Page-3 (Stacked Injections)

    Less-39: ?id=1 and 1 ,?id=1 and 1 : 回显不同,数字型 ?id=0 union select 1,2,group_concat(table_name) from in ...

  9. 高并发大流量专题---11、Web服务器的负载均衡

    高并发大流量专题---11.Web服务器的负载均衡 一.总结 一句话总结: 推荐使用nginx七层(应用层)负载均衡的实现:配置那是相当的简单 http{ upstream cluster{ serv ...

  10. PHP连接FTP服务的简单实现

    PHP连接FTP服务: <?php class Ftp { private $connect; private $getback; /** * ftp连接信息 * @var array */ p ...