jQuery Mobile开发中日期插件Mobiscroll使用说明

介绍

Mobiscroll是一款常用的jQuery Mobile插件，它提供了丰富的移动端UI组件，其中包括日期时间选择器。本文将详细介绍如何在jQuery Mobile开发中使用Mobiscroll日期时间选择器。

准备工作

在开发Mobiscroll日期时间选择器前，需要先引入相关的库文件，包括：

• jquery.mobile-1.4.5.min.css
• jquery-1.11.1.min.js
• jquery.mobile-1.4.5.min.js
• mobiscroll.core-2.6.2.css
• mobiscroll.core-2.6.2.js
• mobiscroll.datetime-2.6.2.css
• mobiscroll.datetime-2.6.2.js

可以在官网（https://mobiscroll.com/）下载相关的文件，也可以通过CDN方式引入。

Mobiscroll日期时间选择器基本用法

Mobiscroll提供了两种方式使用日期时间选择器：instanseArray(数组实例)和instanse（单个实例）。

instanseArray

instanseArray方式会在当前页面的所有input[type="date"]、input[type="time"]、input[type="datetime-local"]元素上自动添加日期时间选择器，并配置相关参数。

示例代码如下：

$(function(){
    $('input[type="date"]').mobiscroll().date();
    $('input[type="time"]').mobiscroll().time();
    $('input[type="datetime-local"]').mobiscroll().datetime();
})

在上述代码中，首先使用选择器$('input[type="date"]')获取所有input元素，然后调用mobiscroll()方法，最后传递一个选项对象date()来初始化日期选择器。

instanse

instanse方式可以更加灵活地配置日期时间选择器，例如指定input元素、添加回调函数、自定义渲染等。

示例代码如下：

$(function(){
    $('#demo').mobiscroll({
        preset: 'date',
        dateFormat: 'yy-mm-dd',
        defaultValue: new Date(2017, 0, 1),
        theme: 'ios',
        display: 'bubble',
        mode: 'scroller',
        animate: 'fade',
        onClose: function(){
            console.log('closed');
        },
        onBeforeShow: function(){
            console.log('before show');
        },
        onShow: function(){
            console.log('show');
        },
        onCancel: function(){
            console.log('canceled');
        },
        onSelect: function(valueText, inst){
            console.log(valueText);
        }
    });
})

在上述代码中，首先使用选择器$('#demo')获取指定input元素，然后调用mobiscroll()方法，最后传递一个选项对象，包括date格式、初始值、选择器主题、显示模式、动画效果、回调函数等。

Mobiscroll日期时间选择器示例

示例一：限定日期时间范围

在该示例中，我们将演示如何使用Mobiscroll日期时间选择器，设置选择范围为当前时间以后一个月内，并且只允许选择工作日。

示例代码如下：

<input type="text" id="demo" placeholder="请输入日期时间">

$(function(){
    var now = new Date();
    var minDate = now;
    var maxDate = new Date(now.getFullYear(), now.getMonth()+1, now.getDate()-1);
    $('#demo').mobiscroll({
        preset: 'datetime',
        theme: 'ios',
        display: 'bubble',
        mode: 'scroller',
        animate: 'fade',
        minDate: minDate,
        maxDate: maxDate,
        dayOfWeekStart: '1',
        onMarked: function (ev, inst) {
            // 该函数为自定义渲染函数，只允许选择工作日（星期一至星期五）
            var dayOfWeek = ev.original.getDay();
            if (dayOfWeek === 0 || dayOfWeek === 6) {
                $(this).addClass('scroller-day disabled workday');
            } else {
                $(this).removeClass('disabled workday');
            }
        }
    });
})

在上述代码中，首先获取当前日期时间，然后计算日期时间范围，包括最小值minDate和最大值maxDate。接着通过选择器$('#demo')获取指定input元素，并调用mobiscroll()方法，最后传递一个选项对象，包括日期时间格式、选择器主题、显示模式、动画效果、选择范围、入和工作日渲染函数等。

示例二：自定义多种日期时间格式

在该示例中，我们将演示如何使用Mobiscroll日期时间选择器，自定义多种日期时间格式，并根据不同的格式分别显示相应的图标。

示例代码如下：

<input type="text" id="demo1" placeholder="请输入日期">
<input type="text" id="demo2" placeholder="请输入时间">
<input type="text" id="demo3" placeholder="请输入日期时间">

$(function(){
    $('#demo1').mobiscroll({
        preset: 'date',
        dateFormat: 'yy-mm-dd',
        theme: 'ios',
        display: 'bubble',
        mode: 'scroller',
        animate: 'fade',
        onMarkupReady: function (event, inst) {
            $(inst._markup).find('.dwwl1 .dw-sel').addClass('icon-calendar');
        }
    });
    $('#demo2').mobiscroll({
        preset: 'time',
        dateFormat: 'HH:ii',
        theme: 'ios',
        display: 'bubble',
        mode: 'scroller',
        animate: 'fade',
        onMarkupReady: function (event, inst) {
            $(inst._markup).find('.dwwl1 .dw-sel').addClass('icon-time');
        }
    });
    $('#demo3').mobiscroll({
        preset: 'datetime',
        dateFormat: 'yy-mm-dd HH:ii',
        theme: 'ios',
        display: 'bubble',
        mode: 'scroller',
        animate: 'fade',
        onMarkupReady: function (event, inst) {
            $(inst._markup).find('.dwwl1 .dw-sel:first').addClass('icon-calendar');
            $(inst._markup).find('.dwwl1 .dw-sel:last').addClass('icon-time');
        }
    });
})

在上述代码中，首先通过选择器$('#demo1')、$('#demo2')和$('#demo3')分别获取3个指定的input元素，并调用mobiscroll()方法，最后传递一个选项对象，包括不同的日期时间格式、选择器主题、显示模式、动画效果等，并使用onMarkupReady回调函数添加相应的图标。

总结

本文介绍了Mobiscroll日期时间选择器的基本用法，分别使用instanseArray和instanse两种方式演示了日期时间选择器的配置，最后通过两个示例演示了如何限定日期时间范围和自定义多种日期时间格式，Mobiscroll是一款非常实用的移动端UI插件，可以大大提升移动App的交互性。