DDR爱好者之家

推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
站长资源 2025/10/28 佚名
5 1538
DDR爱好者之家 Design By 杰米

三款日期选择插件推荐给大家：

1.My97DatePicker

纯原生JS，专注于PC端，支持IE6+；页面上只需要引入WdatePicker.js文件，但是My97DatePicker整个目录是一个整体，最好不要破坏里面的目录结构，否则就会报错找不到指定文件。

(1)直接在html文件中写入

<input id="ipt" type="text" onclick="WdatePicker()" />

注意：由于此插件是原生JS写的，所以绑定点击事件请务必请用原生JS的点击事件绑定方法，如果使用$('#ipt').on('click',function( ){ })，在选中一个日期并失去焦点后，想要重新选择就必须点击两次次才能唤起日历。
(2)如果给输入框添加class="Wdate"，输入框的右边会出现一个日期图标。
(3)可以通过其他元素来弹出日期选择框，直接给该元素添加onclick="WdatePicker({el: '#ipt'})"
(4)可以通过添加position属性来定义弹出位置，例如 onclick="WdatePicker({position: {left:100,top:50}})"
(5)可以通过添加dateFmt属性来定义日期格式，例如 onclick="WdatePicker({dateFmt: 'MM-yy'})"
(6)如果没有定义onpicked和oncleared事件，将自动触发文本框的onchange事件，定义这些事件的方式如下

document.getElementById('ipt').onclick = function(){
 WdatePicker({
  onpicked: function(){
   // 配合jquery.validate.js插件，在这里手动添加校验
  },
  oncleared: function(){
   // 配合jquery.validate.js插件，在这里手动添加校验
  },
 });    
}

(7)可以实现日期选择联动

<input id="d5221" type="text" onfocus="var d5222=$dp.$('d5222');WdatePicker({onpicked:function(){d5222.focus();},maxDate:'#F{$dp.$D(\'d5222\')}'})" />
<input id="d5222" type="text" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'d5221\')}'})" />

(8)还能将选中的值拆分到文本框

<input type="text" id="d523_y" size="5" /> 年
<input type="text" id="d523_M" size="3" /> 月
<input type="text" id="d523_d" size="3" /> 日
<input type="text" id="d523_HH" size="3" /> 时
<input type="text" id="d523_mm" size="3" /> 分
<input type="text" id="d523_ss" size="3" /> 秒
<img onclick="WdatePicker({el:'d523',dateFmt:'yyyy-MM-dd HH:mm:ss',onpicked:pickedFunc})" src="/UploadFiles/2021-04-02/datePicker.gif">


更多功能和参数请去官网查询http://www.my97.net/dp/demo/resource/3.asp。 


2.jquery.datepicker.js




主要用于PC端，需要同时引入jquery.js和jquery-ui.js，样式方面除了引入jquery-ui.css，还要带上jquery-ui目录中的images文件夹，否则就会报错找不到指定的文件。




(1)引入相关文件后，直接就是$('#ipt').datepicker( );




(2)常用的几个参数配置如下







$("#ipt").datepicker({
 numberOfMonths:1, // 显示几个月 
 showButtonPanel:true, // 是否显示按钮面板 
 dateFormat: 'yy-mm-dd', // 日期格式 
 clearText:"清除", // 清除日期的按钮名称 
 closeText:"关闭", // 关闭选择框的按钮名称 
 yearSuffix: '年', // 年的后缀 
 showMonthAfterYear:true, // 是否把月放在年的后面 
 defaultDate:'2011-03-10', // 默认日期 
 minDate:'2011-03-05', // 最小日期 
 maxDate:'2011-03-20', // 最大日期 
 monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'], 
 dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], 
 dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], 
 dayNamesMin: ['日','一','二','三','四','五','六'], 
 onSelect: function(selectedDate) {
 // 选择日期后执行的操作 
 alert(selectedDate); 
 } 
}); 






3.Mobiscroll




专注于移动端，依赖于jquery类库，有多种样式可供选择，根据需要引入各类文件。




(1)demo如下：







<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
 <title>Mobiscroll日期时间插件</title>

 <!-- 核心CSS样式 -->
 <link href="dev/css/mobiscroll.core-2.5.2.css" rel="external nofollow" rel="stylesheet" type="text/css" />
 <!-- 添加动画效果 -->
 <!-- <link href="dev/css/mobiscroll.animation-2.5.2.css" rel="external nofollow" rel="stylesheet" type="text/css" /> -->
 <!-- 安卓样式 -->
 <link href="dev/css/mobiscroll.android-ics-2.5.2.css" rel="external nofollow" rel="stylesheet" type="text/css" />

 <!-- 或者引用一整个压缩好的css文件 -->
 <!-- <link href="css/mobiscroll.custom-2.5.2.min.css" rel="external nofollow" rel="stylesheet" type="text/css" /> -->

 <style type="text/css">
 .dwl{
  font-size: 20px;
 }
 .dwbg .dwb{
  font-size: 20px;
 }
 table td:first-child{
  padding-right: 15px;
 }
 table td:last-child{
  padding-left: 15px;
 }
 table .dww{
  min-width: 150px !important;
 }
 </style>
</head>

<body>
 <input type="text" name="appDate" id="appDate" />

 <!-- jquery类库 -->
 <script src="/UploadFiles/2021-04-02/jquery-1.9.1.js">


(2)解决与移动端软键盘的定位冲突




如果页面有多个输入框，当点击一个输入框时会唤起设备自带的软键盘，然后如果直接点击另一个id名为appDate的日期输入框，即失去焦点的同时，获取到了mobiscroll绑定的输入框的焦点，结果发现之前的软键盘下沉消失之后，本该显示在底部的日期选择部件显示在了屏幕的上方，解决办法是找到mobiscroll.core-2.5.2.js 这个文件，搜索focus关键字，将对应的地方改成：







elm.bind('focus.dw', function () {
 setTimeout(function(){
  that.show();
 },300) 
});






其中300ms就是设置的延迟时间，这样以来再做相同的操作，就是等之前的软键盘下沉消失之后从底部浮上显示日期选择部件。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米