JQuery 日付ピッカーの使用法_jquery

公式アドレス: http://docs.jquery.com/UI/Datepicker 、公式例: http://jqueryui.com/demos/datepicker/ 。

DIY jQuery UI インターフェイス エフェクト サイトの適切なアドレス http://jqueryui.com/themeroller/

DatePicker の基本的な使用法:

コードをコピー コードは次のとおりです: &lt ;!DOCTYPE html>

$(document).ready(function() { $("#datepicker").datepicker(); }); >

DatePicker はマウス クリックによる日付の選択をサポートしており、選択はキーボードから制御できます:

コードをコピー コードは次のとおりです: page up/下 - 前月、翌月 ctrl ページ上/下 - 前年、翌年 ctrl ホーム - 当月または最後に開いた日 ctrl 左/右 - 前日、翌日 ctrl up/down - 前週、来週 enter - 選択した日付を確認します ctrl end - 閉じて選択した日付をクリアします escape - 閉じて選択をキャンセルします

便利関数:

コードをコピー コードは次のとおりです: $.datepicker.setDefaults(settings) ) - 日付ピッカー プラグイン パラメーターのグローバル設定。 $.datepicker.formatDate(format, date, settings) - 表示用の日付文字列をフォーマットします。 $.datepicker.iso8601Week( date ) - 日付を指定します。 、そしてそれは確かに年の最初の日です Weeks $.datepicker.parseDate(format, value, settings) - 指定された形式に従って日付文字列を取得します

日付形式:

コードをコピーします コードは次のとおりです: d - 月の日 (先頭なし)ゼロ) dd - 年の日 (2 桁) o - 年の日 (先頭のゼロなし) oo - 年の日 (3 桁) D - 曜日の名前短い DD - 日の名前 (長い) m - 月 (先頭のゼロなし) mm - 月 (2 桁) M - 月の名前 (短い) MM - 月の名前 (長い) y - 年 (2 桁の数字) yy - 年 (4 桁) @ - Unix タイムスタンプ (1970 年 1 月 1 日から) '...' - テキスト '' - 単一quote (その他) - テキスト

その他の標準日付形式:

コードをコピー コードは次のとおりです: ATOM - 'yy-mm-dd' (RFC 3339/ISO 8601 と同じ) COOKIE - 'D, dd M yy' ISO_8601 - 'yy- mm-dd' RFC_822 - 'D, d M y' RFC_850 - 'DD, dd-M-y' RFC_1036 - 'D, d M y RFC_1123 - ' D, d M yy ' RFC_2822 - 'D, d M yy' RSS - 'D, d M y' TIMESTAMP - '@' W3C - 'yy-mm-dd'

パラメータ (パラメータ名: パラメータの種類: デフォルト値)

コードをコピー コードは次のとおりです: altField : String : '' 選択した日付を別のフィールドに同期し、altFormat を使用して日付文字列をさまざまな形式で表示します。 初期値: $('.selector').datepicker({ altField: '#actualDate' }); 取得: var altField = $('.selector').datepicker('option', 'altField' ); Settings: $('.selector').datepicker('option', 'altField', '#actualDate');

altFormat : String : '' altField が設定されている場合別フィールドに日付形式を表示する場合。 初期値: $('.selector').datepicker({ altFormat: 'yy-mm-dd' }); 取得: var altFormat = $('.selector').datepicker('option', 'altFormat'); 設定: $('.selector').datepicker('option', 'altFormat', 'yy-mm-dd');

appendText : 文字列 : '' 日付プラグインのドメインの後に指定した文字列を追加します。 初期値: $('.selector').datepicker({ appendText: '(yyyy-mm-dd)' }); 取得: var appendText = $('.selector').datepicker('option ', 'appendText'); 設定: $('.selector').datepicker('option', 'appendText', '(yyyy-mm-dd)');

buttonImage : String : '' ポップアップボタンの画像を設定します。空でない場合、ボタンのテキストは alt 属性となり、直接表示されません。 初期値: $('.selector').datepicker({ buttonImage: '/images/datepicker.gif' }); 取得: var buttonImage = $('.selector').datepicker('option' , 'buttonImage'); 設定: $('.selector').datepicker('option', 'buttonImage', '/images/datepicker.gif');

