datetimepicker设置默认值:简单好用的js日历插件
datetimepicker设置默认值:简单好用的js日历插件config.js 语言和皮肤配置文件 无需引入(4.8以后合并入WdatePicker.js)WdatePicker.js 配置文件 在调用的地方仅需使用该文件 可多个共存 以xx_WdatePicker.js方式命名My97DatePicker目录是一个整体 不可破坏里面的目录结构 也不可对里面的文件改名 可以改目录名My97DatePicker.htm是必须文件 不可删除(4.8以后不存在此文件)各目录及文件的用途:
一. 简介
1. 简介
目前的版本是:4.8
2. 注意事项
-
My97DatePicker目录是一个整体 不可破坏里面的目录结构 也不可对里面的文件改名 可以改目录名
-
My97DatePicker.htm是必须文件 不可删除(4.8以后不存在此文件)
-
各目录及文件的用途:
WdatePicker.js 配置文件 在调用的地方仅需使用该文件 可多个共存 以xx_WdatePicker.js方式命名
config.js 语言和皮肤配置文件 无需引入(4.8以后合并入WdatePicker.js)
calendar.js 日期库主文件 无需引入
My97DatePicker.htm 临时页面文件 不可删除(4.8以后不存在此文件)
目录lang 存放语言文件 你可以根据需要清理或添加语言文件
目录skin 存放皮肤的相关文件 你可以根据需要清理或添加皮肤文件包
-
当WdatePicker.js里的属性:$wdate=true时 在input里加上class="Wdate"就会在选择框右边出现日期图标 如果您不喜欢这个样式 可以把class="Wdate"去掉 另外也可以通过修改skin目录下的WdatePicker.css文件来修改样式
3. 支持的浏览器
IE 6.0 Firefox 2.0 Chrome Opera 9.5 Safari 3.0
二. 功能及示例
支持多种调用模式
除了支持常规在input单击或获得焦点调用外 还支持使用其他的元素如:<img><div>等触发WdatePicker函数来调用弹出日期框
下拉 输入 导航选择日期
1. 通过导航图标选择
2. 直接使用键盘输入数字
3. 直接从弹出的下拉框中选择
另:年份输入框有智能提示功能 当用户连续点击同一个导航按钮5次时 会自动弹出年份下拉框
3.支持周显示
可以通过配置isShowWeek属性决定是否限制周 并且在返回日期的时候还可以通过自带的自定义事件和API函数返回选择的周
4.只读开关 高亮周末功能
设置readOnly属性 true 或 false 可指定日期框是否只读
设置highLineWeekDay属性 ture 或 false 可指定是否高亮周末
5.操作按钮自定义
清空按钮和今天按钮 可以根据需要进行自定义 它们分别对应 isShowClear 和 isShowToday 默认值都是true
6.自动选择显示位置
当控件处在页面边界时 它会自动选择显示的位置 所以没有必要担心弹出框会被页面边界遮住的问题了.
7.自定义弹出位置
当控件处在页面边界时 它会自动选择显示的位置.此外你还可以使用position参数对弹出位置做调整.
8.自定义星期的第一天(4.6新增)
各个国家的习惯不同 有些喜欢以星期日作为第一天 有些以星期一作为第一天.
相关属性:firstDayOfWeek: 可设置 0 - 6 的任意一个数字 0:星期日 1:星期一 以此类推
还有一点就是格式问题了,My97DatePicker支持自定义格式,yMdHmswW分别代表年月日时分秒星期周 你可以任意组合这些元素来自定义你个性化的日期格式.
还有一点最最重要的是,这个插件使用非常简单,只要先引入My97DatePicker/WdatePicker.js,就可以直接用在html中了,我以年月日格式做示例:
<input type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" class="Wdate" />
小伙伴们快去试试吧。