关于My97datePicker中readonly的问题

来源：互联网发布：委托网络国债基金产品编辑：程序博客网时间：2024/06/05 10:36

关于My97datePicker中readonly的问题

今天在写代码的时候遇到了一个需求是要把页面上的一个字段传到另一个页面上去，由于项目采用的是jQuery easy UI框架，
本以为这里时间控件是采用jQuery easy UI的DateBox插件（(。・・)ノ），找了好久才发现是用的My97datePicker （Ｏ(≧口≦)Ｏ），回归到正题上来，我现在需要的是得到这里的时间，而该页面由于业务逻辑问题是需要变为只读状态的。大家都知道input标签中的disabled属性是可以禁用输入框的，而项目中我们运用的是ThinkPHP的框架，在后台需要获取到view层中的数据，注意！disabled禁用的输入框是不能获取到数据的。

文字太多，先上代码

基本语法

 <!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="WdatePicker.js"></script>//这个是datepicker的配置文件    <link rel="stylesheet" href="开发包/skin/WdatePicker.css"/>//样式文件</head><body><input type="text" class="Wdate" onclick="WdatePicker()"/></body></html>

//先不要去看判断的逻辑，这里class中的easyui-validatebox是easy ui中的插件表示的是校验功能，后面的Wdate则是datePicker插件功能的引入<tr>                        <td><label for="" style="width: 70px; text-align: right;"><em>*</em> 推送时间：</label></td>                        <td>                        <if condition="$type eq 'view'">                            <input name="smessage_sendtime" value="{$data['smessage_sendtime']}" id="smessage_sendtime1" data-options="required:true" style="color:gray" class="easyui-validatebox Wdate" onclick="$('#smessage_sendtime1').attr('readonly','true')">                        </if>//最终我发现了即使把onclick的内容设置为空，效果依然能够实现,把WdatePicker去掉后，再重新设置readonly就可以了。                                  <if condition="$type neq 'view'">                            <input name="smessage_sendtime" value="{$data['smessage_sendtime']}" id="smessage_sendtime2" data-options="required:true"  class="easyui-validatebox Wdate" onclick="WdatePicker({readOnly:true,dateFmt:'yyyy-MM-dd HH:mm:00',minDate:'%y-%M-%d %H:%m:00',autoPickDate:true})" title="" style="width: 200px;">                        </if>   //与正常input标签的readonly属性不同，这里的readonly是指把时间输入框的键盘输入给禁用了，但是并不影响点击功能.                        </td>                    </tr>

为什么这么做可以，因为在引用WdatePicker.js这个文件的时候内部就有了默认属性了

看下代码

/* * My97 DatePicker 4.8 Beta4 * License: http://www.my97.net/dp/license.asp */var $dp,WdatePicker;(function(){var $={$langList:[ {name:"en",charset:"UTF-8"}, {name:"zh-cn",charset:"gb2312"}, {name:"zh-tw",charset:"GBK"}],$skinList:[ {name:"default",charset:"gb2312"}, {name:"whyGreen",charset:"gb2312"}, {name:"blue",charset:"gb2312"}, {name:"green",charset:"gb2312"}, {name:"simple",charset:"gb2312"}, {name:"ext",charset:"gb2312"}, {name:"blueFresh",charset:"gb2312"}, {name:"twoer",charset:"gb2312"}, {name:"YcloudRed",charset:"gb2312"}],$wdate:true,$crossFrame:true,$preLoad:false,$dpPath:"",doubleCalendar:false,enableKeyboard:true,enableInputMask:true,autoUpdateOnChanged:null,weekMethod:"ISO8601",position:{},lang:"auto",skin:"default",dateFmt:"yyyy-MM-dd",realDateFmt:"yyyy-MM-dd",realTimeFmt:"HH:mm:ss",realFullFmt:"%Date %Time",minDate:"1900-01-01 00:00:00",maxDate:"2099-12-31 23:59:59",startDate:"",alwaysUseStartDate:false,yearOffset:1911,firstDayOfWeek:0,isShowWeek:false,highLineWeekDay:true,isShowClear:true,isShowToday:true,isShowOK:true,isShowOthers:true,readOnly:true,errDealMode:0,autoPickDate:null,qsEnabled:true,autoShowQS:false,opposite:false,hmsMenuCfg:{H:[1,6],m:[5,6],s:[15,4]},opposite:false,

在网上搜了好久才找到解决办法，自己对于这个插件也是一个初学者，希望能够通过自己的一个例子能够帮到大家！^_^

0 0