buttonImageOnly : ブール値 : false ボタンに表示せずにトリガーとして使用する画像をフィールドの後に配置するには、true に設定します。 初期値: $('.selector').datepicker({ buttonImageOnly: true });取得: var buttonImageOnly = $('.selector').datepicker('option', 'buttonImageOnly'); 設定: $('.selector').datepicker('option', 'buttonImageOnly', true);

buttonText : String : '...' トリガー ボタンのテキストの内容を設定します。 初期値: $('.selector').datepicker({ buttonText: 'Choose' }); 取得: var buttonText = $('.selector').datepicker('option', 'buttonText') ; Settings: $('.selector').datepicker('option', 'buttonText', 'Choose');

changeMonth : Boolean : false 設定ではドロップによる選択が可能です。ダウンリスト月。 初期値: $('.selector').datepicker({changeMonth: true }); 取得: var changeMonth = $('.selector').datepicker('option', 'changeMonth'); 🎜>設定: $('.selector').datepicker('option', 'changeMonth', true);

change Year : Boolean : false 設定では、ドロップダウン リストから年の選択が可能です。 初期値: $('.selector').datepicker({ change Year: true }); 取得: var change Year = $('.selector').datepicker('option', 'changeyear'); 🎜>Settings: $('.selector').datepicker('option', 'changeyear', true);

closeTextType: StringDefault: 'Done' 閉じるボタンのテキストの内容を設定します。このボタンは showButtonPanel パラメータの設定を通じて表示する必要があります。 初期値: $('.selector').datepicker({ closeText: 'X' }); 取得: var closeText = $('.selector').datepicker('option', 'closeText') ; Settings: $('.selector').datepicker('option', 'closeText', 'X');

constrainInput : Boolean : true true に設定すると、制約が現在の入力日付形式。 初期値: $('.selector').datepicker({ constrainInput: false }); 取得: var constrainInput = $('.selector').datepicker('option', 'constrainInput'); 🎜>Settings: $('.selector').datepicker('option', 'constrainInput', false);

currentText : String : 'Today' 今日のボタンのテキスト内容を設定します。ボタン showButtonPanel パラメータの設定によって表示する必要があります。 初期値: $('.selector').datepicker({ currentText: 'Now' }); 取得: var currentText = $('.selector').datepicker('option', 'currentText') ; 設定: $('.selector').datepicker('option', 'currentText', 'Now');

dateFormat : String : 'mm/dd/yy' 設定日付文字列の表示形式。 初期値: $('.selector').datepicker({ dateFormat: 'yy-mm-dd' }); 取得: var dateFormat = $('.selector').datepicker('option', 'dateFormat'); 設定: $('.selector').datepicker('option', 'dateFormat', 'yy-mm-dd');

dayNames : 配列 : ['日曜日'、'月曜日'、'火曜日'、'水曜日'、'木曜日'、'金曜日'、'土曜日'] 日曜日から順に各曜日の名前を設定します。この内容は、dateFormat を使用したとき、およびカレンダーの行の先頭にマウスを移動したときに表示されます。 初期値: $('.selector').datepicker({ dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] }); 取得: var dayNames = $('.selector').datepicker('option', 'dayNames'); Set: $('.selector').datepicker('option', 'dayNames', ['ディマンシュ', 'ルンディ', 'マルディ', 'メルクレディ', 'ジューディ', 'ヴェンデレディ', 'サメディ']);

dayNamesMin : Array : ['Su', 'Mo', 'Tu'、'We'、'Th'、'Fr'、'Sa'] 日曜日から始まる各曜日の略称を設定します。この内容は dateFormat の行ヘッダーで使用される場合に表示されます。前のカレンダーが表示されます。 初期値: $('.selector').datepicker({ dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] }); 取得: var dayNamesMin = $('.selector').datepicker('option', 'dayNamesMin'); 設定: $('.selector').datepicker('option', 'dayNamesMin', ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa']);

dayNamesShort : Array : ['Sun', 'Mon', 「火」「水」「木」「金」「土」 日曜日を起点とした各曜日の略称を設定します。 この内容はdateFormatで使用した場合に表示されます。前のカレンダーの行ヘッダー。 初期値: $('.selector').datepicker({ dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'] }); 取得: var dayNamesShort = $('.selector').datepicker('option', 'dayNamesShort'); 設定: $('.selector').datepicker('option', 'dayNamesShort', ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam']);

defaultDate : 日付、数値、文字列 : null 設定デフォルトでは、ロード後に最初に表示されるときに選択される日付。 Date オブジェクト、数値 (今日から数えて、たとえば 7)、または有効な文字列 (たとえば、「y」は年を表し、「m」は月を表し、「w」は週を表し、「d」は日を表します) にすることができます。 :「1分7日」)。 初期値: $('.selector').datepicker({defaultDate: 7 }); 取得: vardefaultDate = $('.selector').datepicker('option', 'defaultDate'); 🎜>設定: $('.selector').datepicker('option', 'defaultDate', 7);

duration : String, Number : 'normal' 日付コントロールの表示を設定します展開アニメーション時間。オプションのオプションは「遅い」、「標準」、および「速い」です。'' は即時を表し、数字はミリ秒数を表します。 初期値: $('.selector').datepicker({duration: 'slow' }); 取得: varduration = $('.selector').datepicker('option', 'duration') ; Settings: $('.selector').datepicker('option', 'duration', 'slow');

firstDay : Number : 0 週の最初の曜日を設定します。日曜日は 0、月曜日は 1、というようになります。 初期値: $('.selector').datepicker({ firstDay: 1 }); 取得: var firstDay = $('.selector').datepicker('option', 'firstDay'); 🎜>設定: $('.selector').datepicker('option', 'firstDay', 1);

gotoCurrent : Boolean : false true に設定すると、日ボタンがクリックされたとき, 今日ではなく、現在選択されている日付に移動します。 初期値: $('.selector').datepicker({ gotoCurrent: true }); 取得: var gotoCurrent = $('.selector').datepicker('option', 'gotoCurrent'); 🎜>Settings: $('.selector').datepicker('option', 'gotoCurrent', true);

hideIfNoPrevNext : Boolean : false 前/次の選択可能な項目がない場合に設定しますこの場合、対応するボタンを非表示にします。 (デフォルトは使用できません) Initial: $('.selector').datepicker({ hideIfNoPrevNext: true }); Get: var hideIfNoPrevNext = $('.selector').datepicker('option', 'hideIfNoPrevNext'); 設定: $('.selector').datepicker('option', 'hideIfNoPrevNext', true);

isRTL : Boolean : false true に設定すると、この場合、すべてのテキストは右から左に記述されます。 初期値: $('.selector').datepicker({ isRTL: true }); 取得: var isRTL = $('.selector').datepicker('option', 'isRTL'); 🎜>設定: $('.selector').datepicker('option', 'isRTL', true);

maxDate : Date, Number, String : null 選択可能な最大の日付を設定します。 Date オブジェクト、数値 (今日から数えて、たとえば 7)、または有効な文字列 (たとえば、「y」は年を表し、「m」は月を表し、「w」は週を表し、「d」は日を表します) にすることができます。 :「1分7日」)。 初期値: $('.selector').datepicker({ maxDate: ' 1m 1w' }); 取得: var maxDate = $('.selector').datepicker('option', 'maxDate' ); 設定: $('.selector').datepicker('option', 'maxDate', ' 1m 1w'); $('.selector').datepicker('option', 'maxDate ', '12/25/2012');

minDate : Date, Number, String : null オプションの最小日付を設定します。 Date オブジェクト、数値 (今日から数えて、たとえば 7)、または有効な文字列 (たとえば、「y」は年を表し、「m」は月を表し、「w」は週を表し、「d」は日を表します) にすることができます。 :「1分7日」)。 初期値: $('.selector').datepicker({ minDate: new Date(2007, 1 - 1, 1) }); 取得: var minDate = $('.selector').datepicker( 'option', 'minDate'); 設定: $('.selector').datepicker('option', 'minDate', new Date(2007, 1 - 1, 1)); '.selector').datepicker('option', 'minDate', '12/25/2012');

monthNames : Array : ['1月', '2月', '3月', '4月'、'5月'、'6月'、'7月'、'8月'、'9月'、'10月'、'11月'、'12月'】 すべての月の名前を設定します。 初期値: $('.selector').datepicker({monthNames:['Januar','Februar','Marts','April','Maj','Juni','Juli','August' ,'9 月','10 月','11 月','12 月']}); Get: var monthNames = $('.selector').datepicker('option', 'monthNames');設定: $('.selector').datepicker('option', 'monthNames', ['Januar','Februar','Marts','April','Maj','Juni','Juli',' August',' September','Oktober','11 月','12 月']);

monthNamesShort : 配列 : ['Jan', 'Feb', 'Mar', 'Apr', 'May '、'Jun'、'Jul'、'Aug'、'Sep'、'Oct'、'Nov'、'Dec'] すべての月の略称を設定します。 初期値: $('.selector').datepicker({monthNamesShort:['Jan','Feb','Mar','Apr','Maj','6月','7月','8月' ,'Sep','Okt','Nov','Dec']}); Get: var monthNamesShort = $('.selector').datepicker('option', 'monthNamesShort');設定: $('.selector').datepicker('option', 'monthNamesShort', ['Jan','Feb','Mar','Apr','Maj','6月','7月',' Aug','Sep','Okt','Nov','Dec']);

navigationAsDateFormat : Boolean : false true に設定すると、formatDate 関数が prevText、nextText に適用されます。 currentText の値に表示されます。たとえば、月の名前として表示されます。 初期値: $('.selector').datepicker({ NavigationAsDateFormat: true }); 取得: var NavigationAsDateFormat = $('.selector').datepicker('option', 'navigationAsDateFormat'); 🎜>Settings: $('.selector').datepicker('option', 'navigationAsDateFormat', true);

nextText : String : 'Next' 「翌月」の表示を設定しますリンクワード。 初期値: $('.selector').datepicker({ nextText: 'Later' }); 取得: var nextText = $('.selector').datepicker('option', 'nextText') ; Settings: $('.selector').datepicker('option', 'nextText', 'Later');

numberOfMonths : Number, Array : 1 表示する数を設定します一度に数か月。整数の場合は、表示される月数です。配列の場合は、表示される行と列の数です。 初期値: $('.selector').datepicker({numberOfMonths: [2, 3] }); 取得: varnumberOfMonths = $('.selector').datepicker('option', 'numberOfMonths '); 設定: $('.selector').datepicker('option', 'numberOfMonths', [2, 3]);

prevText : String : 'Prev' 設定「先月」リンクのテキストを表示します。 初期値: $('.selector').datepicker({ prevText: 'Earlier' }); 取得: var prevText = $('.selector').datepicker('option', 'prevText') ; 設定: $('.selector').datepicker('option', 'prevText', 'Earlier');

shortyearCutoff : String, Number : ' 10' カットオフを設定します年の値。数値（0 ～ 99）の場合は、現在の年からカウントされます。文字列の場合は、数値に変換されてから現在の年に加算されます。カットオフ年を超えると、前世紀とみなされます。 初期値: $('.selector').datepicker({ short YearCutoff: 50 }); 取得: var short YearCutoff = $('.selector').datepicker('option', 'shortyearCutoff'); 🎜>設定: $('.selector').datepicker('option', 'shortyearCutoff', 50);

showAnim : String : 'show' 日付の表示と非表示のアニメーションを設定しますプラグイン名。 初期値: $('.selector').datepicker({ showAnim: 'fold' }); 取得: var showAnim = $('.selector').datepicker('option', 'showAnim') ; Settings: $('.selector').datepicker('option', 'showAnim', 'fold');

showButtonPanel : Boolean : false 表示するかどうかに関する設定パネルボタン。 初期値: $('.selector').datepicker({ showButtonPanel: true }); 取得: var showButtonPanel = $('.selector').datepicker('option', 'showButtonPanel'); 🎜>Settings: $('.selector').datepicker('option', 'showButtonPanel', true);

showCurrentAtPos : Number : 0 複数の月を表示する場合に現在の月を設定します 表示場所。上/左から x 番目の位置から開始します。 初期値: $('.selector').datepicker({ showCurrentAtPos: 3 }); 取得: var showCurrentAtPos = $('.selector').datepicker('option', 'showCurrentAtPos'); 🎜>設定: $('.selector').datepicker('option', 'showCurrentAtPos', 3);

showMonthAfter Year : Boolean : false ヘッダーに年の後の月を表示するかどうかパネルの。 初期値: $('.selector').datepicker({ showMonthAfter Year: true }); 取得: var showMonthAfter Year = $('.selector').datepicker('option', 'showMonthAfter Year'); 🎜>設定: $('.selector').datepicker('option', 'showMonthAfter Year', true);

showOn : String : 'focus' 表示日付プラグインをトリガーするイベントを設定します。パネル、オプションの値: フォーカス、ボタン、両方 初期値: $('.selector').datepicker({ showOn: 'both' }); Get: var showOn = $('.selector'); .datepicker('option', 'showOn'); 設定: $('.selector').datepicker('option', 'showOn', 'both');

showOptions : { } showAnim を使用してアニメーション効果を表示する場合、このパラメータを使用して追加のパラメータ設定を追加できます。 初期値: $('.selector').datepicker({ showOptions: {direction: 'up' }); 取得: var showOptions = $('.selector').datepicker('option', ' showOptions'); 設定: $('.selector').datepicker('option', 'showOptions', {direction: 'up');

showOtherMonths : ブール値 : false はい現在のパネルに前後 2 か月の日付番号を表示します (選択不可)。 初期値: $('.selector').datepicker({ showOtherMonths: true }); 取得: var showOtherMonths = $('.selector').datepicker('option', 'showOtherMonths'); 🎜>Settings: $('.selector').datepicker('option', 'showOtherMonths', true);

stepMonths : Number : 1 前/次の月をクリックすると、月に一度スクロールします。 初期値: $('.selector').datepicker({ stepMonths: 3 }); 取得: var stepMonths = $('.selector').datepicker('option', 'stepMonths'); 🎜>設定: $('.selector').datepicker('option', 'stepMonths', 3);

yearRange : String : '-10: 10' ドロップ内の年を制御します-down list 表示される年数は、現在の年を基準にした相対値 (-nn: nn) または絶対値 (-nnnn: nnnn) です。 Initial: $('.selector').datepicker({ yearRange: '2000: 2010 ' }); 取得: var yearRange = $('.selector').datepicker('option', 'yearRange'); Set: $('.selector').datepicker('option' , 'yearRange', '2000:2010');

イベント

コードをコピー beforeShow : function(input) 日付コントロールがパネルを表示する前にこのイベントをトリガーし、現在イベントをトリガーしているコントロールのインスタンス オブジェクトを返します。 Initial: $('.selector').datepicker({ beforeShow: function(input) { ... } });

beforeShowDay : function(date) 日付コントロールのパネルを表示します以前は、このイベントは各パネルの日付がバインドされたときにトリガーされ、パラメーターはイベントをトリガーした日付でした。関数を呼び出した後、配列を返す必要があります: [0] この日付がオプションかどうか (true/false)、[1] この日付の CSS スタイル名 ("" はデフォルトを意味します)、[2] マウスが移動されたとき上記のように、プロンプトの内容が表示されます。 初期値: $('.selector').datepicker({ beforeShowDay: function(date) { ... } });

onChangeMonth Year : function(year, month, inst) 現在の年 このイベントは、月が変わるとトリガーされます。パラメーターは、変更された年と月、および現在の日付プラグインのインスタンスです。 初期値: $('.selector').datepicker({ onChangeMonth Year: function(year, month, inst) { ... } });

onClose : function(dateText, inst) このイベントは、日付パネルが閉じられたときに (日付が選択されているかどうかに関係なく) トリガーされ、パラメーターは選択された日付と現在の日付プラグインのインスタンスです。 初期値: $('.selector').datepicker({ onClose: function(dateText, inst) { ... } });

onSelect : function(dateText, inst) このイベントは、日付パネルで日付が選択された後にトリガーされます。パラメーターは、選択された日付と現在の日付プラグインのインスタンスです。 $('.selector').datepicker({ onSelect: function(dateText, inst) { ... } });

メソッド:

コードをコピー コードは次のとおりです: destroy 要素からドラッグ機能を削除します。 使用法: .datepicker( 'destroy' )

disable 要素のドラッグ機能を無効にします。 使用法: .datepicker( 'disable' )

enable 要素のドラッグ機能を有効にします。 使用法: .datepicker( 'enable' )

option 要素のパラメータを取得または設定します。 使用法: .datepicker( 'option' , optionName , [value] )

dialog ダイアログ プラグインで日付プラグインを開きます。 使用法: .datepicker( 'dialog' , dateText , [onSelect] , [settings] , [pos] )

isDisabled 日付プラグインが無効になっているかどうかを確認します。 使用法: .datepicker( 'isDisabled' )

hide 以前に開いた日付パネルを非表示 (閉じます)。 使用法: .datepicker( 'hide' , [speed] )

show .datepicker( 'show' ) 日付プラグインを表示します。 使用法: .datepicker( 'show' )

getDate 現在の日付プラグインによって選択された日付を返します。 使用法: .datepicker( 'getDate' )

setDate 日付プラグインの現在の日付を設定します。 date パラメータには、数値 (今日から数えて、例: 7) または有効な文字列 (年を表す「y」、月を表す「m」、週を表す「w」、日を表す「d」、たとえば: ' 1m) を指定できます。 7d ')、null は現在の日を意味します。 使用法: .datepicker( 'setDate' , date )

jquery-ui-datepicker の使用説明 1: 最初の場合関連する js をページにインポートする際、導入の順序が間違ってはいけないことに注意してください jquery-1.4.2.min.js jquery-ui.min.js jquery.ui.datepicker .min.js jquery.ui.datepicker-zh-CN.min.js jquery.ui.datepicker-fr.min.js ....など (必要なものを追加します) use) 注:言語パックの最後の文は、日付ピッカーのデフォルトのローカリゼーションを設定します。 次の文と同様です: setDefaults(....regional[...]) つまり、次の日付ピッカーの場合ページは自動的に設定されなくなりました。デフォルトでは、最後に導入された言語パッケージのローカライズが優先されます。

2: ページの例

datepicker の公式ドキュメントは非常に明確です。最初に datepicker を設定し、次に setter または getter を設定する必要があります。

コードをコピーします コードは次のとおりです: $(function() { //$("# datepicker").datepicker(...);//... 属性を使用して datepicker() を作成する直接実行を表します //datepicker オプションを設定する前に、最初に datepicker を初期化する必要があります //$( "# datepicker").datepicker('option',...,...); // datepicker... の属性値の設定を表しますが、datepicker() は作成しません。 .setDefaults($.datepicker.regional['zh-CN']); $.datepicker.setDefaults($.datepicker.regional['']);//まず言語パックの地域をクリーンアップします $("#datepicker").datepicker(); $("#datepicker").datepicker('option', $.datepicker.regional['zh-CN']); ("#datepicker").datepicker($.datepicker.regional['zh-CN']);// の前に $("#datepicker").datepicker(); があるため、この文の実行は失敗します。 $ ("#datepicker").datepicker('option', 'dateFormat','yy-mm-dd');//set dateFormat //var dateFormat = $( "#datepicker" ).datepicker( " option ", "dateFormat" );//get dateFormat //$("#datepicker").datepicker('option', {dateFormat: 'yy-mm-dd'});//set dateFormat }); ;