3

Hoy he traído este pequeña incógnita antes usaba un <input type="date" ..> y esto me permitía obtener el valor cuando el usuario seleccionaba una fecha.

$(document).on('change','input[name="date_start"]',function(){
    "use strict";
    alert($(this).val());
});

Ahora he incluido el datePickerUi y el mismo código no funciona como esperaba.

¿Hay que hacer algo diferente?

Este es mi ejemplo:

/*Sencillo*/
$(document).on('change', 'input[name="date_start"]', function() {
  "use strict";
  $('#result').html($(this).val());
});

/*datePickerUi*/
$('.datePickerUi').datepicker({
  firstDay: 1,
  datedefault: "2016/03/11",
  showButtonPanel: true,
  prevText: "<Ant",
  nextText: "Sig>",
  currentText: "Hoy",
  yearRange: "-100:+15",
  monthNames: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
  monthNamesShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
  dayNames: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
  dayNamesShort: ["Dom", "Lun", "Mar", "Mié", "Juv", "Vie", "Sáb"],
  dayNamesMin: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sá"],
  weekHeader: "Sm",
  dateFormat: "yy-mm-dd",
  defaultDate: "2015-12-02",
  closeText: "Cerrar",
  constrainInput: false,
  minDate: "1993-01-18",
  maxDate: "2050-01-18",
  changeMonth: true,
  changeYear: true,
  numberOfMonths: 1,
  onSelect: function(dateText, inst) {
    $(".datePickerUi").focus();
    $(".datePickerUi").blur();
  }
});
$(document).on('change', 'input[name="date_end"]', function() {
  "use strict";
  $('#result').html($(this).val());
});
<link href="//code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<label for='date_end'>Con DatePickerUI</label>
<input type='text' class='datePickerUi' name='date_end' id='date_end'>

<label for='date_start'>Con Input Date</label>
<input type='date' name='date_start' id='date_start'>

<p id="result"></p>

1 respuesta 1

3

Como se explica en la documentación, el evento onSelect es invocado cuando el usuario selecciona una fecha.

onSelect: function(dateText, inst) {
  $(".datePickerUi").focus();
  $(".datePickerUi").blur();
  // aqui adentro, haz lo que quieas con dateText
  $('#result').html(dateText);
}

Ejemplo:

/* datePickerUi */
var datepicker = $('.datePickerUi').datepicker({
  firstDay: 1,
  datedefault: "2016/03/11",
  showButtonPanel: true,
  prevText: "<Ant",
  nextText: "Sig>",
  currentText: "Hoy",
  yearRange: "-100:+15",
  monthNames: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
  monthNamesShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
  dayNames: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
  dayNamesShort: ["Dom", "Lun", "Mar", "Mié", "Juv", "Vie", "Sáb"],
  dayNamesMin: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sá"],
  weekHeader: "Sm",
  dateFormat: "yy-mm-dd",
  defaultDate: "2015-12-02",
  closeText: "Cerrar",
  constrainInput: false,
  minDate: "1993-01-18",
  maxDate: "2050-01-18",
  changeMonth: true,
  changeYear: true,
  numberOfMonths: 1,
  onSelect: function(dateText, inst) {
    $(".datePickerUi").focus();
    $(".datePickerUi").blur();
    $('#result').html(dateText);
  }
});
<link href="//code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<label for='date_end'>Input text con datePickerUi</label>
<input type='text' class='datePickerUi' name='date_end' id='date_end'>

<p id="result"></p>

A propósito, existe otro evento para cuando el usuario navega entre los meses/años, llamado onChangeMonthYear.

1
  • Fuiste más rápido que yo :)
    – Alvaro Montoro
    Commented el 12 mar. 2016 a las 2:50

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.