我要评论my97datepicker是一款非常灵活好用的日期控件。使用非常简单。
1、下载my97datepicker组件包
下载地址：
2、在页面中引入该组件js文件：
<script type="text/javascript" src="my97datepicker/wdatepicker.js"></script>
3、例子
<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<head>
<title>my97datepicker日期控件使用</title>
</head>
<body>
<center>
<h2>my97datepicker日期控件的使用</h2>
</center>
基本用法：
<input id="" class="wdate" onfocus="wdatepicker({datefmt:'yyyy-mm-dd',readonly:true})" /><br><br>
只能选择今天以前的日期：
<input id="" class="wdate" onfocus="wdatepicker({readonly:true,maxdate:'%y-%m-%d'})" /><br><br>
使用运算表达式 只能选择 20小时前 至 30小时后 的日期
<input id="" class="wdate" onclick="wdatepicker({datefmt:'yyyy-mm-dd hh:mm',mindate:'%y-%m-%d {%h-20}:%m:%s',maxdate:'%y-%m-%d {%h+30}:%m:%s'})" /><br><br>
开始，结束日期：<!-- $dp.$ 相当于 document.getelementbyid 函数. -->
<input id="sdate" class="wdate" onfocus="wdatepicker({datefmt:'yyyy-mm-dd',readonly:true,maxdate:'#f{$dp.$d(\'edate\')}'})" />
-
<input id="edate" class="wdate" onfocus="wdatepicker({datefmt:'yyyy-mm-dd',readonly:true,mindate:'#f{$dp.$d(\'sdate\')}',startdate:'#f{$dp.$d(\'sdate\',{d:+1})}'})" /><br><br>
</body>
<script type="text/javascript" src="/js/my97datepicker/wdatepicker.js"></script>
</html>
如需修改配置信息，只需wdatepicker({datefmt:'yyyy-mm-dd',readonly:true,maxdate:'#f{$dp.$d(\'edate\')}'})" 加上相关配置信息即可
4、常用的配置信息。
配置信息主要在onfocus="wdatepicker({datefmt:'yyyy-mm-dd',readonly:true})" 的wdatepicker 方法的 { } 对象中定义。
常用的配置信息在 wdatepicker.js 文件中定义了。
var $dp,wdatepicker;(function(){var _={
$wdate:true,
$dppath:"",
$crossframe:true,
doublecalendar:false, //是否双月日历
autoupdateonchanged:false,
position:{}, //位置如：position:{left:100,top:50}
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, //当日期框无论是何值,始终使用 startdate 做为起始日期
yearoffset:1911,
firstdayofweek:0, //自定义星期的第一天
isshowweek:false, //是否显示周
highlineweekday:true, //高亮周日
isshowclear:true, //是否显示清空
isshowtoday:true, //是否显示今天
isshowok:true, //是否显示ok
isshowothers:true,
readonly:false, //是否只读
qsenabled:true,
errdealmode:0, //自动纠错功能
//0 在输入错误日期时,会先提示
//1 在输入错误日期时,自动恢复前一次正确的值
//2 在输入错误日期时,不做提示和更改,只是做一个标记,但此时日期框不会马上隐藏
autopickdate:null, //点两次才能选择日期的原因
//为false时 点日期的时候不自动输入,而是要通过确定才能输入
//为true时 即点击日期即可返回日期值
//为null时(推荐使用) 如果有时间置为false 否则置为true
specialdates:null, //特殊日期
specialdays:null, //特殊天
disableddates:null, //无效日期 如：disableddates:['5$']
disableddays:null, //无效天 如：disableddays:[6]
opposite:false, //有效日期
到此这篇关于js日期控件my97datepicker基本用法的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持代码网。
发表评论