$(function() { // Gestor para $(document).ready()
// jQuery UI Datepicker
// - http://api.jqueryui.com/datepicker/
$.datepicker.setDefaults(
$.datepicker.regional["es"]
);
let opciones = {
dateFormat: "dd/mm/yy",
yearRange: "1500:",
maxDate: "2w",
defaultDate: 0,
constrainInput: true,
autoSize: true,
appendText: "(d/m/aaaa)",
showAnim: "slideDown",
numberOfMonths: 1,
showButtonPanel: true,
changeMonth: true,
changeYear: true,
showMonthAfterYear: false,
firstDay: 0,
showWeek: false,
/*
prevText: "≪ Ant",
nextText: "Sig ≫",
closeText: "Cerrar",
currentText: "Hoy",
weekHeader: "N°",
dayNames: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
dayNamesShort: ["Dom", "Lun", "Mar", "Mié", "Juv", "Vie", "Sáb"],
dayNamesMin: ["D", "L", "M", "Mi", "J", "V", "S"],
monthNames: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
monthNamesShort: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
*/
//Evento cuando se selecciona una fecha
onSelect: validarFecha
};
//Inicializar el Datepicker
let datepicker = $('#fecha').datepicker(opciones);
//Evento cuando se cambia
$("#fecha").on("input", validarFecha);
});
//Validar la fecha cuando cambia el valor de la fecha
//Disparado input.on("input") y datepicker.onSelect
function validarFecha() {
try {
//Si es inválida dispara el error
let fecha = $.datepicker.parseDate("dd/mm/yy", $("#fecha").val());
// mostrar la fecha válida
$("#salida").text(
"Fecha válida:\n" + fecha
);
} catch (err) {
// mostrar error
$("#salida").text("Fecha INVÁLIDA");
}
}
<!-- Referencias al DatePicker -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.min.js"></script>
<!-- HTML -->
<pre id="salida" style="height: 3em"></pre>
<input type="text" id="fecha" name="fecha" placeholder="Ingrese la fecha">