|     Inicio    |   |         |  |   FOROS      |  |      |      
   Elastix - VoIP B4A (Basic4Android) App inventor 2 PHP - MySQL
  Estación meteorológica B4J (Basic4Java) ADB Shell - Android Arduino
  Raspberry Pi Visual Basic Script (VBS) FireBase (BD autoactualizable) NodeMCU como Arduino
  AutoIt (Programación) Visual Basic Cosas de Windows Webs interesantes
Translate:
Búsqueda en este sitio:


.

App inventor 2 en español
Cómo programar los teléfonos móviles con Android
mediante App inventor 2 - Juan Antonio Villalpando

-- Tutorial de iniciación de App Inventor 2 en español --

Volver al índice del tutorial

____________________________

169E.- JavaScript y Selector de fecha.

p169E_javascript_selector_fecha.aia

- Vamos ver una manera de elegir fechas mediante JavaScript.

- Hay muchas APIs ya construidas para elegir fechas en JS, una de las más famosas es Pikaday.js de David Bushell

- Otra: http://glad.github.io/glDatePicker/#home

- Vamos a utilizar Pikaday:

https://github.com/dbushell/Pikaday, baja el archivo zip de github y consulta los examples.

- Consulta también la información que he puesto en la Community de App Inventor:

https://community.appinventor.mit.edu/t/calendar-date-picker-javascript-pikaday-library/67171

___________________________
- Diseño.

- Subimos los archivos indicados.

- En esta ocasión el VisorWeb debe ser Visible, ya que en él se mostrará el calendario.

___________________________
- Bloques.

___________________________
- Archivo datepicker.htm.

- Vamos a crear nuestro archivo datepicker.htm con JavaScript:

jdatepicker.htm
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    <link rel="stylesheet" href="pikaday.css">
    <link rel="stylesheet" href="triangle.css">
</head>
<body>  
            <div id="container"></div>
   
    <script src="moment.min.js"></script>
    <script src="pikaday.js"></script>
    <script>
               var picker = new Pikaday(
    {
        field: document.getElementById('container'),
        firstDay: 1,
        theme: 'triangle-theme',
        bound: false,
        container: document.getElementById('container'),
        onSelect: function(date) {    
           resultado  = this.getMoment().format('D MMMM YYYY') + ' ';
           window.AppInventor.setWebViewString(resultado);
           document.write("Fecha = " + resultado); 
                                                }        
    });
    </script>
</body>
</html>

- Mediante format('D MMMM YYYY') puedes cambiar la forma de presentación de la fecha. Distintas formas de formatear moment.js

- firstDay:1 significa que tomamos al "Lunes" como primer día de la semana.

- He añadido theme: triangle para que salga un desplegable de años y meses, si no te gusta este deplegable, borra las líneas que pone triangle.

- Para poner las fechas en español editamos el archivo pikaday.js

// internationalization
i18n: {
    previousMonth : 'Previous Month',
    nextMonth : 'Next Month',
    months : ['January','February','March','April','May','June','July','August','September','October','November','December'],
    weekdays : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
    weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
},

_________________
- Propuestas.

- Consulta la carpeta examples de https://github.com/dbushell/Pikaday/archive/master.zip, mira el código fuente de los archivos.

- Realizar una aplicación donde salgan dos Selectores de fecha y al elegir las fechas te indique su diferencia:

https://dbushell.com/Pikaday/examples/date-range.html

- Anular ciertos días:

https://dbushell.com/Pikaday/examples/diableDayFn.html

- Dibujos 3D:

https://threejs.org/examples/#webgl_animation_skinning_blending

__________________________________

 
- Mi correo:
juana1991@yahoo.com
- KIO4.COM - Política de cookies. Textos e imágenes propiedad del autor:
© Juan A. Villalpando
No se permite la copia de información ni imágenes.
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación y realizan análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. Acepto    Más información