JQuery日期插件datepicker的使用

時間  2019-11-10
標籤 jquery 日期 插件 datepicker 使用 欄目 JQuery 简体版
原文   原文鏈接

1.javascript

 jQuery是一款很是優秀的腳本框架，其豐富的控件使用起來也很是簡單，配置很是靈活。下面作一個使用日期插件datapicker的例子。 css

一、下載jQuery核心文件就不用說了吧，datepicker是輕量級插件，只需jQuery的min版本就好了，而後到官網http://jqueryui.com/download下載jquery-ui壓縮包（能夠選擇喜歡的theme），裏面就包含對datepicker的支持，固然您也能夠網站http://marcgrabanski.com/pages/code/jquery-ui-datepicker下載datepicker，包括ui.core.js和ui.datepicker.js。html

二、在HTML中引用下載下來的js文件： java

 

[xhtml] view plain copy
  1.        <!-- 引入 jQuery -->  
  2. <mce:script src="js/jquery.1.4.2.js" mce_src="js/jquery-1.5.1.min.js" type="text/JavaScript"></mce:script>  
  3. <!--添加datepicker支持-->  
  4. <mce:script src="js/jquery.ui.core.js" mce_src="js/jquery.ui.core.js" type="text/javascript"></mce:script>  
  5. <mce:script src="js/jquery.ui.datepicker.js" mce_src="js/jquery.ui.datepicker.js" type="text/javascript"></mce:script>  

3.在HTML中引入默認樣式表文件，這個文件在ui壓縮包中。若是在官網下載，首頁就有這個CSS文件下載，也可選擇其餘皮膚的CSS。jquery

[xhtml] view plain copy
  1. <!--引入樣式css-->  
  2. k type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.13.custom.css" mce_href="css/jquery-ui-1.7.3.custom.css" />  

4.在HTML中插入文本域，最好設置成只讀，不接受用戶的手動輸入，防止格式混亂，以id標記好。api

 

[xhtml] view plain copy
  1. <input type="text" id="selectDate" readonly="readonly"/>  

5.編寫js代碼，實現最終效果。框架

[xhtml] view plain copy
  1. $(document).ready(function() {     
  2.       $('#selectDate').datepicker();     
  3.   });  

效果以下圖：dom

這裏只是作了一個最基本的日期控件，咱們還須要以中文顯示，限制日期選擇範圍等需求，稍微修改js代碼：網站

[javascript] view plain copy
  1. <mce:script type="text/javascript"><!--  
  2.     //等待dom元素加載完畢.  
  3.         $(function(){  
  4.             $("#selectDate").datepicker({//添加日期選擇功能  
  5.             numberOfMonths:1,//顯示幾個月  
  6.             showButtonPanel:true,//是否顯示按鈕面板  
  7.             dateFormat: 'yy-mm-dd',//日期格式  
  8.             clearText:"清除",//清除日期的按鈕名稱  
  9.             closeText:"關閉",//關閉選擇框的按鈕名稱  
  10.             yearSuffix: '年', //年的後綴  
  11.             showMonthAfterYear:true,//是否把月放在年的後面  
  12.             defaultDate:'2011-03-10',//默認日期  
  13.             minDate:'2011-03-05',//最小日期  
  14.             maxDate:'2011-03-20',//最大日期  
  15.             monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],  
  16.             dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],  
  17.             dayNamesShort: ['週日','週一','週二','週三','週四','週五','週六'],  
  18.             dayNamesMin: ['日','一','二','三','四','五','六'],  
  19.             onSelect: function(selectedDate) {//選擇日期後執行的操做  
  20.                 alert(selectedDate);  
  21.             }  
  22.             });  
  23.         });  
  24.       
  25. // --></mce:script>  

效果以下：ui

這裏基本上就知足咱們使用的須要了。datepicker控件默認是英文的，能夠在構造datepicker時經過monthNames、dayNames屬性來指定月、日的中文顯示值，可是每次使用是都配置這些屬性難免太麻煩了，能夠增長一個js文件將中文配置都放在裏面，每次使用直接引用便可，這裏放在jquery.ui.datepicker-zh-CN.js中，內容以下：

