引言

之前使用jqueryUi中的彈出框做了一個可拖拽的彈出登錄框，也順便將里面的常用的日期插件和文本框智能提示插件，也學習了一下。

使用方法

首先在項目中引入以下文件：

1 <!-- 日期插件 默認樣式文件引用 --> 2 3 <linkhref="libs/JqueryUI/css/redmond/jquery-ui-1.10.4.custom.min.css"rel="stylesheet"/> 4 5 <!-- jquery核心插件 版本1.10.2 --> 6 7 <scripttype="text/javascript"src="libs/JqueryUI/js/jquery-1.10.2.js"></script> 8 9 <!-- 日期插件js文件 --> 10 11 <scripttype="text/javascript"src="libs/JqueryUI/js/jquery-ui-1.10.4.custom.min.js"></script> 12 13 <!-- 日期插件語言包 設置為中文 --> 14 15 <scripttype="text/javascript"src="libs/JqueryUI/js/jquery.ui.datepicker-zh-CN.js"></script> 16

?

常用方法

?描述

類型	名稱	描述
方法	datepicker	該方法為日期插件的初始化方法。

常用參數

描述

類型	名稱	描述
參數	changeMonth	在日期的標題欄中是否出現下拉選擇框，選擇日期中的月份。true代表有選擇框，false代表無選擇框。
參數	changeYear	在日期的標題欄中是否出現下拉選擇框，選擇日期中的年份。true代表有選擇框，false代表無選擇框。
參數	showButtonPanel	在日期面板的下方出現兩個按鈕，一個是今天，一個是關閉。默認值是false,不顯示的。
參數	closeText	必須結合showButtonPanel使用，并且showButtonPanel的值必須是true，否則看不到效果。
參數	dateFormat	表示日期顯示的格式，可以設置為：mm/dd/yy、yy-mm-dd、 d M, y、DD, d MM, yy 、'day' d 'of' MM 'in the year' yy。
參數	defaultDate	首次打開顯示的日期，可以用Date對象指定一個實際日期，或指定距離今天的天數（如+7）、字符串（y表示年、m表示月、w表示周、d表示天，如"+1m+7d"）默認為null，表示今天。
參數	showAnim	日期界面出現的動畫效果
參數	showWeek	顯示周，當前中的第幾周。
參數	firstDay	設置每周的第一天，0表示星期日1表示星期一等。
參數	yearRange	設置下拉列表框中顯示的年份范圍，可以是相對今年（-nn:+nn）或相對于選擇的年份（c-nn:c+nn）或絕對年份（nnnn:nnnn）

示例

1 $(function(){ 2 3 //日期插件 初始化方法 4 5 $("#datepicker").datepicker({ 6 7 //在日期的標題欄中是否出現下拉選擇框，選擇日期中的月份。 8 9 //true代表有選擇框，false代表無選擇框 10 11 changeMonth:false, 12 13 //在日期的標題欄中是否出現下拉選擇框，選擇日期中的年份。 14 15 //true代表有選擇框，false代表無選擇框 16 17 changeYear:false, 18 19 //在日期面板的下方出現兩個按鈕，一個是今天，一個是關閉。 20 21 //默認值是false,不顯示的 22 23 showButtonPanel:true, 24 25 //必須結合showButtonPanel使用， 26 27 //并且showButtonPanel的值必須是true，否則看不到效果 28 29 closeText:"關閉", 30 31 //表示日期顯示的格式 32 33 //mm/dd/yy, yy-mm-dd, d M, y, DD, d MM, yy , 34 35 //'day' d 'of' MM 'in the year' yy 36 37 dateFormat:"yy-mm-dd", 38 39 //缺省值在當前日期中加或減幾天 40 41 defaultDate:-3, 42 43 //日期界面出現的動畫效果 44 45 showAnim:"toggle", 46 47 //顯示周 當前中的第幾周 48 49 showWeek:false, 50 51 //默認firstDay 當前的第一天 52 53 firstDay:1, 54 55 //表示下拉框中年份的范圍 56 57 yearRange:"c-10:c+10" 58 59 }); 60 61 });

總結

?這里總結了一下日期插件的相關內容，關于文本框智能提示的，可以參考官網的demo。

總結

以上是生活随笔為你收集整理的[js插件]JqueryUI日期插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。