首先引入

 <%--日历样式--%>
<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 使用的更多相关文章

  1. Bootstap datetimepicker报错TypeError: intermediate value

    Bootstrap datetimepicker有多个版本,官方的链接中,只是datepicker,没有时间的选择,原版的datetimepicker也不再更新,不能用新版的jquery.现在http ...

  2. jQuery DateTimePicker 日期和时间插件

    jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等. 日期选择插件是一个配 ...

  3. jQuery DateTimePicker 日期控件

    在线实例 实例演示 使用方法 <input id="datetimepicker" type="text" > 复制 $('#datetimepic ...

  4. 物联网平台设计心得:DateTimePicker实现选择联动

    所谓的选择联动,就是指,当我DateTimePicker1选择2月4号的时候,我DateTimePicker2只能选择2月4号和2月5号两天,当然你可以自行规定要选择的日期.这在一些图表查询条件里面是 ...

  5. 在asp.net mvc4项目里bootstrap datetimepicker控件的使用

    前段时间写了一篇关于调用阿里大于的短信接口来开发例会短信群发通知功能的文章http://www.cnblogs.com/zhouyuangan/p/apicall_1.html,其中的例会时间是需求中 ...

  6. DateTimePicker如何与Delphi自带Style同步

    Delphi 的 DateTimePicker 组件有一个CalColors属性,可以设置 DropDown 打开的日历节目的风格.但如果不使用 Delphi 自带的 Style,在这里设置属性看不到 ...

  7. 一款基于bootstrap的datetimepicker

    <!DOCTYPE HTML> <html> <head> <link href="http://netdna.bootstrapcdn.com/t ...

  8. datetimepicker一个不错的日历android特效

    datetimepicker一个不错的日历效,选中和选择日历效果都很不错, 实用的时候直接可以把datetimepicker-library这个引入到项目,调用的地方在实现 TimePickerDia ...

  9. 注意:DateTimePicker.Text不靠谱

    这鸟属性把我害苦过,特此敬告一下大家.具体表现在: 获取时:在DateTimePicker.ValueChanged事件中,获取到的Text有可能是string.Empty!!!,特别当ValueCh ...

  10. web 前端常用组件【04】Datetimepicker 和 Lodop

    web项目中日期选择器和打印这两个功能是非常常见,将使用过的日期和打印控件,在这里总结归纳,为方便后面使用. 1.Datetimepicker a.官方API:http://www.bootcss.c ...

随机推荐

  1. JVM内存简单总结

    根据自己的认识,简单总结下Java中的数据存储及内存分析. Java中的内存大致可以分为三块:栈内存.堆内存.方法区内存,看图说话. 1).栈 栈(stack):栈是限定仅在表头进行插入和删除操作的线 ...

  2. 【Linux】-- 在linux上安装mysql及基本操作

    1.MySQL的安装 1.删除mariadb数据库 yum remove mariadb-libs.x86_64 CentOS7默认安装mariadb数据库,所以要先删除 2.下载mysql源 进入m ...

  3. Python数据分析基础教程

    Python数据分析基础教程(第2版)(高清版)PDF 百度网盘 链接:https://pan.baidu.com/s/1_FsReTBCaL_PzKhM0o6l0g 提取码:nkhw 复制这段内容后 ...

  4. XVIII Open Cup named after E.V. Pankratiev. GP of Urals

    A. Nutella’s Life 斜率优化DP显然,CDQ分治后按$a$排序建线段树,每层维护凸包,查询时不断将队首弹出即可. 时间复杂度$O(n\log^2n)$. #include<cst ...

  5. 8、vue路由跳转 params与query 路由传参

    params与query router文件下index.js里面,是这么定义路由的: { path: '/about', name: 'About', component: About } 用quer ...

  6. elasticsearch之分词插件使用

    elasticsearch对英文会拆成单个单词,对中文会拆分成单个字.下面来看看是不是这样. 首先测试一下英文: GET /blog/_analyze { "text": &quo ...

  7. ST表 || RMQ问题 || BZOJ 1699: [Usaco2007 Jan]Balanced Lineup排队 || Luogu P2880 [USACO07JAN]平衡的阵容Balanced Lineup

    题面:P2880 [USACO07JAN]平衡的阵容Balanced Lineup 题解: ST表板子 代码: #include<cstdio> #include<cstring&g ...

  8. ListView添加图片文字项

    1)listview 控件 结合 imagelist 控件 实现类似效果. 2)添加 imagelist 控件 images 属性,点击后面的... 添加相应图片. 3)点listview,查看其属性 ...

  9. AIROBOT系统 之 踏浪而来

    缘由 为什么要做AIROBOT?其实自从我知道智能家居这个领域之后,就一直想打造一个自己的智能家居控制平台,算是我的一个梦.最开始的项目还是在安居客当时工作的时候做的,项目地址:https://git ...

  10. VUE-009-页面打开时初始化配置项内容

    网页开发过程中,尤其是在表单开发过程中,不可避免的会有各种各样的基础数据需要展示,供用户使用.例如,大家在办理信用卡时,经常需要填写各种表单数据,其中:性别(男.女).学历(高中及以下.大专.本科.研 ...