<!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. 从认识面向对象到构造函数的标准写法(构造函数的继承、多态、ECMA6中新代替语法class) - 下

    笔记一个包含:认识面向对象.构造函数的封装.继承.多态.ECMA6中新代替语法class 下:包括构造函数的继承.多态.ECMA6中新代替语法class 构造函数的继承 从父一级延续下来的属性和功能( ...

  2. What is base..ctor(); in C#?

    I am disassembling some C# applications and I am trying to reconstruct the source code. I am disasse ...

  3. echo的运行

    例子:编译.链接examples中的echo. 编译: g++ -c -I ~/build/release-install-cpp11/include echo.cc -std=c++11 g++ - ...

  4. WMSYS.WM_CONCAT返回CLOB类型的解决办法

    https://blog.csdn.net/cnm_csdn_wt/article/details/80047878

  5. 记录一次因代理Controller产生的404问题

    spring 3.2.4 为了给每一个controller配置一个拦截器链 import com.google.common.collect.Lists; import org.aopalliance ...

  6. Vs2017获取Git空仓库后创建解决方案及项目无法推送,推送失败的问题.

      与Git无关,因为远程是空文件夹,导致没有远程版本做对应提示更改或怎样,必须在创建人创建仓库的时候上传文件代码. https://developercommunity.visualstudio.c ...

  7. tp3.2上传图片生成缩略图

    //引入 use think\Image; /* * $name为表单上传的name值 * $filePath为为保存在入口文件夹public下面uploads/下面的文件夹名称,没有的话会自动创建 ...

  8. javascript获取时间戳

    时间戳: 时间戳是自 1970 年 1 月 1 日(00:00:00 GMT)以来的秒数.它也被称为 Unix 时间戳(Unix Timestamp). JavaScript 获取当前时间戳: < ...

  9. Oracle Instant Client（即时客户端） 安装与配置

    一.下载 下载地址:http://www.oracle.com/technetwork/database/features/instant-client/index-097480.html 这是Ora ...

  10. 不同网段无法加载ArcGIS Server发布服务解决方法

    问题描述: ArcGIS Server 10发布的服务, (1)在相同网段的Desktop9.3和Engine 9.3程序下可以正常显示, (2)在不同网段Desktop9.3和Engine 9.3程 ...