My97 DatePicker-WdatePicker日期插件下载，配置使用与示例和00:00:00与23：59：59

最新推荐文章于 2024-09-13 16:54:19 发布

置顶衬衫与狗的幽默

最新推荐文章于 2024-09-13 16:54:19 发布

阅读量711

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：日期插件 WDatePicker My97DatePicker 前端零时零点零分与23时59分59秒

本文链接：https://blog.csdn.net/weixin_43659199/article/details/101789848

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍My97DatePicker日期插件的下载、配置和使用方法，包括WdatePicker.js的配置细节，如何在项目中正确引用插件，以及通过示例展示如何自定义日期选择规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

My97 DatePicker日期插件

下载

WdatePicker插件下载
配置

说明

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文件来修改样式

引用

把下好的My97DatePicker文件夹放到项目里的js下面，或者项目相应的位置，

WdatePicker.js配置

WdatePicker.js在My97DatePicker文件夹里，我主要配置了lang:"zh-cn",skin:"whyGreen"也就是语言和皮肤。配置属性详细信息请点我

在用到的页面里要先引用jquery,在用用WdatePicker.js(只引入这个js,就能用这个日期插件了)

使用

两种使用方法：

修改日期规则是，别忘了硬性重加载，清空一下缓存，改了还久mindate,以为写错了，结果清理缓存，就好使了。。。

自定义一个function，在里面写 WdatePicker里的配置
在input标签里 onclick里直接写。
我这里是前面的日期小于后面的日期，后面的日期要大于前面所选择的日期。

<input id="beginTime"  class="Wdate"  onclick="dateClick()" />
<input id="endTime" name="params[endTime]"   onclick="WdatePicker({dateFmt : 'yyyy-MM-dd HH:mm:ss',startDate:'%y-%M-01 23:59:59',minDate:'#F{$dp.$D(\'beginTime\')}',isShowClear: false,highLineWeekDay:true,readOnly:true})"/>
 function dateClick() {

        WdatePicker({

            dateFmt : 'yyyy-MM-dd HH:mm:ss',  //格式设置相对应界面可选择也变化

            startDate:'%y-%M-01 00:00:00', //默认开始选中时间，格式必须和dateFmt中保持一致,例'2018-05-21 00:00:00'


             maxDate:'#F{$dp.$D(\'endTime\')}',
            isShowClear: false,

            highLineWeekDay:true,  //周末的日期是否高亮
            readOnly:true //是否允许键盘输入值，false为禁止输入，只能鼠标选


        });
    }

4.默认显示当天日期的00：00：00与23：59：59
原理是给input标签的value属性复制。

        var date1 = new Date(new Date(new Date().toLocaleDateString()).getTime());
        var startTime1 = date1.getFullYear() + "-" + ((date1.getMonth() + 1) < 10 ? "0" + (date1.getMonth() + 1):(date1.getMonth() + 1))+ "-" + (date1.getDate() < 10 ? "0" + date1.getDate():date1.getDate()) + " " + (date1.getHours()<10?"0"+date1.getHours():date1.getHours()) + ":" + (date1.getMinutes()<10?"0"+date1.getMinutes():date1.getMinutes()) + ":" + (date1.getSeconds()<10?"0"+date1.getSeconds():date1.getSeconds());
        var date2 = new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1);
         var endTime1 =date2.getFullYear() + "-" + ((date2.getMonth() + 1) < 10 ? "0" + (date2.getMonth() + 1):(date2.getMonth() + 1))+ "-" + (date2.getDate() < 10 ? "0" + date2.getDate():date2.getDate()) + " " + (date2.getHours()<10?"0"+date2.getHours():date2.getHours()) + ":" + (date2.getMinutes()<10?"0"+date2.getMinutes():date2.getMinutes()) + ":" + (date2.getSeconds()<10?"0"+date2.getSeconds():date2.getSeconds());
        $("#beginTime").val(startTime1);

         $("#endTime").val(endTime1);