快捷搜索:  汽车  科技

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. 通过导航图标选择

  • datetimepicker设置默认值:简单好用的js日历插件(1)

    2. 直接使用键盘输入数字

    datetimepicker设置默认值:简单好用的js日历插件(2)

    3. 直接从弹出的下拉框中选择

    datetimepicker设置默认值:简单好用的js日历插件(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:星期一 以此类推

    datetimepicker设置默认值:简单好用的js日历插件(4)

    还有一点就是格式问题了,My97DatePicker支持自定义格式,yMdHmswW分别代表年月日时分秒星期周 你可以任意组合这些元素来自定义你个性化的日期格式.

    datetimepicker设置默认值:简单好用的js日历插件(5)

    datetimepicker设置默认值:简单好用的js日历插件(6)

    还有一点最最重要的是,这个插件使用非常简单,只要先引入My97DatePicker/WdatePicker.js,就可以直接用在html中了,我以年月日格式做示例:

    <input type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" class="Wdate" />

    小伙伴们快去试试吧。

    猜您喜欢: