datetimepicker 使用
首先引入
<%--日历样式--%>
<link rel="stylesheet" type="text/css" href="<%=basePath%>common/css/jquery.datetimepicker.css"/>
<%--日历选择控件--%>
<script src="<%=basePath%>common/datetimepicker/jquery.datetimepicker.full.min.js"></script>
链接:http://pan.baidu.com/s/1slAYHpb 密码:k5kn
使用
$("#id").datetimepicker({
timepicker:false,
format:'Y-m-d',
formatDate:'Y-m-d'
});
一般使用时标签添加 readonly 属性 防止用户输入
<input type="text" id="datetimepicker8" readonly />
此时标签也无法使用,
解决方法
$("#id").datetimepicker({
onGenerate:function( ct ){
$(this).find('.xdsoft_date').toggleClass('xdsoft_disabled');
},
timepicker:false,
format:'Y-m-d',
formatDate:'Y-m-d' });
此时标签为
修改样式
因为所用前端ace框架对 input > readonly 设置了强制样式
所以 使用 高一等级 选择器 设置强制样式
<style>
#id{
background: #ffffff !important;
}
</style>
代码封装,将常用的日期格式封装
/*
dateTimePick (elem , flag)
elem 对象
flag 对象是否只读 ,
* */
var dateTimePick = function(elem , flag){
$(elem).datetimepicker({
onGenerate:function( ct ){
if (flag)
$(this).find('.xdsoft_date').toggleClass('xdsoft_disabled');
},
timepicker:false,
format: 'yyyy-mm-dd hh:ii',
});
};
var datePick = function(elem , flag){
$(elem).datetimepicker({
onGenerate:function( ct ){
if (flag)
$(this).find('.xdsoft_date').toggleClass('xdsoft_disabled');
},
timepicker:false,
format:'Y-m-d',
formatDate:'Y-m-d' });
};
var dateMonthPick = function(elem , flag){
$(elem).datetimepicker({
onGenerate:function( ct ){
if (flag)
$(this).find('.xdsoft_date').toggleClass('xdsoft_disabled');
},
timepicker:false,
format:'Y-m',
formatDate:'Y-m' });
};
/*设置中文*/
$.datetimepicker.setLocale('zh');
调用
// 正常调用
datePick($("#id") ); // 当标签添加只读时调用
datePick($("#id") , true);
最终效果
datetimepicker 使用的更多相关文章
- Bootstap datetimepicker报错TypeError: intermediate value
Bootstrap datetimepicker有多个版本,官方的链接中,只是datepicker,没有时间的选择,原版的datetimepicker也不再更新,不能用新版的jquery.现在http ...
- jQuery DateTimePicker 日期和时间插件
jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等. 日期选择插件是一个配 ...
- jQuery DateTimePicker 日期控件
在线实例 实例演示 使用方法 <input id="datetimepicker" type="text" > 复制 $('#datetimepic ...
- 物联网平台设计心得:DateTimePicker实现选择联动
所谓的选择联动,就是指,当我DateTimePicker1选择2月4号的时候,我DateTimePicker2只能选择2月4号和2月5号两天,当然你可以自行规定要选择的日期.这在一些图表查询条件里面是 ...
- 在asp.net mvc4项目里bootstrap datetimepicker控件的使用
前段时间写了一篇关于调用阿里大于的短信接口来开发例会短信群发通知功能的文章http://www.cnblogs.com/zhouyuangan/p/apicall_1.html,其中的例会时间是需求中 ...
- DateTimePicker如何与Delphi自带Style同步
Delphi 的 DateTimePicker 组件有一个CalColors属性,可以设置 DropDown 打开的日历节目的风格.但如果不使用 Delphi 自带的 Style,在这里设置属性看不到 ...
- 一款基于bootstrap的datetimepicker
<!DOCTYPE HTML> <html> <head> <link href="http://netdna.bootstrapcdn.com/t ...
- datetimepicker一个不错的日历android特效
datetimepicker一个不错的日历效,选中和选择日历效果都很不错, 实用的时候直接可以把datetimepicker-library这个引入到项目,调用的地方在实现 TimePickerDia ...
- 注意:DateTimePicker.Text不靠谱
这鸟属性把我害苦过,特此敬告一下大家.具体表现在: 获取时:在DateTimePicker.ValueChanged事件中,获取到的Text有可能是string.Empty!!!,特别当ValueCh ...
- web 前端常用组件【04】Datetimepicker 和 Lodop
web项目中日期选择器和打印这两个功能是非常常见,将使用过的日期和打印控件,在这里总结归纳,为方便后面使用. 1.Datetimepicker a.官方API:http://www.bootcss.c ...
随机推荐
- python接口测试-认识GET请求
前边用工具也实现了接口自动化,但是后来很多的时候维护成本有点高.而且灵活上还是有所欠缺的. 于是,自己开始摸索学习敲码.应该有很多不对的地方或者可以优化的望各位大神勿喷,同时欢迎各位大神评论区发表自己 ...
- 2017-11-4—稳态和暂态/瞬态(对运放积分电路的思考)[待仿真]
先直接截图了,暂态或者说瞬态都是暂时的状态,是从一个稳定态到另一个稳定态的过程. 之所以要了解这个概念是因为对于使用运放搭建的模拟PID有很多的疑惑,比如负反馈没有电阻满不满足"虚短&quo ...
- Git服务器安装详解及安装遇到问题解决方案
git是一个不错的版本管理的工具.现在自己在搞一个简单的应用程序开发,想使用git来进行管理.在Google了配置文档后,还是受了N多的挫折.某些文档质量不高,浪费了好多时间...... 好,切入正题 ...
- ubuntu重复登录问题
第一次遇到: 昨天好不容易装好了驱动,紧接着装了CUDA,cuDNN,Anaconda,VSCode等等.然后安装pytorch的时候遇到了下载的问题,后来也算搞定了.但是在更换了显示器后重启(好像是 ...
- maven入门概念及使用
Maven 一.Maven概念 1.maven是什么:Maven 是一个项目管理工具.它负责管理项目开发过程中的几乎所有的东西. 版本.构建.输出物管理.依赖关系.文档和构建结果.项目关系.移植性管理 ...
- getsockopt和setsockopt函数
在Unix网络编程中通常用到getsockopt和setsockopt两个函数来获取和设置套接口的选项. getsockopt()函数用于获取任意类型.任意状态套接口的选项当前值,并把结果存入optv ...
- 保护模式.vbs
Sub Main Dim cnt Dim delay delay = 10000 For cnt = 0 To 80 crt.screen.Send "interface optical-r ...
- docsis cm 上线过程(bigwhite)
扫描与同步下行(SYNC消息) 获取上行参数(UCD消息.MAP消息) 通过测距完成时间偏移等的调整(RNG消息) 设备类型鉴定(可选,DCI消息) 建立IP通道(DHCP) 同步系统时间(TOD ...
- extundelete数据恢复
需要安装的依赖包: 1. e2fsprogs软件包已安装2. e2fsprogs-libs软件包已安装3. e2fsprogs-devel软件包已安装4. gcc软件包已安装5. gcc-c++ 软件 ...
- 透过实现小型打包工具理解webpack
面试经常有问到 webpack,偶遇一篇比较有实用价值的且有利于理解的文章,现总结如下: 本篇文章中要实现的这个迷你打包工具,它主要能实现如下两个功能: ①.将 ES6 转换成 ES5: ②.支持在 ...