首先引入
1 <%--日歷樣式--%> 2 <link rel="stylesheet" type="text/css" href="<%=basePath%>common/css/jquery.datetimepicker.css"/>
1 <%--日歷選擇控件--%> 2 <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 />
此時標簽也無法使用,
解決方法
1 $("#id").datetimepicker({ 2 onGenerate:function( ct ){ 3 $(this).find('.xdsoft_date').toggleClass('xdsoft_disabled'); 4 }, 5 timepicker:false, 6 format:'Y-m-d', 7 formatDate:'Y-m-d' 8 9 });
此時標簽為
修改樣式
因為所用前端ace框架對 input > readonly 設置了強制樣式
所以 使用 高一等級 選擇器 設置強制樣式
1 <style> 2 #id{ 3 background: #ffffff !important; 4 } 5 </style>
代碼封裝,將常用的日期格式封裝
1 /* 2 dateTimePick (elem , flag) 3 elem 對象 4 flag 對象是否只讀 , 5 * */ 6 var dateTimePick = function(elem , flag){ 7 $(elem).datetimepicker({ 8 onGenerate:function( ct ){ 9 if (flag) 10 $(this).find('.xdsoft_date').toggleClass('xdsoft_disabled'); 11 }, 12 timepicker:false, 13 format: 'yyyy-mm-dd hh:ii', 14 }); 15 }; 16 var datePick = function(elem , flag){ 17 $(elem).datetimepicker({ 18 onGenerate:function( ct ){ 19 if (flag) 20 $(this).find('.xdsoft_date').toggleClass('xdsoft_disabled'); 21 }, 22 timepicker:false, 23 format:'Y-m-d', 24 formatDate:'Y-m-d' 25 26 }); 27 }; 28 var dateMonthPick = function(elem , flag){ 29 $(elem).datetimepicker({ 30 onGenerate:function( ct ){ 31 if (flag) 32 $(this).find('.xdsoft_date').toggleClass('xdsoft_disabled'); 33 }, 34 timepicker:false, 35 format:'Y-m', 36 formatDate:'Y-m' 37 38 }); 39 }; 40 /*設置中文*/ 41 $.datetimepicker.setLocale('zh');
調用
1 // 正常調用 2 datePick($("#id") ); 3 4 // 當標簽添加只讀時調用 5 datePick($("#id") , true);
最終效果
