Конфигурация jQuery Mobile Datepicker - PullRequest
Новая
       10

Конфигурация jQuery Mobile Datepicker

1 голос
/ 13 мая 2011

Я работаю над мобильной версией своего веб-приложения, но у меня возникли некоторые проблемы с настройкой средства выбора даты в jQ mobile.Я знаю, что это экспериментальная функция (я полагаю, она может быть немного ошибочной?), Но я решил, что ее настройка не должна быть проблемой.

Однако я не могу заставить ее работать.Я просмотрел документацию по интерфейсу jQ, чтобы найти следующую конфигурацию для моего средства выбора даты: 

    $(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>

Я что-то упустил здесь, или яЯ просто делаю это неправильно?Некоторое понимание будет оценено.Я знаю, что конфигурация в порядке, так как я использую то же самое для моего немобильного приложения.Просто не могу заставить его работать с мобильным: (

Большое спасибо.

1 Ответ

4 голосов
/ 13 мая 2011

Сначала мне нравится плагин DateBox, немного лучше IMO: 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>

Обязательно поместите привязку этого событияв сценарии, который загружается после jQuery, но до jQuery Mobile.Проверьте источник этой страницы для примера.

Я также заметил, что многие не могут получить дополнительные опции для работы с DP

У меня было это для 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" />

однострочная версия: 

<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" />
...