Añadir un Date-Time Picker en un campo input mediante jQuery

Si estás buscando un plugin de jQuery para añadir un selector de fecha y hora a un campo input, has llegado al artículo indicado. El plugin DateTimePicker de jQuery es muy simple y es muy sencillo de implementar. Además, el plugin te proporciona varias opciones a la hora de personalizar tu Date-Time Picker según las necesidades de tu proyecto.

Este tutorial muestra la forma más sencilla de agregar un selector de fecha y hora con un código Javascript mínimo. Veremos dos tipos distintos de date-time picker que puedes añadir a tus proyectos. Uno de ellos aparecerá al hacer clic en el campo input y el otro se mostrará inline.

Antes de utilizar el DateTimePicker de jQuery, debemos incluir la librería jQuery. 

<script src="jquery.min.js"></script>

Despues tenemos que incluir los js y css del plugin DateTimePicker. Este fichero js debe ir después del tag <body>. 

<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/>
<script src="jquery.datetimepicker.full.js"></script>

Código HTML

<input type="text" id="datetimepicker"/>

Código Javascript

$('#datetimepicker').datetimepicker({
    format:'Y-m-d H:i',
});

DateTimePicker Inline 

$('#datetimepicker').datetimepicker({
    format:'Y-m-d H:i',
    inline:true
});

Opciones

Más abajo veremos las opciones de personalización más utilizadas:

MinDate & MaxDate 

$('#datetimepicker3').datetimepicker({
    format:'Y-m-d H:i',
    minDate:'2016-04-05',
    maxDate:'2016-04-28'
});

Para hoy utilizamos minDate:0.

MinTime & MaxTime 

$('#datetimepicker4').datetimepicker({
    format:'Y-m-d H:i',
    minTime:'09:00',
    maxTime:'20:00'
});

Para hoy utilizamos minTime:0.

Rangos 

$('#datetimepicker5').datetimepicker({
    format:'Y-m-d H:i',
    step:15
});

Al seleccionar una fecha 

$('#datetimepicker6').datetimepicker({
    format:'Y-m-d H:i',
    onSelectDate:function(current_time, $input){
        var selectedDate = $input.val();
        alert(selectedDate);
    }
});

Al seleccionar una hora 

$('#datetimepicker7').datetimepicker({
    format:'Y-m-d H:i',
    onSelectTime:function(current_time, $input){
        var selectedDate = $input.val();
        alert(selectedDate);
    }
});

Fuente: codexworld.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP
ARTÍCULO ANTERIOR

SIGUIENTE ARTÍCULO