Datepickers

如果您的 jQuery Mobile 网站需要它们（查看您的问题历史记录），您可以随时使用第三方日期选择器 jQuery Mobile 。 3可用，它们很棒。不幸的是，只有 Mobiscroll 可以跨平台使用，因为它支持不同的皮肤。如果您使用 jQuery Mobile ，这也是我建议您使用的日期选择器。

Mobiscroll - http://jsfiddle.net/Gajotres/WDjfR/

$(document).on('pagebeforeshow', '#index', function(){       
    $('#demo').mobiscroll().date({
        invalid: { daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] },
        theme: 'android-ics',
        display: 'inline',
        mode: 'scroller',
        dateOrder: 'dd mm yy',
        dateFormat : "dd-mm-yy"
    });  
});

Mobipick - http://jsfiddle.net/Gajotres/zyVjE/

$(document).on('pagebeforeshow', '#index', function(){       
    $('#demo').mobipick({
        dateFormat: "MM-dd-yyyy"
    });
});

Datebox - http://jsfiddle.net/Gajotres/ktbcP/

<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true, "dateFormat": "mm/dd/YYYY"}'/>

可以在此博客中找到更多有用的示例 article 。

日历

但是如果你想要一个真正的日历实现，我曾经使用过，可能还有更多，但这个有足够的响应。虽然没有专门为 jQuery Mobile 创建，但它可以正常工作。即使创建一个普通网站，这个插件也是一个真正的怪物。

FullCalendar - http://jsfiddle.net/Gajotres/ZSd2C/

在此示例中，您可以看到它对较小屏幕的反应。

$(document).on('pageshow','#index',function(e,data){    
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $('#calendar').fullCalendar({
        editable: true,
        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d-5),
                end: new Date(y, m, d-2)
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d-3, 16, 0),
                allDay: false
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d+4, 16, 0),
                allDay: false
            },
            {
                title: 'Meeting',
                start: new Date(y, m, d, 10, 30),
                allDay: false
            },
            {
                title: 'Lunch',
                start: new Date(y, m, d, 12, 0),
                end: new Date(y, m, d, 14, 0),
                allDay: false
            },
            {
                title: 'Birthday Party',
                start: new Date(y, m, d+1, 19, 0),
                end: new Date(y, m, d+1, 22, 30),
                allDay: false
            },
            {
                title: 'Click for Google',
                start: new Date(y, m, 28),
                end: new Date(y, m, 29),
                url: 'http://google.com/'
            }
        ]
    });
});

Answer 2

<input type="date" />

New HTML5 Date input

-

要将该日期与您的日历/应用相关联，您可能需要write a browser extension，获取附加信息，以便在您浏览的每个页面上为On Hold event附加Date input。

有可能open your calendar via URL link。如果日历没有协议处理程序，您可以编写自己的日历应用程序和assign it a protocol to handle

移动网络 - 添加到日历功能

2 个答案:

Datepickers

日历