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

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

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

最终前台效果如下图：

 

使用说明：当用户点击“Date：”后面的输入框中，网页会自动弹出日期时间选择器，用户可以在这个弹出框中选择年份、月份、某一天、某时某刻等。“完成”按钮可以完成时间日期的输入，“今天”按钮是一个链接到当天日期的超链接。

 

要使用jQuery的这个功能，先要引入一些js和css文件。

js文件：

jquery-1.8.0.min.js、jquery-ui-1.8.23.custom.min.js、jquery-ui-timepicker-addon.js

css文件：

jquery-ui-timepicker-addon.css、jquery-ui-1.8.23.custom.css

附上下载地址：

jQuery UI：http://jqueryui.com/download

jQuery UI默认不提供时间的选取功能，必须引入时间选择js插件：https://github.com/trentrichardson/jQuery-Timepicker-Addon

jQuery：http://jquery.com/

 

页面代码如下：

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>

 

各字段含义：

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/

 

posted on 2012-09-03 00:59  玉泉爱德华  阅读(1300)  评论(0)  编辑  收藏  举报

导航