引入css和js

<link rel="stylesheet" href="/${appName}/commons/css/datapicker/datepicker3.css" type="text/css"></link>
<script type="text/javascript" src="/${appName}/commons/js/datapicker/bootstrap-datepicker.js"></script>

Html及Js

<span style="position: relative; z-index: 9999;">   <!--当在model弹框中需要加此span-->
<input type="text" value="" class="form-control" name="time" id="time_add" tabindex="4" />
</span> /*显示改为中文*/
$.fn.datepicker.dates['cn'] = { //切换为中文显示
days: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
daysShort: ["日", "一", "二", "三", "四", "五", "六", "七"],
daysMin: ["日", "一", "二", "三", "四", "五", "六", "七"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
today: "今天",
clear: "清除"
};
/*初始化时间控件*/
$('#time_add').datepicker({
autoclose: true, //自动关闭
beforeShowDay: $.noop, //在显示日期之前调用的函数
calendarWeeks: false, //是否显示今年是第几周
clearBtn: false, //显示清除按钮
daysOfWeekDisabled: [], //星期几不可选
endDate: Infinity, //日历结束日期
forceParse: true, //是否强制转换不符合格式的字符串
format: 'yyyy-mm-dd', //日期格式
keyboardNavigation: true, //是否显示箭头导航
language: 'cn', //语言
orientation: "auto", //方向
rtl: false,
startDate: -Infinity, //日历开始日期
startView: 0, //开始显示
todayBtn: false, //今天按钮
todayHighlight: false, //今天高亮
weekStart: 0 //星期几是开始
   startView: 'months', //开始视图 视图类 1代表years 2代表months 默认值0代表day
   maxViewMode:'years', //最大视图
   minViewMode:'months', //最小视图
});

视图部分源码

使用Bootstrap插件datapicker获取时间的更多相关文章

  1. angularjs封装bootstrap官网的时间插件datetimepicker

    背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...

  2. Bootstrap 分页插件 ajax获取数据显示

    Bootstrap 分页插件 ajax获取数据显示 标签(空格分隔): bootstrap 文章的内容是使用bootstrap-paginator进行分页,使用ajax获取后台数据.渲染. 1. 版本 ...

  3. bootstrap插件学习-bootstrap.dropdown.js

    bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...

  4. js插件---bootstrap插件daterangepicker是什么

    js插件---bootstrap插件daterangepicker是什么 一.总结 一句话总结:日期段选择插件,也可选择日期 日期段选择插件,也可选择日期 1.daterangepicker 控件如何 ...

  5. 20个超棒的jQuery bootstrap 插件

    1. Bootstrap File Input Bootstrap3.x 的一个增强版的HTML 5 文件选择控件,可以对图片文件和文本文件进行预览,以及其他功能.该插件增强了这些插件,并且将组件的初 ...

  6. bootstrap插件学习-bootstrap.modal.js

    bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...

  7. Js:消息弹出框、获取时间区间、时间格式、easyui datebox 自定义校验、表单数据转化json、控制两个日期不能只填一个

    (function ($) { $.messageBox = function (message) { $.messager.show({ title:'消息框提示', msg:message, sh ...

  8. Bootstrap插件概述

    前面的话 Bootstrap除了包含丰富的Web组件之外,如下拉菜单.按钮组.导航.分页等,还包括一些JavaScript的插件.插件为 Bootstrap 的组件赋予了“生命”.Bootstrap的 ...

  9. bootstrap插件的一些常用属性介绍

    1.下拉菜单 <div class="dropdown"> <button class="btn btn-default dropdown-toggle ...

随机推荐

  1. Cisco设备开启telnet登录

    思科设备怎么开启telnet登录 configuration line vty 0 4SW1(config-line)#transp input telne

  2. ubuntu安装conda

    https://blog.csdn.net/menghuanbeike/article/details/79138651 你需要前往Anaconda的官网看下目前的下载地址: https://www. ...

  3. linux中gdb的可视化调试

    今天get到一个在linux下gdb调试程序的技巧和大家分享一下!平时我们利用gcc进行编程,进行程序调试时,观察程序的跳转等不是这么直观.都是入下的界面! 但是如果我们在编译连接时上加了-g命令生成 ...

  4. mysql 数据操作 多表查询 子查询 带比较运算符的子查询

    带比较运算符的子查询 #比较运算符:=.!=.>.>=.<.<=.<> #查询大于所有人平均年龄的员工名与年龄 思路 先拿到所有人的平均年龄然后 再用另外一条sql ...

  5. centos LAMP第四部分mysql操作 忘记root密码 skip-innodb 配置慢查询日志 mysql常用操作 mysql常用操作 mysql备份与恢复 第二十二节课

    centos  LAMP第四部分mysql操作  忘记root密码  skip-innodb 配置慢查询日志 mysql常用操作  mysql常用操作 mysql备份与恢复   第二十二节课 mysq ...

  6. go-006-运算符

    运算符用于在程序运行时执行数学或逻辑运算. Go 语言内置的运算符有: 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 其他运算符 算术运算符 下表列出了所有Go语言的算术运算符.假定 A ...

  7. Windows7系统运行hadoop报Failed to locate the winutils binary in the hadoop binary path错误

    程序运行的过程中,报Failed to locate the winutils binary in the hadoop binary path  Java.io.IOException: Could ...

  8. HDU1698:Just a Hook(线段树区域更新模板题)

    http://acm.hdu.edu.cn/showproblem.php?pid=1698 Problem Description In the game of DotA, Pudge’s meat ...

  9. HDU5124:lines(线段树+离散化)或(离散化思想)

    http://acm.hdu.edu.cn/showproblem.php?pid=5124 Problem Description John has several lines. The lines ...

  10. The adidas NMD Singapore is one of the brands top selling

    Like pointed out, we've two adidas NMD Singapore releases using the first arriving Blue and Black as ...