<!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. bzoj 2150

    然后考虑正解 我们发现,最坏情况就是每个点都派驻军队,所以答案至多是“.”的数目 而且,每个点都至多只有一个入度和一个出度,所以我们可以将每个点拆成两个点,一个作为入点,一个作为出点,然后所有图上能到 ...

  2. 任务超时退出的方法 C#

    超出时间方法退出.防止卡住. 方法: private static bool ImportTaskTimeout(Action method, int hours) { try { var task ...

  3. spring boot引入json，jsonobject，需要指定jdk15

    spring boot引入json,需要指定jdk15 <dependency> <groupId>net.sf.json-lib</groupId> <ar ...

  4. IDEA 小白采坑

    IDEA Debug状态下,断点第一次可以进去,之后都不能进去 调试时候不要用Ctrl+F9,如果是点击Tool Windows 上的图标的话,也要注意改图标的快捷键是不是Ctrl+F9 Ctrl+F ...

  5. Linux系统监控命令及定位Java线程

    1.PID.TID的区分 uid是user id,即用户id,root用户的uid是0,0为最高权限,gid是group id,用户组id,使用 id 命令可以很简单的通过用户名查看UID.GID:~ ...

  6. （2）.NET CORE微服务 Micro-Service ---- .NetCore启动配置 和 .NetCoreWebApi

    什么是.Net Core?.Net Core是微软开发的另外一个可以跨Linux.Windows.mac等平台的.Net.Net Core相关知识看文章地步dotnet dllname.dll 运行P ...

  7. scrapy中输出中文保存中文

    1.json文件中文解码: #!/usr/bin/python #coding=utf-8 #author=dahu import json with open('huxiu.json','r') a ...

  8. 一起学Hadoop——MapReduce原理

        一致性Hash算法. Hash算法是为了保证数据均匀的分布,例如有3个桶,分别是0号桶,1号桶和2号桶:现在有12个球,怎么样才能让12个球平均分布到3个桶中呢?使用Hash算法的做法是,将1 ...

  9. 分布式系统的BASE理论

    一.BASE理论 eBay的架构师Dan Pritchett源于对大规模分布式系统的实践总结,在ACM上发表文章提出BASE理论,BASE理论是对CAP理论的延伸,核心思想是即使无法做到强一致性(St ...

  10. Openstack1 云计算与虚拟化概念

    一.云概念 二.虚拟化,云计算不等于虚拟化,但是云计算需要用到虚拟化的技术 1.服务器虚拟化 2.桌面虚拟化 3.应用虚拟化 三.区别 1.虚拟化是具体的技术. 2.云计算是交付使用的一种模式