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

相关文章推荐

重情义的蟠桃 · java ...· 3 月前 ·

重情义的米饭 · magento -- ...· 1 年前 ·

胆小的毛衣 · javascript 获取锚点 ...· 1 年前 ·

冲动的八宝粥 · docker 反向代理 ...· 1 年前 ·

风度翩翩的充值卡 · quill parchment - ...· 1 年前 ·

使用说明：当用户点击“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">
    <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>
    <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/