使用Bootstrap插件datapicker获取时间
引入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获取时间的更多相关文章
- angularjs封装bootstrap官网的时间插件datetimepicker
背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...
- Bootstrap 分页插件 ajax获取数据显示
Bootstrap 分页插件 ajax获取数据显示 标签(空格分隔): bootstrap 文章的内容是使用bootstrap-paginator进行分页,使用ajax获取后台数据.渲染. 1. 版本 ...
- bootstrap插件学习-bootstrap.dropdown.js
bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...
- js插件---bootstrap插件daterangepicker是什么
js插件---bootstrap插件daterangepicker是什么 一.总结 一句话总结:日期段选择插件,也可选择日期 日期段选择插件,也可选择日期 1.daterangepicker 控件如何 ...
- 20个超棒的jQuery bootstrap 插件
1. Bootstrap File Input Bootstrap3.x 的一个增强版的HTML 5 文件选择控件,可以对图片文件和文本文件进行预览,以及其他功能.该插件增强了这些插件,并且将组件的初 ...
- bootstrap插件学习-bootstrap.modal.js
bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...
- Js:消息弹出框、获取时间区间、时间格式、easyui datebox 自定义校验、表单数据转化json、控制两个日期不能只填一个
(function ($) { $.messageBox = function (message) { $.messager.show({ title:'消息框提示', msg:message, sh ...
- Bootstrap插件概述
前面的话 Bootstrap除了包含丰富的Web组件之外,如下拉菜单.按钮组.导航.分页等,还包括一些JavaScript的插件.插件为 Bootstrap 的组件赋予了“生命”.Bootstrap的 ...
- bootstrap插件的一些常用属性介绍
1.下拉菜单 <div class="dropdown"> <button class="btn btn-default dropdown-toggle ...
随机推荐
- LINQ中的连接(join)用法示例
Linq中连接主要有组连接.内连接.左外连接.交叉连接四种.各个用法如下. 1. 组连接 组连接是与分组查询是一样的.即根据分组得到结果. 如下例,根据publisther分组得到结果. 使用组连接的 ...
- oracle权限赋予
上节讲的创建的software用户能否访问其他用户的表呢 1,创建software用户,密码设置为system create user software identified by system 2, ...
- poj3349 Snowflake Snow Snowflakes【HASH】
Snowflake Snow Snowflakes Time Limit: 4000MS Memory Limit: 65536K Total Submissions: 49991 Accep ...
- 《挑战程序设计竞赛》2.5 最小生成树 POJ3723 3169 1258 2377 2395 AOJ2224(1)
POJ3723 http://poj.org/problem?id=3723 题意 windy要组建一支军队,召集了N个女孩和M个男孩,每个人要付10000RMB,但是如果一个女孩和一个男孩有关系d的 ...
- Oracle HA 之 RAC one node实战
--创建rac one node步骤 安装grid软件,配置grid集群:安装oracle软件:dbca创建rac one node. >试验创建的rac one node数据库信息如下: gl ...
- string unicode utf8 ascii in python and js
http://www.jb51.net/article/62155.htm http://www.cnblogs.com/dkblog/archive/2011/03/02/1980644.html ...
- centos 配置mysql
1.在线安装 1.首先检测一下,mysql之前有没有被安装 命令:rpm -qa | grep mysql 2.删除mysql的命令: rpm -e --nodeps `rpm -qa | grep ...
- JS操作符转化数字
在Node.js源代码里,随处可见使用各种符号处理字符串为数字的.可能由于不同人编写,使用的风格也各有不同. 基本上有下面几种. 将字符串转化为数字 + 将一个数字的字符串转化为数字很简单的一种做法就 ...
- Controller中返回数据总结(ResponseEntity,@ResponseBody,@ResponseStatus)
在传统的开发过程中,我们的控制CONTROLLER层通常需要转向一个JSP视图:但随着WEB2.0相关技术的崛起,我们很多时候只需要返回数据即可,而不是一个JSP页面. ResponseEntity: ...
- [华为]输入n个整数,输出其中最小的k个
链接:https://www.nowcoder.com/questionTerminal/69ef2267aafd4d52b250a272fd27052c来源:牛客网 输入n个整数,输出其中最小的k个 ...