📄 main.htm
字号:
</p>
<p>主调函数:onfocus="new WdatePicker(this,<font color="#0000FF">'%Y-%M-%D %h:%m:%s'</font>,<font color="#0000FF">true</font>)" <br />
示例5-2:
<input class="Wdate" type="text" style="width:200px" onfocus="new WdatePicker(this,'%Y-%M-%D %h:%m:%s',true)" value="2000-02-29 01:00:00"/>
</p>
<p> </p>
<p><span class="title"><a name="m28" id="m28"></a><br />
8. 支持自定义时间和日期格式</span><span class="title"><span class="STYLE1">(增强)</span></span></p>
<p><span class="STYLE2">8.1 年月日时分秒</span><br />
主调函数:onfocus="new WdatePicker(this,<font color="#0000FF">'%Y年%M月%D日 %h时%m分%s秒'</font>,<font color="#0000FF">true</font>)" <br />
示例8-1:
<input class="Wdate" type="text" id="textbox2" style="width:300px" onfocus="new WdatePicker(this,'%Y年%M月%D日 %h时%m分%s秒',true)" value=""/>
<br />
那么像这样的文本框我们存入数据库时这么取得实际的日期值呢,别急,用这个函数 <a href="javascript:try{alert(document.getElementById('textbox2').getValue());}catch(e){alert('空值!')}">document.getElementById('textbox2').getValue()</a></p>
<p><span class="STYLE2">8.2 时分秒</span><br />
主调函数:onfocus="new WdatePicker(this,<font color="#0000FF">'%h:%m:%s'</font>,<font color="#0000FF">true,'whyGreen'</font>)" <br />
示例8-2:
<input class="Wdate" type="text" id="text3" onfocus="new WdatePicker(this,'%h:%m:%s',true,'whyGreen')" value=""/>
</p>
<p><span class="STYLE2">8.3 年月</span><br />
主调函数:onfocus="new WdatePicker(this,<font color="#0000FF">'%Y年%M月'</font>,<font color="#0000FF">false</font>,<font color="#0000FF">'whyGreen'</font>)" <br />
示例8-2:
<input class="Wdate" type="text" id="text32" onfocus="new WdatePicker(this,'%Y年%M月',false,'whyGreen')" value=""/>
</p>
<p><span class="STYLE2">8.4 年月日时分</span><br />
主调函数:onfocus="new WdatePicker(this,<font color="#0000FF">'%Y-%M-%D %h:%m'</font>,<font color="#0000FF">true</font>)" <br />
示例8-2:
<input class="Wdate" type="text" id="text322" onfocus="new WdatePicker(this,'%Y-%M-%D %h:%m',true)" value=""/>
</p>
<p> </p>
<p><span class="title"><a name="m29" id="m29"></a><br />
9. 增强的自动纠错功能,纠错处理可设置为3种模式 1.提示(默认) 2.自动纠错 3.标记</span></p>
<p>
您可以 在下面的日期框中<span class="STYLE2">填入一个不合法的日期(如:1997-02-29)</span>,再<span class="STYLE2">尝试离开焦点 </span><br />
示例9-1
<input class="Wdate" name="text" type="text" onfocus="new WdatePicker(this)"/>
</p>
<p>另:超出日期限制范围的日期也被认为是一个不合法的日期<br />
示例9-2的最大日期是2000-1-10 ,如果在下框中填入的日期 大于 2000-1-10(如2000-1-12)也会被认为是不合法的日期 <br />
<input class="Wdate" type="text" onfocus="new WdatePicker(this)" <font color="#FF0000">MAXDATE="2000-1-10"</font>/><br />
示例9-2
<input class="Wdate" type="text" onfocus="new WdatePicker(this)" maxdate="2000-1-10"/>
</p>
<p> </p>
<p><span class="title"><a name="m210" id="m210"></a><br />
10. 完美支持FireFox</span><br />您可以使用FireFox浏览其来浏览此页来查看效果</p>
<p> </p>
<p> </p>
<p><span class="title"><a name="m3" id="m3"></a><br />
三. 配置说明</span></p>
<p>/* 有四个文件可以对控件的默认情况进行配置 */<br />
/* 分别是 <span class="STYLE2">WdatePicker.js</span> <span class="STYLE2">config.js</span> <span class="STYLE2">lang目录下的对应语言文件</span> 和 <span class="STYLE2">skin目录下的WdatePicker.css</span> */</p>
<p><span class="STYLE3">/********************************<a name="m31" id="m31"></a><br />
* 1 WdatePicker.js <br />
********************************/</span><br />
<span class="STYLE3">/* 日期选择框显示位置 0 auto(系统根据页面大小自动选择:默认) 1 上方显示 2 下方显示 */</span><br />
$position = 0;<br />
<span class="STYLE3">/* 程序包的绝对位置 注意,要用/开头 用/结尾 <br />
* 默认为空<br />
* 为空时,程序自动创建<br />
* 例如:程序包在http中的地址为 http://localhost/proName/My97DatePicker/<br />
* 则 $dpPath = '/proName/My97DatePicker/';<br />
*/</span><br />
$dpPath = '';<br />
</p>
<p><span class="STYLE3">/********************************<a name="m32" id="m32"></a><br />
* 2 config.js <br />
********************************/</span><br />
var dpcfg = {};<br />
<span class="STYLE3">/* 默认风格 如果你喜欢whyGreen这个样式,你可以改成whyGreen 另外你还可以自定义自己的样式 */</span><br />
dpcfg.skin = "default"; <br />
<span class="STYLE3">/* 日期格式 %Y %M %D %h %m %s 表示年月日时分秒(注意大小写) */</span><br />
dpcfg.dateFmt = "%Y-%M-%D";<br />
<span class="STYLE3">/* realValue 的日期格式 */</span><br />
dpcfg.realValueShortFmt = "%Y-%M-%D";<br />
dpcfg.realValueLongFmt = "%Y-%M-%D %h:%m:%s";<br />
<span class="STYLE3">/* 默认情况是否显示时间 */</span><br />
dpcfg.showTime = false; <br />
<span class="STYLE3">/* 是否高亮显示 周六 周日 */ </span><br />
dpcfg.highLineWeekDay = true;<br />
<span class="STYLE3">/* 默认的日期范围 */</span><br />
dpcfg.minDate = "1900-1-1";<br />
dpcfg.maxDate = "2099-12-30";<br />
<span class="STYLE3">/* 纠错模式设置 可设置3中模式 0 - 提示 1 - 自动纠错 2 - 标记 */</span><br />
dpcfg.errDealMode = 0;</p>
<p><span class="STYLE3">/********************************<a name="m33" id="m33"></a><br />
* 3 对应的语言文件 这里以 zh-cn.js 为例<br />
********************************/</span><br />
<span class="STYLE3">/* 纠错提示信息,仅当提示提示模式为0时有效 */</span><br />
dpcfg.errAlertMsg = "不合法的日期格式或者日期超出限定范围,需要撤销吗?";<br />
<span class="STYLE3">/* 语言设置 */</span><br />
dpcfg.aWeekStr = ["日","一","二","三","四","五","六"];<br />
dpcfg.aMonStr = ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一","十二"];<br />
dpcfg.clearStr = "清空";<br />
dpcfg.todayStr = "今天";<br />
dpcfg.okStr = "确定";<br />
dpcfg.timeStr = "时间";</p>
<p><span class="STYLE3">/********************************<a name="m34" id="m34"></a><br />
* 4 WdatePicker.css<br />
********************************/</span><br />
<span class="STYLE3">/* 日期框的样式 */ </span><br />
.Wdate{<br />
border:#999 1px solid;<br />
height:18px;<br />
background:url(datePicker.gif) no-repeat right;<br />
}</p>
<p><span class="STYLE3">/* 日期框的值错误时的样式 */ </span><br />
.WdateFmtErr{<br />
font-weight:bold;<br />
color:red;<br />
}</p>
<p> </p>
<p><a name="m4" id="m4"></a><br />
<span class="title">四. 如何使用</span><br />
<br />
1. 在使用该日期控件的文件中加入JS库(<span class="STYLE1">仅这一个文件即可,其他文件会自动引入,请勿删除或改名</span>),
代码如下 <font color="#0000FF"><script language="javascript" type="text/javascript" src="datepicker/WdatePicker.js"></script></font><br />
注:<span class="STYLE1">src="datepicker/WdatePicker.js"</span><font color="#0000FF"> 请根据您的实际情况改变路径 </font></p>
<p>2.加上主调函数 onfocus="new WdatePicker('el','dateFmt','showsTime','skin')"</p>
<p>相信大家已经知道怎么用了,如果还不明白请QQ我:9589876</p>
<p><strong>主调函数的使用方法和说明</strong><br />
<strong>1.主调方法:</strong><br />
onfocus="new WdatePicker('el','dateFmt','showsTime','skin')"<br />
这个是JS库的主调函数:<br />
<font color="#0000FF">el</font>: 表示返回日期的对象或对象名称,提供2种调用方式<br />
<font color="#0000FF">dateFmt</font>: 自定义的日期格式 %Y %M %D %h %m %s 表示年月日时分秒(注意大小写) 默认是%Y-%M-%D<br />
<font color="#0000FF">showsTime</font>: 布尔型变量 true表示带时间选择 默认为false<br />
<font color="#0000FF">skin</font>: 皮肤的名称 本包自带2款皮肤 分别为 default 和 whyGreen<br />
<strong>2.属性(注意大小写,日期格式必须与config.js中的realValueShortFmt一致)</strong><br />
<font color="#0000FF">MINDATE:</font> 日期最小值 格式为: 2000-1-1 或 2000/1/1 默认为:1900-1-1<br />
<font color="#0000FF">MAXDATE:</font> 日期最大值 格式为: 2008-1-1 或 2008/1/1 默认为:2099-12-30<br />
<strong>3 取值的方法</strong><strong>(注意:返回值的格式在 config.js中的 realValueShortFmt realValueLongFmt 中定义)</strong><br />
<font color="#0000FF">getValue():</font> 这个属性用于记录日期框的日期值 通常情况下<font color="#0000FF">getValue()</font>和 日期框的value 属性是一样的,当进行自定义日期格式的时候这2个值就不一样了<br />
例如: 当 格式字符串: %Y年%M月%D日 %h时%m分%s秒 时 日期框中的VALUE是:2000年1月1日 12时00分00秒 而<font color="#0000FF">getValue()</font>值: 2000-1-1 12:00:00<br />
我想通过这个例子应该很清楚了,<font color="#0000FF">2000年1月1日 12时00分00秒</font>对于用户来说是一个很直观的日期,但对于计算机来说是一个不可识别的日期,在用户选择的时候我们可以使用%Y年%M月%D日 %h时%m分%s秒格式化日期给用户一个友好的日期格式,但是在数据存储的时候我们不可能把<font color="#0000FF">2000年1月1日 12时00分00秒</font>直接存入数据库的,<font color="#0000FF">getValue()</font>就是为了解决这个问题而设计的.<br />
<font color="#FF0000">相关的例子请参考上面的特性演示</font></p>
<p> </p>
<p> </p>
<p><span class="title">五. 联系My97</span><span class="STYLE3"><a name="m5" id="m5"></a></span></p>
<p> * 如果您在使用过程中遇到问题,或者有更好的建议<br />
* 欢迎您访问<br />
* BLOG: <a href="http://blog.csdn.net/my97/">http://blog.csdn.net/my97/</a><br />
* QQ: 9589876 <br />
* MAIL: <a href="mailto:smallcarrot@163.com">smallcarrot@163.com</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -