js timepicker 控件案例

最新推荐文章于 2025-06-06 16:31:04 发布

原创最新推荐文章于 2025-06-06 16:31:04 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用 jQuery Timepicker 插件创建时间选择控件，提供一个实战案例，帮助开发者实现高效的时间输入交互。

时间控件案例使用 jquery timepicker

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <link href="jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css" />
  <link href="jquery-ui-timepicker-addon.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="jquery-ui-1.8.23.custom.min.js"></script>
	<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>	
  <script type="text/javascript">
      $(function () {
			  initDateTime();
			 $('#beginDate').datetimepicker({
                showSecond: false,
                changeMonth: true,
                changeYear: true,
                timeFormat: 'HH:mm:ss',
                dateFormat: 'yy-mm-dd'});
       });
	function initDateTime(){
			$.datepicker.regional['zh-CN'] = {
				clearText:'清除',
				clearStatus:'清除已选日期',
				closeText:'关闭',
				closeStatus:'不改变当前选择',
				prevText:'<上月',
				prevStatus:'显示上月',
				prevBigText:'<<',
				prevBigStatus:'显示上一年',
				nextText:'下月>',
				nextStatus:'显示下月',
				nextBigText:'>>',
				nextBigStatus:'显示下一年',
				currentText:'今天',
				currentStatus:'显示本月',
				monthNames:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
				monthNamesShort:['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'],
				monthStatus:'选择月份',
				yearStatus:'选择年份',
				weekHeader:'周',
				weekStatus:'年内周次',
				dayNames:['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
				dayNamesShort:['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				dayNamesMin:['日', '一', '二', '三', '四', '五', '六'],
				dayStatus:'设置 DD 为一周起始',
				dateStatus:'选择 m月 d日, DD',
				dateFormat:'yy-mm-dd',
				firstDay:1,
				initStatus:'请选择日期',
				isRTL:false
			};
			$.datepicker.setDefaults($.datepicker.regional['zh-CN']);
			$.timepicker.regional['zh-CN'] = {
				timeOnlyTitle: '选择时间',
				timeText: '时间',
				hourText: '小时',
				minuteText: '分钟',
				secondText: '秒钟',
				millisecText: '微秒',
				timezoneText: '时区',
				currentText: '现在时间',
				closeText: '关闭',
				timeFormat: 'hh:mm',
				amNames: ['AM', 'A'],
				pmNames: ['PM', 'P'],
				ampm: false
			};
			$.timepicker.setDefaults($.timepicker.regional['zh-CN']);
		}
    </script>
 </head>

 <body>
   <span>起始时间：</span>
   <input type="text" readonly id="beginDate"  value=""   style="width:150px;text-align: center;"/>
 </body>
</html>