-2

如何在移动网络中实现添加到日历？有没有办法实现这一点。所有智能手机都支持此功能。

4

2 回答 2

3

不幸的是，由HTML5规范指定的日历仍未在不同之间正确实施，HTML5因此您需要使用第 3 方实施。

日期选择器

如果您的jQuery Mobile网站需要它们（查看您的问题历史记录），您可以随时使用 3rd 方日期选择器的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"
    });
});

日期框- 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/'
            }
        ]
    });
});
于 2013-05-28T12:08:43.917 回答
0 
<input type="date" />

新的 HTML5 日期输入

-

要将该日期链接到您的日历/应用程序，您可能需要编写一个浏览器扩展程序，获取扩展程序以将On Hold 事件附加到您浏览的每个页面上的每个Date 输入。

可以通过 URL 链接打开您的日历。如果日历没有协议处理程序，您可以编写自己的日历应用程序并为其分配一个协议来处理

于 2013-05-28T10:39:18.313 回答