Datepicker de jQuery Mobile configuración

Estoy trabajando en una versión móvil de mi web, la aplicación, pero tengo algunos problemas con la configuración de un datepicker en jQ móvil. Sé que es una característica experimental (supongo que podría ser un poco buggy?), pero pensé que la configuración no debería ser un problema.

Sin embargo, me parece que no puede conseguir trabajo. Me miré en el jQ interfaz de usuario documentación para venir para arriba con la siguiente configuración para mi datepicker:

    $(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'
                                });
    });

Mi HTML es el siguiente:

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

Que me estoy perdiendo algo crucial aquí o solo estoy haciendo mal del llano? Algunos conocimientos se agradece. Sé que la configuración está bien, ya estoy usando el mismo para mi no aplicación móvil. Simplemente no se puede llegar a trabajar con el móvil de uno 🙁

Muchas gracias.

  • cualquier error en la consola de depuración?
  • No hay errores en todos, tristemente.
  • Durante algunas pruebas con el código veo las opciones si hace clic dentro del campo de entrada y no en el menú emergente de calendario. Dos calendarios mostrar, wierd
  • Hmm. 🙁 Estoy jugando con el DateBox plugin ahora, pero estoy atascado allí también, jaja. Tratando de establecer el monthsOfYear opción, pero realmente no parece estar funcionando. Probablemente estoy haciendo algo mal, pero la documentación es un poco malo. Se ve genial, aunque.
InformationsquelleAutor cabaret | 2011-05-13

1 Kommentar

  1. 4

    Primera me gusta el DateBox plugin un poco mejor IMO: http://dev.jtsage.com/jQM-DateBox/

    En la Documentación de la Experimental 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>

    Asegúrese de colocar este enlace de sucesos en una secuencia de comandos que se carga después de jQuery, pero antes de jQuery Mobile. Revise esta página es la fuente para un ejemplo.

    También he notado que muchos no pueden obtener opciones adicionales para trabajar con la DP

    Que tenía esto para el 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" />

    sola línea de la versión:

    <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" />
    • Tengo el enlace de eventos de secuencia de comandos en lugar de en mi encabezado de archivo de inclusión, entre jQ y jQ móvil. Voy a comprobar el plugin se enlaza. Gracias.
    • Decidí abandonar el jQ móvil selector de fecha y utilizar el plugin que usted sugirió. Yo tengo trabajo ahora y se ve mejor, además de que es realmente configurable. Muchas gracias!
    • actualizado mi respuesta
    • Muchas gracias! Sólo molesto cosa es que se vuelve un poco loco en el iPhone. I pulse el campo de entrada de teclado del iPhone aparece durante una fracción de segundo, luego vuelve a bajar, a continuación, el calendario muestra. A continuación, de nuevo, mejor que nada.
    • No sé si hay etiqueta acerca de la publicación de dos comentarios después de simpatia. Sólo decir que me fijo esta poniendo readonly="true" en mi campo de entrada, en caso de que alguien viene a través de esto y quiere saber como me fijo.
    • por lo que añadir el atributo de sólo lectura-a la fecha de entrada elemento corrige el iPhone buggyness?
    • Tipo de. Todavía es un poco buggy, parece saltar de todo un poco y blanco/negro colores de fondo viene de la nada, pero al menos el temido teclado del iPhone no aparecerá ya!
    • Whoa. Sólo se quedó en el más molesto bug con el DateBox plugin. Tengo a mi el diseño del formulario de la siguiente manera: datebox selectbox selectbox. ahora, cada vez que pulse un selectbox en mi iphone/ipad, la datebox muestra. definitivamente buggy.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea