您的位置：首页 > Web前端 > JQuery

jQuery UI 日期时间选择器的基本使用

2012-09-03 00:59 337 查看

在网页中，为了方便用户填写日期时间类型的数据，使用jQuery UI提供的日期时间选择器是个不错的选择。

下面简单介绍如何制作一个简单的demo

最终前台效果如下图：

View Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>datetime.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.23.custom.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui-timepicker-addon.css">
<script type="text/javascript" src="js/jquery-1.8.0.min.js" ></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js" ></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js" ></script>

<script>
$(function() {

$("#datepicker").datetimepicker({
closeText: "完成",
currentText: "今天",
showButtonPanel: true,
prevText: "前一月",
nextText: "下一月",
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd",
dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],
monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
monthNamesShort: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
timeFormat: "hh:mm:ss"

});
});
</script>

</head>

<body>
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
</div>
</body>
</html>

[b]各字段含义：[/b]

closeText：关闭按钮下的显示文本

currentText：当天链接按钮下的显示文本

showButtonPanel：是否显示关闭按钮和当天链接按钮

prevText：前一月链接按钮的显示文本

nextText：下一月链接按钮的显示文本

changeMonth：是否显示月份选择下拉框

changeYear：是否显示年份选择下拉框

dateFormat：日期显示格式

dayNames：“你懂的位置的”提示文本

dayNamesMin：从图中可以看出

monthNames：你懂的

monthNamesShort：你也懂的

timeFormat：时间显示格式

好了，一个简单的demo就是如此easy，更多的改插件使用方法可以参阅如下网址：

http://jqueryui.com/demos/datepicker/

http://trentrichardson.com/examples/timepicker/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航