推荐三款日期选择插件(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就是设置的延迟时间，这样以来再做相同的操作，就是等之前的软键盘下沉消失之后从底部浮上显示日期选择部件。

随机推荐

python中关于__init__模块文件的理解
一般来说新建的一个包下,必然会有一个__init__文件?那么这个文件到底邮有和作用呢? 总结几点如下: 1.__init__文件在包下,其中定义了包的属性,方法;必须要有这个文件,如果没有的话,这个 ...
IOS获取经度纬度
仔细研究了一下SDK文档,再结合网上的方法,写了这一个简单的获取经纬度的方法,大家看看就好. 首先要导入CoreLocation.Frame 包 .h 文件 1 2 3 4 5 6 7 8 9 #im ...
[CSS3] 学习笔记-CSS选择器
CSS3中,选择器的分类很多,有元素选择器.类选择器.ID选择器.属性选择器.后代选择器.子元素选择器.相邻兄弟选择器. 1.最常见的选择器就是元素选择器,文档的元素就是最基本的选择器,例如,h1{} ...
[html5] 学习笔记-改良的input元素种类
在html5中,大幅度增加与改良了input元素的种类,可以简单的使用这些元素来实现之前需要JS脚本来实现的功能. 1.url类型.email类型.date类型.time类型.datetime类型.d ...
微信面试题-获取元素的最终background-color
一.题目用JS代码求出页面上一个元素的最终的background-color,不考虑IE浏览器,不考虑元素float情况. 二.题目解析 1.考察底层JavaScript基础前端开发,日常最 ...
js精要之模块模式
// 模块模式是一种用于创建拥有私有数据的单件对象的模式,基本做法是使用立调函数(IIFE)来返回一个对象 var yourObjet = (function(){ // 私有数据 return { ...
蓝桥网试题 java 入门训练序列求和
---------------------------------------------------------------------------------------------------- ...
module_init解析及内核initcall的初始化顺序
module_init这个函数对做驱动的人来说肯定很熟悉,这篇文章用来跟一下这个函数的实现. 在include/linux/init.h里面有module_init的定义,自然,因为一个module可 ...
在vim中，使用可视化拷贝(剪切)粘贴文本
1 定位光标到你想要开始剪切的位置 2 按v选择字符(按V是选择整行) 3 移动光标到你想要结束剪切的位置 4 按d是为了剪切(按y是为了拷贝) 5 移动光标到你想要粘贴的位置 6 按P是在光标之前 ...
Linux系统（二）软件的安装与卸载
序言上一篇我们了解啦Linux系统中,根目录下的各个文件夹是做什么用的啦,也学会文件如何压缩打包.那么接下来我们就该用到这个系统啦.用这个系统,就是用这个系统的软件,那么我们对我们需要的软件如何安装 ...

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

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

随机推荐

热门专题