引入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. js判断移动端和PC端跳转不同页面

    方法一: /* * * 判断PC端与WAP端 */ var mobile_bs = { versions: function() { var u = navigator.userAgent; retu ...

  2. CH1809匹配统计【KMP】

    1809 匹配统计 0x18「基本数据结构」练习 描述 阿轩在纸上写了两个字符串,分别记为A和B.利用在数据结构与算法课上学到的知识,他很容易地求出了“字符串A从任意位置开始的后缀子串”与“字符串B” ...

  3. 验证ip地址

    package site.wangxin520.test; import sun.net.util.IPAddressUtil; public class Test { public static v ...

  4. Jamie's Contact Groups---hdu1669--poj2289(多重匹配+二分)

    题目链接 题意:Jamie有很多联系人,但是很不方便管理,他想把这些联系人分成组,已知这些联系人可以被分到哪个组中去,而且要求每个组的联系人上限最小,即有一整数k,使每个组的联系人数都不大于k,问这个 ...

  5. 双态运维分享之二: 服务型CMDB的消费场景

    近年来,CMDB在IT运维管理中的价值逐步得到认可,使用CMDB的期望值也日益增长.然而,CMDB实施和维护的高成本却一直是建设者们的痛点.那么今天,我们来探讨一下如何通过消费来持续驱动CMDB的逐步 ...

  6. 构造HTTP请求Header实现“伪造来源IP”(转)

    原文:http://zhangxugg-163-com.iteye.com/blog/1663687 构造 HTTP请求 Header 实现“伪造来源 IP ” 在阅读本文前,大家要有一个概念,在实现 ...

  7. IDEA安装以及项目初始化

    首先安装idea: 如果15.0版本安装不上就安装16.0: 点击安装文件以后,一直点下一步就可以了. 安装完成后设置: 如果没有的话,需要点击SDKs,点击+,然后选择电脑上安装的JDK. 接下来创 ...

  8. 查看MySQL锁定情况

    SHOW STATUS LIKE '%Table_locks%' Table_locks_immediate | 105         | Table_locks_waited   | 3      ...

  9. 使WebDev.WebServer.exe 当web服务器

    Vs自带的Visual Studio Development_server非常好用.比XP的IIS强多了. XP的IIS经常报访问数过多. 但是, WebDev.WebServer.exe 有个限制就 ...

  10. java 反射 (一)

    原文地址https://www.zhihu.com/question/24304289   首先我们了解一下JVM,什么是JVM,Java的虚拟机,java之所以能跨平台就是因为这个东西,你可以理解成 ...