推荐三款日期选择插件(My97DatePicker+jquery.datepicker+Mobiscroll)

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="../../My97DatePicker/skin/datePicker.gif" width="16" height="22" align="absmiddle" style="cursor:pointer" />
 
<script>
    function pickedFunc(){
        $dp.$('d523_y').value=$dp.cal.getP('y');
        $dp.$('d523_M').value=$dp.cal.getP('M');
        $dp.$('d523_d').value=$dp.cal.getP('d');
        $dp.$('d523_HH').value=$dp.cal.getP('H');
        $dp.$('d523_mm').value=$dp.cal.getP('m');
        $dp.$('d523_ss').value=$dp.cal.getP('s');
    }
</script>

更多功能和参数请去官网查询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="stylesheet" type="text/css" />
    <!-- 添加动画效果 -->
    <!-- <link href="dev/css/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css" /> -->
    <!-- 安卓样式 -->
    <link href="dev/css/mobiscroll.android-ics-2.5.2.css" rel="stylesheet" type="text/css" />
 
    <!-- 或者引用一整个压缩好的css文件     -->
    <!-- <link href="css/mobiscroll.custom-2.5.2.min.css" 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="dev/jquery-1.9.1.js"></script>
 
    <!-- 核心js文件 -->
    <script src="dev/js/mobiscroll.core-2.5.2.js" type="text/javascript"></script>
    <!-- 添加中文 -->
    <!-- <script src="dev/js/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script> -->
    <!-- 针对日期时间 -->
    <script src="dev/js/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script>
    <!-- 添加中文 -->
    <!-- <script src="dev/js/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script> -->
    <!-- 安卓端 -->
    <!-- <script src="dev/js/mobiscroll.android-ics-2.5.2.js" type="text/javascript"></script> -->
 
    <!-- 或者引用一整个压缩好的js文件     -->
    <!-- <script src="js/mobiscroll.custom-2.5.2.min.js" type="text/javascript"></script> -->
 
    <script type="text/javascript">
        $(function () {
            var currYear = (new Date()).getFullYear();
            var opt={};
            opt.date = {preset : 'date'};
            opt.default = {
                theme: 'android-ics light', // 皮肤样式
                display: 'bottom', // 显示方式
                mode: 'scroller', // 日期选择模式
                startYear: currYear , //开始年份
                endYear: currYear + 30, //结束年份
                dateFormat: 'mm/yyyy ', // 日期格式
                dateOrder: 'mmyy', // 面板中日期排列格
                setText: '确定', // 确认按钮名称
                   cancelText: '取消',// 取消按钮名籍我
                monthText: '月', // 面板中月文字
                yearText: '年', // 面板中年文字
            };
 
            $("#appDate").val('').scroller('destroy').scroller($.extend(opt['date'], opt['default']));
        });
    </script>
</body>
</html>

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

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

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

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

随机推荐

如何从本地把项目上传到github&&如何把github项目通过clone复制下来
一.第一步---注册一个Github账号首先要在GitHub上创建一个帐号,可以去官方网站注册一个账号. 二.git安装下载地址:http://msysgit.github.io/ 二.第二步-- ...
iOS开发中@property的属性weak nonatomic strong readonly等介绍
@property与@synthesize是成对出现的,可以自动生成某个类成员变量的存取方法.在Xcode4.5以及以后的版本,@synthesize可以省略. 1.atomic与nonatomica ...
MongoDB的账户与权限管理及在Python与Java中的登陆
本文主要介绍了MongoDB的账户新建,权限管理(简单的),以及在Python,Java和默认客户端中的登陆. 默认的MongoDB是没有账户权限管理的,也就是说,不需要密码即可登陆,即可拥有读写的权 ...
js-面试题1
//1. y 和 z的值? ; ; ; function add(n){n=n+;} y = add(x); function add(n){n=n+;} z = add(x); //y,z输出und ...
C++编程练习(1)----“实现简单的线性表的顺序存储结构“
线性表的顺序存储结构,指的是用一段地址连续的存储单元依次存储线性表的数据元素. 故可以用数组来实现顺序存储结构. 用C++编写的利用数组实现简单的读取.插入和删除功能的线性表. #include< ...
一个想法（续三）：一份IT技术联盟创业计划书，开启众筹创业征程
写在创业计划书之前的话: 昨天在闪存里我@了dudu,说:我要借钱,不久dudu回了我:傍个富婆. 当然,dudu以为我是玩笑,其实,我的确是开玩笑的,哈. 不过我正在执行一个创业计划,如果启动,我会 ...
salesforce 零基础学习（六十六）VF页面应善于使用变量和函数（二）常用函数的使用
上一篇介绍VF中常用的变量,此篇主要内容为VF页面可以直接使用的函数,主要包括Date相关函数,Text相关函数,Information相关函数以及logic相关函数,其他相关函数,比如math相关函 ...
VS error 全集（error C2664: 'CWnd::MessageBoxW' : cannot convert parameter 1 from 'char *' to 'LPCTSTR'的解决方法）
我用的是VS2005,在编译MFC时遇到了如下错误: error C2664: 'CWnd::MessageBoxW' : cannot convert parameter 1 from 'char ...
asyncio
一.简介 asyncio是Python 3.4版本引入的标准库,直接内置了对异步IO的支持. asyncio的编程模型就是一个消息循环.我们从asyncio模块中直接获取一个EventLoop的引用, ...
Java(多态练习 instanceof)
/* 题目: (多态,instanceof)有如下代码 class Animal { private String name; // 1 } class Dog extends Animal { // ...

推荐三款日期选择插件(My97DatePicker+jquery.datepicker+Mobiscroll)

推荐三款日期选择插件(My97DatePicker+jquery.datepicker+Mobiscroll)的更多相关文章

随机推荐

热门专题