0

tengo un campo que usa flatpickr y quisiera obtener la fecha que selecciono, nose de que forma hacerlo, intente usar onClick

Esta es la funcion que genera el calendario ej js:

function form__date_register() {
    flatpickr('.js--input--date_register', {
        minDate: '1920-01-01',
        maxDate: 'today',
        locale: {
        firstDayOfWeek: 1,
        weekdays: {
          shorthand: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
          longhand: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],         
        }, 
        months: {
          shorthand: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Оct', 'Nov', 'Dic'],
          longhand: ['Enero', 'Febrero', 'Мarzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        },
      },

    });
}

El siguiente codigo es el input:

<div class="input_p__contenedor bloque--mitad"> 
    <?= $this->Form->control('fecha_aplicacion', [
        'class' => 'input_p__field js--input--date required',
        'id' => 'form__aplicacion',
        'onClick' =>'etapa_fase();',
        'label' =>'Fecha de aplicación',
        'placeholder' => 'Fecha de aplicación',
        'data-enabletime' => true,
        'templates' => [
                'formGroup' => '{{input}}{{label}}'
        ],
            'type' => 'text'
    ]) ?> 
</div>

El siguiente, codigo es una función donde quiero obtener el valor:

function etapa_fase(){
    var dateControl = document.querySelector('input[type="date"]');
    $("#form__aplicacion").val();
   alert( $("#form__aplicacion").val());
}

2 respuestas 2

0

Mira guiándome de la Documentación oficial. Te hice un ejemplo.No es nada del otro mundo, solo debes registrar el evento en form__date_register(). En todos los plugins ya sean de bootsrap, materialize, lo que sea...generalmente se lo hace de este modo. En el callback del evento yo solo imprimo los datos por consola, pero tranquilamente se los puedes enviar a etapa_fase() o realizar las acciones que necesites. Cualquier duda me avisas, espero haber sido claro. Saludos!

$(function() { 
  form__date_register();
  
});


function form__date_register() {
    flatpickr('#fecha_aplicacion', {
        // EN ESTA PARTE ES DONDE SE REGISTRA EL EVENTO
        onChange: function(selectedDates, dateStr, instance) {
        console.log(selectedDates+"/"+dateStr)
        },
        // FIN EVENTO
        minDate: '1920-01-01',
        maxDate: 'today',
        locale: {
        firstDayOfWeek: 1,
        weekdays: {
          shorthand: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
          longhand: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],         
        }, 
        months: {
          shorthand: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Оct', 'Nov', 'Dic'],
          longhand: ['Enero', 'Febrero', 'Мarzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        },
      },

    });
}

function etapa_fase(){
    //Recibir los parámetros y realizar las acciones pertinentes.
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<input id="fecha_aplicacion" type="text">

1
  • Gracias me sirvió tu respuesta.
    – Jenriquez
    Commented el 30 oct. 2018 a las 5:41
0

Puedes utilizar el vento onChange de flatpickr:

onChange: function(selectedDates, dateStr, instance) {
  //...
},

Con este evento puedes obtener el valor del campo con el parametro dateStr así:

flatpickr('.js--input--date_register', {
        minDate: '1920-01-01',
        maxDate: 'today',
        locale: {
        firstDayOfWeek: 1,
        weekdays: {
          shorthand: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
          longhand: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],         
        }, 
        months: {
          shorthand: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Оct', 'Nov', 'Dic'],
          longhand: ['Enero', 'Febrero', 'Мarzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        },
      },
      onChange: function(selectedDates, dateStr, instance)     {
        alert(dateStr);
      }
    });
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<div class="input_p__contenedor bloque--mitad"> 
  <input class="js--input--date_register" type="date">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

Espero te sirva.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.