WdatePicker学习笔记

最新推荐文章于 2024-05-14 08:59:38 发布

uNlanD

最新推荐文章于 2024-05-14 08:59:38 发布

阅读量2.5k

点赞数

分类专栏： JS 插件文章标签： Wdatepicker js

本文链接：https://blog.csdn.net/qq_42610806/article/details/81014241

版权

20 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

WdatePicker.js

直接引入js就可以使用。

基本使用效果及语句如下：

点击input框是触发一个WdatePicker的函数，生成一个独立显示的日期选择下拉框。

el：绑定的是触发该下拉事件的标签元素的ID，标签可以是span,p,input等等。

dateFmt：是选定时间后，时间的显示格式以及显示内容的选定。如：yyyy-mm-dd则只显示年月日，大小写随意。

也可以写成：‘yyyy年MM月dd日 HH时mm分ss秒’的格式。

class=“Wdate”则是为该标签绑定一个Class类，在控件末端显示出一张日历的小图片。

自定义的时间格式：

这个的样式会产生一点变化，可能是因为只是选择时间的缘故，效果如下：

图标触发：

点击控件后面的日历小图标触发下拉，但貌似发现第一次只有点击图片才会弹出下拉框，后面点击控件也可以弹出，感觉实用性并不是很大。

高亮显示周末:

效果大概是这样的：

自定义弹出框的弹出位置：

这个不上图片，大概起始位置是以控件元素的left bottom开始的。

设置一个星期的第一天 - -，完全不能理解这个意义的所在。

平面显示;日期控件支持平面显示功能,

只要设置一下eCont属性就可以把它当作日历来使用了,无需触发条件,直接显示在页面上，这里点击后会弹出警告框。

<div id="div1"></div>
<script>
WdatePicker({
eCont:'div1',
onpicked:function(dp){
alert('你选择的日期是:'+dp.cal.getDateStr());
}
});

</script> 效果如下：

这里是直接显示在页面上，并没有任何标签去触发下拉事件。

带有“皮肤”的下拉

感觉用了皮肤反而没有原来的好看，没打算去细究这个皮肤功能。

双日历功能：

会同时生成两个日历出来，效果如下：

时间选择的限定：

看代码就应该能看懂，就minDate和maxDate。

其他的我感觉并没什么必要的。

关注