<!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. Linux下source命令详解

    source命令用法 source FileName source命令作用 在当前bash环境下读取并执行FileName中的命令. *注:该命令通常用命令“.”来替代. 使用范例: source f ...

  2. jQuery绑定或删除绑定事件

    <!DOCTYPE html><html lang="en" class="loading"><head> <meta ...

  3. python压缩文件

    #coding=utf-8 #压缩文件 import os,os.path import zipfile #压缩:传路径,文件名 def zip_compression(dirname,zipfile ...

  4. 步步为营-75-Cookie简介

    说明:cookie常用于数据保存 1 使用 //创建cookie Response.cookies["yk"].value ="xyxtl"; //设置过期时间 ...

  5. 史上最简单的SpringCloud教程 | 第四篇:断路器（Hystrix）

    在微服务架构中,根据业务来拆分成一个个的服务,服务与服务之间可以相互调用(RPC),在Spring Cloud可以用RestTemplate+Ribbon和Feign来调用.为了保证其高可用,单个服务 ...

  6. webpack+vue打包之后输出配置文件修改接口文件

    用vue-cli构建的项目通常是采用前后端分离的开发模式,也就是前端与后台完全分离,此时就需要将后台接口地址打包进项目中,but,难道我们只是改个接口地址也要重新打包吗?当然不行了,那就太麻烦了,怎么 ...

  7. SQL Server INSET/UPDATE/DELETE的执行计划

    DML操作符包括增删改查等操作方式. insert into Person.Address (AddressLine1, AddressLine2, City, StateProvinceID, Po ...

  8. office web apps搭建与解决方案

    微软office在线预览解决方案https://view.officeapps.live.com/op/view.aspx?src=http://storage.xuetangx.com/public ...

  9. 关于yum网络版仓库（本地yum仓库的安装配置，如果没网了，做一个局域网内的yum仓库）

    2017-11-13 22:49:48 1:两种方式:   a.每一台机器都配一个本地文件系统上的yum仓库 file:///packege/path/ b.在局域网内部配置一台节点(server-b ...

  10. C# 会话,进程,线程,线程安全

    会话->进程->线程 b/s网站中,每个用户的访问为一次会话,会话中包含CPU为用户在内存中开辟空间存储的会话信息, 如Session,进程,会话拥有一个进程,同一进程下可以拥有多个线程. ...