my97DatePicker

1,219 阅读2分钟

一、支持浏览器

IE 6.0+ , Firefox 2.0+ , Chrome, Opera 9.5+ , Safari 3.0+

二、使用

使用时引入WdatePicker.js文件

1、日期图标样式

WdatePicker.js中$wdate=true时,只需在input标签中加class='Wdate',就会在右侧出现默认样式。 可以通过WdatePicker.css来修改默认样式

2、调用模式(支持多种容器)、平面显示

在input、div、img标签中通过获取焦点或点击事件触发WdatePicker函数

通过el属性将日期的值传递给textarea、div、span等带有innerHTML属性的标签

1、输入框触发
<input type="text" onfocus="wdatePicker()"/>
2、图片触发
<input id='datePicker' type='text'>
<img src='images/date.jpg' onclick='wdatePicker({el:datePicker})' align='absmiddle'>

align='absmiddle'juejin.cn/post/684490…

3、平面显示
<div id='datePicker'></div>
<script>
    WdatePicker({eCont:'datePicker'.onPicked:function(dp){alert('你选择的日期是:'+dp.cal.getDateStr()}})
</script>

3、readOnly

readOnly:true 表示日期只读,不可写

4、hignLineWeekDay

hignLineWeekDay:true 表示周末高亮

5、清空、今天、确认按钮

清空按钮 isShowClear: true

今天按钮 isShowToday: true

确认按钮 isShowOk: true

?指定是否显示其他月的日期 isShowOthers: true

6、显示位置

当处在边界时,会自动选择位置,无需担心被页面边界遮住问题。

自定义弹出框位置

position:{left:100,top:100}

7、自定义星期的第一天

firstDayOfWeek 0-6,默认为0

0:星期日,1L:星期一

8、获取年月日、周

dateFmt:'yyyy-MM-dd HH:mm:ss'

dateFmt:'yyyy年MM月dd日 HH:mm:ss'

onPicked:function(){
    $dp.$('id_1').val=$dp.cal.getP('W','W');
    $dp.$('id_2').val=$dp.cal.getP('WW','WW');
    $dp.$('id').val=$dp.cal.getP('y')$dp.cal.getP('WW','WW');
}

9、起始日期

1、日期框为空时,使用1994-07-23作为起始日期
WDatePicker({startDate:'1994-07-23'})
2、无论日期框为何值,都使用1994-07-23作为起始日期
WDatePicker({startDate:'1994-07-23',alwaysUserStartDate:true})

注:起始日期必须与 realDateFmt 和 realTimeFmt 一致而不是与 dateFmt 一致

计算机可识别的日期格式
realDateFmt:yyyy-MM-dd
realTimeFmt:HH-mm-ss
realFullFmt:%Date %Time
WDatePicker({startDate:'%y-%M-01 00:00:00'})
WDatePicker({startDate:'%y-%M-%d 00:00:00'})
WDatePicker({startDate:'%y-%M-%d HH:mm:ss'})

10、自定义日期格式

y:显示年份中低位的两位数
yy:显示年份两位数,前面补零
yyy:显示年份三位数,前面补零
yyyy:显示年份四位数

M:显示1-12
MM:显示01-12
MMM:显示英文缩写
MMMM:显示英文全称

d:显示1-31
dd:显示01-31

H:显示0-23
HH:显示00-23

m:显示0-59
mm:显示00-59

s:显示0-59
ss:显示00-59

w:显示0-6,0代表星期天,6代表星期六
D:显示星期英文缩写
DD:显示星期英文全称

W:显示周数1-53
WW:显示周数01-53

11、纠错模式设置

errDealMode

3种模式

0 - 提示 (弹窗提示)
1 - 自动纠错 
2 - 标记

12、autoPickDate

false:点日期的时候不自动输入,而是要通过确定才能输入
true:即点击日期即可返回日期值
null:如果有时间置为false 否则置为true(推荐使用)