<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

	<title>基于bootstrap的日期小插件</title>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  

<script src="https://cdn.bootcss.com/moment.js/2.18.1/moment-with-locales.min.js"></script>

<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-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<script type="text/javascript">

	$(function () {

    $('#date1').datetimepicker({

        format: 'YYYY-MM-DD',

        locale: moment.locale('zh-cn')

    });

    $('#date1').datetimepicker('show');

    });

</script>

</head>

<body>

    <div class="input-group datepicker date" id='date1'>

        <input type="hidden" class="form-control">

    </div>

</body>

</html>

实现效果：会一直现在在页面上如下图所示：

bootstrap datepicker显示日历的更多相关文章

  1. bootstrap中使用日历控件

    在bootstrap中使用日历控件可以参照以下资料: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 以下是参照此资料自己做的一 ...

  2. 使用【 ajax 】【 bootstrap 】显示出小窗口 详情内容 一些代码意思可以参考下一个文章

    使用[ bootstrap ]显示出小窗口  详情内容 显示页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  3. 显示日历的指令：cal

    1.显示日历的指令:cal (1)参数: (2)实例:

  4. bootstrap datepicker含有hasDatepicker无法弹出

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

  5. jquery.jCal.js显示日历插件

    描述:日历插件jCal用于需要输入日期的表单文本框. 兼容浏览器:IE浏览器/Firefox/Google Chrome 官方链接: http://www.overset.com/2008/05/1 ...

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

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

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

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

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

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

  9. bootstrap tooltip 显示提示信息

    参照网上文档,是这样说的, <a data-toggle="tooltip" data-placement="top" title="这是要提示 ...

随机推荐

  1. MySQL修改数据表存储引擎的3种方法介绍

    这篇文章主要介绍了MySQL修改数据表存储引擎的3种方法介绍,分别是直接修改.导出导入.创建插入3种方法, 可以参考下   MySQL作为最常用的数据库,经常遇到各种各样的问题.今天要说的就是表存储引 ...

  2. IDEA项目找不到浏览器报错的情况

    调tomcat的时候,它会调用浏览器,浏览器关联如果有问题,肯定是会报错的  要是测试的时候,就是浏览器的问题,重新把浏览器装一遍让他自己重新关联一下应该就行了

  3. IDEA窗口重置

  4. JAVA追加写入文本文件

    public void method1() { FileWriter fw = null; try { //如果文件存在,则追加内容:如果文件不存在,则创建文件 File f=new File(&qu ...

  5. 一脸懵逼学习Zookeeper（动物园管理员）---》高度可靠的分布式协调服务

    1:Zookeeper是一个分布式协调服务:就是为用户的分布式应用程序提供协调服务 A.zookeeper是为别的分布式程序服务的 B.Zookeeper本身就是一个分布式程序(只要有半数以上节点存活 ...

  6. [转] Webpack-CommonsChunkPlugin

    当前项目结构   项目结构 其中 Greeter.js 引用了 config.json main.js 和 second.js 都引用了 Greeter.js main.js 还引用了 onlyfor ...

  7. [ZJOI2006]皇帝的烦恼

    题解: 具有单调性的题目还是要多想想二分答案 不二分答案暴力dp是n^3的 非常不优秀 二分答案之后就比较好做 mx[i],nx[i]表示最多/最少几个与a[1]相同 代码: #include < ...

  8. AtCoder Regular Contest 101

    C题是个傻逼题, 一定是先向右,然后停了或者向左走到某一个点(左边同理)模拟就可以了 D题想了一会才想出来 和tjoi那道排序挺像的 二分答案变0/1来做 刚开始写的时候还把自己作为另外一类搞出来 这 ...

  9. iTOP4412环境搭建：arm-linux-gcc: 没有那个文件或目录

    系统:vmware下的ubuntu14.04 对于iTOP4412自己搭建环境,在source /root/.bashrc后发现还是没有正常,调用arm-linux-gcc -v提示没有那个文件或目录 ...

  10. 如何自动设置网页中meta节点keywords属性-【SEO】

    在处理网页的SEO时,经常需要设置meta节点中keywords的属性. 如果是UGC产生内容的话,对于这个字段可以由用户或编辑手工设置相关的标签或关键词来进行. 但对于MGC(机器产生内容)的内容的 ...