jQuery Mobile 日期选择器配置

Question

我正在开发 Web 应用程序的移动版本，但在 jQ mobile 中配置日期选择器时遇到一些问题。我知道这是一个实验性功能(我想它可能有点问题？)，但我认为配置它应该不是问题。

但是，我似乎无法让它工作。我查看了 jQ UI 文档，为我的日期选择器提供了以下配置:

    $(document).ready(function(){
         $("#mo_date").datepicker({ 
                                    showAnim: 'fadeIn', 
                                    dateFormat: 'dd-mm-yy',
                                    dayNamesShort: ['Zon', 'Maa', 'Din', 'Woe', 'Don', 'Vrij', 'Zat'],
                                    dayNamesMin:  ['Zon', 'Maa', 'Din', 'Woe', 'Don', 'Vrij', 'Zat'],
                                    dayNames: ['Zondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag'],
                                    monthNames: ['Januari','Februari','Maart','April','Mei','Juni','Juli','Augustus','September','Oktober','November','December'],
                                    monthNamesShort: ['Jan','Feb','Maa','Apr','Mei','Jun','Jul','Aug','Sep','Okt','Nov','Dec'],
                                    minDate: 0,
                                    // altField outputs date in mySQL date format yy-m-d. datum hieruit halen, ipv .datepicker('getDate');
                                //  altField: '.output_date',
                                //  altFormat: 'yy-m-d'
                                });
    });

我的 HTML 如下:

<form action="mobile/go" method="post"> 
        <div data-role="fieldcontain">
            <label for="mo_event_type" class="select">Kies type taak</label>
            <select name="mo_event_type" id="mo_event_type" data-native-menu="false">
                <option data-placeholder="true">Taaktype</option>
                <option value="huiswerk">Huiswerk</option>
                <option value="deadline">Deadline</option>
                <option value="vrijetijd">Vrije tijd</option>
            </select>
        </div>
        <div data-role="fieldcontain">
            <label for="mo_title">Titel</label>
            <input type="text" name="mo_title" value="" id="mo_title" data-theme="b"/>
        </div>
        <div data-role="fieldcontain">
            <label for="mo_descr">Beschrijving</label>
            <textarea cols="20" rows="8" name="mo_descr" id="mo_descr" data-theme="b"></textarea>
        </div>
        <div date-role="fieldcontain">
            <label for="mo_date">Datum</label>
            <input type="date" name="mo_date" id="mo_date" value="" />
        </div>
    </form>

我是否在这里遗漏了一些重要的东西，或者我只是做错了？一些见解将不胜感激。我知道配置很好，因为我在非移动应用程序中使用了相同的配置。只是无法让它在移动设备上工作:(

非常感谢。

Answer 1

首先，在我看来，我更喜欢 DateBox 插件:http://dev.jtsage.com/jQM-DateBox/

在实验 DP 的文档中:http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/

<script>
  //reset type=date inputs to text
  $( document ).bind( "mobileinit", function(){
    $.mobile.page.prototype.options.degradeInputs.date = true;
  });   
</script>

请务必将此事件绑定(bind)放在在 jQuery 之后、jQuery Mobile 之前加载的脚本中。检查此页面的源代码以获取示例。

我还注意到，许多人无法获得与 DP 一起使用的其他选项

我为日期框准备了这个:

<input type="date" 
       name="mo_date" 
       id="mo_date" value="" 
       data-options='{
           "dateFormat": "DD-MM-YYYY", 
           "noButtonFocusMode": "true", 
           "headerFormat": "DD-MM-YYYY", 
           "daysOfWeekShort" : [
                                   "Zon", 
                                   "Maa", 
                                   "Din", 
                                   "Woe", 
                                   "Don", 
                                   "Vrij", 
                                   "Zat"
                               ], 
           "mode": "calbox", 
           "minYear" : "0", 
           "monthsOfYear" : [
                                "Januari",
                                "Februari",
                                "Maart",
                                "April",
                                "Mei",
                                "Juni",
                                "Juli",
                                "Augustus",
                                "September",
                                "Oktober",
                                "November",
                                "December"
                            ] 
       }'  
       data-role="datebox" />

单行版本:

<input type="date" name="mo_date" id="mo_date" value="" data-options='{"dateFormat": "DD-MM-YYYY", "noButtonFocusMode": "true", "headerFormat": "DD-MM-YYYY", "daysOfWeekShort" : ["Zon", "Maa", "Din", "Woe", "Don", "Vrij", "Zat"], "mode": "calbox", "minYear" : "0", "monthsOfYear" : ["Januari","Februari","Maart","April","Mei","Juni","Juli","Augustus","September","Oktober","November","December"] }'  data-role="datebox" />