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);

最终效果