[javascript] view plain copy
  1. jQuery(function($){  
  2.     $.datepicker.regional['zh-CN'] = {  
  3.         closeText: '關閉',  
  4.         prevText: '<上月',  
  5.         nextText: '下月>',  
  6.         currentText: '今天',  
  7.         monthNames: ['一月','二月','三月','四月','五月','六月',  
  8.         '七月','八月','九月','十月','十一月','十二月'],  
  9.         monthNamesShort: ['一','二','三','四','五','六',  
  10.         '七','八','九','十','十一','十二'],  
  11.         dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],  
  12.         dayNamesShort: ['週日','週一','週二','週三','週四','週五','週六'],  
  13.         dayNamesMin: ['日','一','二','三','四','五','六'],  
  14.         weekHeader: '周',  
  15.         dateFormat: 'yy-mm-dd',  
  16.         firstDay: 1,  
  17.         isRTL: false,  
  18.         showMonthAfterYear: true,  
  19.         yearSuffix: '年'};  
  20.     $.datepicker.setDefaults($.datepicker.regional['zh-CN']);  
  21. });  

6.在頁面中引入中文插件

[javascript] view plain copy
  1. <!-- 添加中文支持-->  
  2.     <mce:script src="js/jquery.ui.datepicker-zh-CN.js" mce_src="js/jquery.ui.datepicker-zh-CN.js" type="text/javascript"></mce:script>  

完整的頁面代碼以下：

 

[xhtml] view plain copy
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3.  <HEAD>  
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.   <TITLE>日期控件datepicker</TITLE>  
  6.       
  7.     <!-- 引入 jQuery -->  
  8.     <mce:script src="js/jquery.1.4.2.js" mce_src="js/jquery.1.4.2.js" type="text/javascript"></mce:script>  
  9.   
  10.     <!--添加datepicker支持-->  
  11.     <mce:script src="js/jquery.ui.core.js" mce_src="js/jquery.ui.core.js" type="text/javascript"></mce:script>  
  12.     <mce:script src="js/jquery.ui.datepicker.js" mce_src="js/jquery.ui.datepicker.js" type="text/javascript"></mce:script>  
  13.     <!-- 或者引入jquery ui包，其中也包含對datepicker的支持  
  14.     <mce:script src="js/jquery-ui-1.7.3.custom.min.js" mce_src="js/jquery-ui-1.7.3.custom.min.js" type="text/javascript"></mce:script>  
  15.     -->  
  16.   
  17.     <!--引入樣式css-->  
  18.     <link type="text/css" rel="stylesheet" href="css/jquery-ui-1.7.3.custom.css" mce_href="css/jquery-ui-1.7.3.custom.css" />  
  19.   
  20.     <!-- 添加中文支持-->  
  21.     <mce:script src="js/jquery.ui.datepicker-zh-CN.js" mce_src="js/jquery.ui.datepicker-zh-CN.js" type="text/javascript"></mce:script>  
  22.   
  23.     <mce:script type="text/javascript"><!--  
  24.     //等待dom元素加載完畢.  
  25.         $(function(){  
  26.             $("#selectDate").datepicker({//添加日期選擇功能  
  27.             numberOfMonths:1,//顯示幾個月  
  28.             showButtonPanel:true,//是否顯示按鈕面板  
  29.             dateFormat: 'yy-mm-dd',//日期格式  
  30.             clearText:"清除",//清除日期的按鈕名稱  
  31.             closeText:"關閉",//關閉選擇框的按鈕名稱  
  32.             yearSuffix: '年', //年的後綴  
  33.             showMonthAfterYear:true,//是否把月放在年的後面  
  34.             defaultDate:'2011-03-10',//默認日期  
  35.             minDate:'2011-03-05',//最小日期  
  36.             maxDate:'2011-03-20',//最大日期  
  37.             //monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],  
  38.             //dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],  
  39.             //dayNamesShort: ['週日','週一','週二','週三','週四','週五','週六'],  
  40.             //dayNamesMin: ['日','一','二','三','四','五','六'],  
  41.             onSelect: function(selectedDate) {//選擇日期後執行的操做  
  42.                 alert(selectedDate);  
  43.             }  
  44.             });  
  45.         });  
  46.       
  47. // --></mce:script>  
  48.  </HEAD>  
  49.  <BODY>  
  50.   <input type="text" id="selectDate" readonly="readonly"/>  
  51.  </BODY>  
  52. </HTML>  

 

注意：因爲jquery datepicker首頁http://marcgrabanski.com/articles/jquery-ui-datepicker上ui.core.js和ui.datepicker.js不是最新版本的，若是下載新版本jquery-ui-1.8.13中的css文件會形成日期控件不能顯示的問題，因此這裏使用了1.7.3的ui。簡單一點就是用jquery-ui的壓縮js。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程