在本文中, 我们将学习如何使用jQuery将时间选择器添加到jQueryUI Datepicker时间选择器插件图片插件。
注意:请下载jQuery 时间选择器插件在工作文件夹中, 并在HTML代码的开头部分包含必需的文件。
<link href =" http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel =" stylesheet" type =" text / css" /> <link href =" jquery-ui-timepicker-addon.css" rel =" stylesheet" 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>
范例1:以下示例演示了jQuery的实例化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 >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 >
输出如下:
将时间选择器添加到jQuery UI Datepicker:在上面的HTML代码中, 我们可以为" timeFormat", " timezonelist"和本地化添加以下设置。程序员可以根据需要使用更多选项。
<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>
范例2:下面的示例演示了滑块功能, 其中步进时间间隔为一小时, 一分钟和几秒钟。请参考输出以更好地理解。移动滑块后, 它会以时间间隔跳入选项设置中提到的时间, 如下所示。
注意:请不要忘记将以下库包含在HTML代码中以用于滑块功能。
<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 >
输出如下:
范例3:以下示例演示了如何为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 >
输出如下: