移动Web-添加到日历功能

遗憾的是，HTML5规范指定的日历在不同的HTML5之间仍未正确实现，因此您需要使用第三方实现。

日期选择器

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

移动滚动-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"
    });
});

日期框-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"}'/>

更多的工作示例可以在博客文章中找到。

日历

但如果你想要一个真正的日历实现——我用过的一个，可能还有更多，但这个已经足够响应了。虽然不是专门为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/'
            }
        ]
    });
});