En este artículo, aprenderemos cómo agregar un selector de tiempo a jQueryUI Datepicker usando el complemento de imagen jQuery Timepicker-Addon .
Nota: descargue el complemento jQuery Timepicker en la carpeta de trabajo e incluya los archivos necesarios en la sección principal de su código HTML.
<enlace href=”http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css” rel=”hoja de estilo” type=”text/css”/>
<enlace href=” jquery-ui-timepicker-addon.css” rel=”hoja de estilo” type=”text/css”/><script src=”http://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”http://code.jquery.com/ui/1.11.0 /jquery-ui.min.js”></script>
<script src=”jquery-ui-timepicker-addon.js”></script>
Ejemplo 1: El siguiente ejemplo demuestra la instanciación del método jQuery datetimepicker() del complemento.
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<title>Adding a Timepicker to
jQuery UI Datepicker</title>
<style type="text/css">
body {
margin: 0;
padding: 20px;
border: 0;
background-color: #e9e9e9;
border-top: solid 10px #7ba9b2;
font: Arial, sans-serif;
}
.wrapper {
width: 800px;
border: solid 1px #eeeeee;
background-color: #ffffff;
padding: 20px;
margin: 0 auto;
}
</style>
<link
rel="stylesheet"
media="all"
type="text/css"
href="http://code.jquery.com/ui/1.11.0/themes/
smoothness/jquery-ui.css"
/>
<link rel="stylesheet"
media="all"
type="text/css"
href="jquery-ui-timepicker-addon.css" />
</head>
<body>
<div class="wrapper">
<h2>Adding a Timepicker to
jQuery UI Datepicker</h2>
<div class="container">
<p>Add a simple jQuery
UI datetimepicker</p>
<div>
<input type="text"
name="dateTimePicker"
id="dateTimePicker"
value="" />
</div>
</div>
</div>
<script type="text/javascript"
src=
"http://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script type="text/javascript"
src=
"http://code.jquery.com/ui/1.11.0/jquery-ui.min.js">
</script>
<script type="text/javascript"
src="jquery-ui-timepicker-addon.js">
</script>
<script type="text/javascript">
// Initialization of datetimepicker
$(function () {
$("#dateTimePicker").datetimepicker();
});
</script>
</body>
</html>
Producción:
Agregar un Timepicker a jQuery UI Datepicker: en el código HTML anterior, podemos agregar las siguientes configuraciones para «timeFormat», «timezonelist» y para la localización. Hay muchas más opciones que puede utilizar el programador dependiendo de la necesidad.
<script>
$(function(){
$('#timePicker').datetimepicker({
timeFormat: "hh:mm tt", //timezone format
timezoneList: [
{ value: -300, label: 'Eastern'},
{ value: -360, label: 'Central' },
{ value: -420, label: 'Mountain' },
{ value: -480, label: 'Pacific' }
]
});
$('#timePicker').timepicker(
//$.timepicker.regional["localization code"]
$.timepicker.regional['en']//English
);
});
</script>
Ejemplo 2: El siguiente ejemplo demuestra la función de control deslizante con intervalos de tiempo de paso de una hora, minuto y segundos. Consulte la salida para una mejor comprensión. Una vez que se mueve el control deslizante, salta en los intervalos de tiempo mencionados en la configuración de opciones para el tiempo como se muestra a continuación.
Nota: No olvide incluir las siguientes bibliotecas en su código HTML para la función de control deslizante.
<script src=”i18n/jquery-ui-timepicker-addon-i18n.min.js”></script>
<script src=”jquery-ui-sliderAccess.js”></script>
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<title>Adding a Timepicker to
jQuery UI Datepicker</title>
<style type="text/css">
body {
margin: 0;
padding: 20px;
border: 0;
background-color: #e9e9e9;
border-top: solid 10px #7ba9b2;
font: Arial, sans-serif;
}
.wrapper {
width: 800px;
border: solid 1px #eeeeee;
background-color: #ffffff;
padding: 20px;
margin: 0 auto;
}
</style>
<link
rel="stylesheet"
media="all"
type="text/css"
href="http://code.jquery.com/ui/1.11.0/
themes/smoothness/jquery-ui.css"
/>
<link rel="stylesheet"
media="all"
type="text/css"
href="jquery-ui-timepicker-addon.css" />
</head>
<body>
<div class="wrapper">
<h2>Adding a step interval
timepicker to jQuery UI Datepicker</h2>
<div class="container">
<p>Adding slider with step
intervals for hour, minute and seconds</p>
<div>
<input type="text"
name="datePicker"
id="datePickerID"
value="" />
</div>
</div>
</div>
<script type="text/javascript"
src=
"http://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script type="text/javascript"
src=
"http://code.jquery.com/ui/1.11.0/jquery-ui.min.js">
</script>
<script type="text/javascript"
src="jquery-ui-timepicker-addon.js">
</script>
<script type="text/javascript"
src=
"i18n/jquery-ui-timepicker-addon-i18n.min.js">
</script>
<script type="text/javascript"
src="jquery-ui-sliderAccess.js">
</script>
<script type="text/javascript">
$(function () {
$("#datePickerID").datetimepicker();
$("#datePickerID").timepicker({
hourGrid: 4,
minuteGrid: 10,
timeFormat: "hh:mm tt",
addSliderAccess: true,
sliderAccessArgs: { touchonly: true },
stepHour: 2, // hour interval step
stepMinute: 10, // minute interval step
stepSecond: 10, // second interval step
});
});
</script>
</body>
</html>
Producción:
Ejemplo 3: el siguiente ejemplo muestra cómo agregar un selector desplegable para datetimepicker() .
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<title>Adding a Timepicker to
jQuery UI Datepicker</title>
<style type="text/css">
body {
margin: 0;
padding: 20px;
border: 0;
background-color: #e9e9e9;
border-top: solid 10px #7ba9b2;
font: Arial, sans-serif;
}
.wrapper {
width: 800px;
border: solid 1px #eeeeee;
background-color: #ffffff;
padding: 20px;
margin: 0 auto;
}
</style>
<link
rel="stylesheet"
media="all"
type="text/css"
href="http://code.jquery.com/ui/1.11.0/themes/
smoothness/jquery-ui.css"
/>
<link rel="stylesheet"
media="all"
type="text/css"
href="jquery-ui-timepicker-addon.css" />
</head>
<body>
<div class="wrapper">
<h2>Adding a Timepicker to
jQuery UI Datepicker</h2>
<div class="container">
<p>Use of dropdowns in datetime picker</p>
<div>
<input type="text"
name="datePicker"
id="datePickerID"
value="" />
</div>
</div>
</div>
<script type="text/javascript"
src=
"http://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script type="text/javascript"
src=
"http://code.jquery.com/ui/1.11.0/jquery-ui.min.js">
</script>
<script type="text/javascript"
src="jquery-ui-timepicker-addon.js">
</script>
<script type="text/javascript">
$(function () {
$("#datePickerID").datetimepicker({
controlType: "select",
oneLine: true,
timeInput: true,
timeFormat: "hh:mm tt",
});
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA