jQuery UI Datepicker 选择时分秒

最新推荐文章于 2024-04-24 10:07:30 发布

潘潘91

最新推荐文章于 2024-04-24 10:07:30 发布

阅读量3w

点赞数

文章标签： jquery ui

本文链接：https://blog.csdn.net/panruifang/article/details/44492097

版权

jQuery UI Datepicker 默认仅支持日期选择，但通过jquery-ui-timepicker-addon.js插件，可以扩展到选择时分秒。这篇博客介绍了如何使用此插件，并提供了官方地址、Demo下载链接以及基本用法。此外，还详细讲解了如何将datepicker控件设置为中文显示，包括引入不同语言文件的方法。

摘要由CSDN通过智能技术生成

jQuery UI Datepicker日期选择插件很好用了，只不过只能精确到日，不能选择时间（小时分钟秒）很遗憾，而jquery-ui-timepicker-addon.js正是基于jQuery UI Datepicker的一款可选时间的插件。

官方地址：http://docs.jquery.com/UI/Datepicker，官方示例： http://jqueryui.com/demos/datepicker/。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Timepicker Demo</title>
    <link type="text/css" href="css/jquery-ui-1.11.4.css" rel="stylesheet" />
    <link type="text/css" href="css/jquery-ui-timepicker-addon.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.11.4.js"></script>
	<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
    <script type="text/javascript" src="js/jquery-ui-timepicker-zh-CN.js"></script>
    <script type="text/javascript">
	    $(function () {
	        $(".ui_timepicker").datetimepicker({
	        	defaultDate: $('.ui_timepicker').val(),
	            dateFormat: "yy-mm-dd",
	            showSecond: true,
	            timeFormat: 'hh:mm:ss',
	            stepHour: 1,
	            stepMinute: 1,
	            stepSecond: 1
	        })
	    })
    </script>
</head>
<body>
<div style="margin: 200px;">
	<input type="text" name="datetime" class="ui_timepicker" value="2015-3-25 13:40:10">
</div>
</body>
</html>

显示效果

Demo下载：时分秒Datepicker Demo

基本用法：

DatePicker支持鼠标点选日期，同时还可以通过键盘控制选择：

page up/down - 上一月、下一月 
ctrl+page up/down - 上一年、下一年 
ctrl+home - 当前月或最后一次打开的日期 
ctrl+left/right - 上一天、下一天 
ctrl+up/down - 上一周、下一周 
enter - 确定选择日期 
ctrl+end - 关闭并清除已选择的日期 
escape - 关闭并取消选择

实用功能：

$.datepicker.setDefaults( settings ) - 全局设置日期选择插件的参数. 
$.datepicker.formatDate( format, date, settings ) - 格式化显示的日期字符串 
$.datepicker.iso8601Week( date ) - 给出一个日期，确实他是一年中的第几周 
$.datepicker.parseDate( format, value, settings ) - 按照指定格式获取日期字符串

jQuery里面的datepicker日期控件默认是显示英文的，如何让他显示中文或其他呢？

【官方的写法】：

（1）引入JS文件：

（2）在function中加入语言设置参数为zh-CN，也可以设置日语等其他语言：

以下三种写法都可以

1. $.datepicker.setDefaults($.datepicker.regional['zh-CN']);

2. $("#date").datepicker($.datepicker.regional['zh-CN']);
3. $('#date').datepicker('option', $.datepicker.regional['zh-CN']);

说明：jquery-ui-i18n.js包含所有语言种类，想用哪个设置相应的参数即可。

不过一般只用一种语言，如果不想引入那个JS，可以直接引入想要的语言js文件即可，

例如我用中文简体：

**jQuery UI 国际化文件下载：jQuery-ui-i18n.js

日期格式：

d - 每月的第几天

dd - 每月的第几天 (两位数字) 
o - 一年中的第几天 
oo - 一年中的第几天 (三位数字) 
D - day name short 
DD - day name long 
m - 月份 (没有前导零) 
mm -

最低0.47元/天解锁文章

潘潘91

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
jQuery UI Datepicker 选择时分秒

jQuery UI Datepicker日期选择插件很好用了，只不过只能精确到日，不能选择时间（小时分钟秒）很遗憾，而jquery-ui-timepicker-addon.js正是基于jQuery UI Datepicker的一款可选时间的插件。官方地址：http://docs.jquery.com/UI/Datepicker，官方示例： http://jqueryui.com/demos
复制链接

扫一扫