ホームページ >ウェブフロントエンド >jsチュートリアル >JQuery datepicker use_jqueryの詳しい説明
JQuery datepicker use_jqueryの詳しい説明
- WBOYオリジナル
- 2016-05-16 15:23:271787ブラウズ
jQuery UI は非常に強力です。日付選択プラグイン Datepicker は、日付形式、言語、選択した日付範囲の制限、関連ボタンやその他のナビゲーションなどの表示方法をカスタマイズできるプラグインです。 。
正式なアドレス: http://docs.jquery.com/UI/Datepicker、公式の例: http://jqueryui.com/demos/datepicker/。
DIY jQuery UI インターフェイス エフェクト サイトの適切なアドレスhttp://jqueryui.com/themeroller/
DatePicker の基本的な使用法:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body style="font-size:62.5%;">
<div type="text" id="datepicker"></div>
</body>
</html>
page up/down - 上一月、下一月
ctrl+page up/down - 上一年、下一年
ctrl+home - 当前月或最后一次打开的日期
ctrl+left/right - 上一天、下一天
ctrl+up/down - 上一周、下一周
enter - 确定选择日期
ctrl+end - 关闭并清除已选择的日期
escape - 关闭并取消选择
$.datepicker.setDefaults( settings ) - 全局设置日期选择插件的参数.
$.datepicker.formatDate( format, date, settings ) - 格式化显示的日期字符串
$.datepicker.iso8601Week( date ) - 给出一个日期，确实他是一年中的第几周
$.datepicker.parseDate( format, value, settings ) - 按照指定格式获取日期字符串
d - 每月的第几天 (没有前导零)
dd - 每月的第几天 (两位数字)
o - 一年中的第几天 (没有前导零)
oo - 一年中的第几天 (三位数字)
D - day name short
DD - day name long
m - 月份 (没有前导零)
mm - 月份 (两位数字)
M - month name short
MM - month name long
y - 年份 (两位数字)
yy - 年份 (四位数字)
@ - Unix 时间戳 (从 01/01/1970 开始)
'...' - 文本
'' - 单引号
（其它） - 文本
ATOM - 'yy-mm-dd' (Same as 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');
設定: $('.selector').datepicker('option', 'altField', '#actualDate');
初期値: $('.selector').datepicker({ altFormat: 'yy-mm-dd' });
取得: var altFormat = $('.selector').datepicker('option', 'altFormat');
設定: $('.selector').datepicker('option', 'altFormat', 'yy-mm-dd');
追加テキスト : 文字列 : ''
日付プラグインのドメインの後に指定した文字列を追加します。
取得: var appendText = $('.selector').datepicker('option', 'appendText');
設定: $('.selector').datepicker('option', 'appendText', '(yyyy-mm-dd)');
ボタン画像 : 文字列 : ''
ポップアップボタンの画像を設定します。空でない場合、ボタンのテキストは alt 属性となり、直接表示されません。
初期値: $('.selector').datepicker({ buttonImage: '/images/datepicker.gif' });
設定: $('.selector').datepicker('option', 'buttonImage', '/images/datepicker.gif');
buttonImageOnly : ブール値 : false
初期値: $('.selector').datepicker({ buttonImageOnly: true });
取得: var buttonImageOnly = $('.selector').datepicker('option', 'buttonImageOnly');
ボタンテキスト : 文字列 : '...'
トリガーボタンのテキスト内容を設定します。
取得: var buttonText = $('.selector').datepicker('option', 'buttonText');
設定: $('.selector').datepicker('option', 'buttonText', 'Choose');
changeMonth : ブール値 : false
設定では、ドロップダウン リストから月を選択できます。
初期値: $('.selector').datepicker({ changeMonth: true });
設定: $('.selector').datepicker('option', 'changeMonth', true);
この設定では、ドロップダウン リストから年を選択できます。
初期値: $('.selector').datepicker({change Year: true });
取得: var change Year = $('.selector').datepicker('option', 'changeyear');
closeTextType: StringDefault: 'Done'
閉じるボタンのテキストの内容を設定します。このボタンは showButtonPanel パラメータの設定を通じて表示する必要があります。
初期値: $('.selector').datepicker({ closeText: 'X' });
取得: var closeText = $('.selector').datepicker('option', 'closeText');
設定: $('.selector').datepicker('option', 'closeText', 'X');
constrainInput : ブール値 : true
true に設定すると、現在の入力日付形式が制限されます。
初期値: $('.selector').datepicker({ constrainInput: false });
取得: var constrainInput = $('.selector').datepicker('option', 'constrainInput');
設定: $('.selector').datepicker('option', 'constrainInput', false);
初期値: $('.selector').datepicker({ currentText: 'Now' });
取得: var currentText = $('.selector').datepicker('option', 'currentText');
設定: $('.selector').datepicker('option', 'currentText', 'Now');
日付形式 : 文字列 : 'mm/dd/yy'
日付文字列の表示形式を設定します。
取得: 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');
設定: $('.selector').datepicker('option', 'dayNames', ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']) ;
dayNamesMin : 配列 : ['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 : 配列 : ['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' は日を表します) にすることができます。例:「+1m +7d」)。
初期値: $('.selector').datepicker({defaultDate: +7 });
取得: vardefaultDate = $('.selector').datepicker('option', 'defaultDate');
設定: $('.selector').datepicker('option', 'defaultDate', +7);
初期値: $('.selector').datepicker({ period: 'slow' });
取得: varduration = $('.selector').datepicker('option', 'duration');
設定: $('.selector').datepicker('option', 'duration', 'slow');
初日 : 番号 : 0
週の最初の曜日を設定します。日曜日は 0、月曜日は 1、というようになります。
取得: var firstDay = $('.selector').datepicker('option', 'firstDay');
設定: $('.selector').datepicker('option', 'firstDay', 1);
gotoCurrent : ブール値 : false
true に設定すると、今日ボタンをクリックすると、今日ではなく現在選択されている日付に移動します。
初期値: $('.selector').datepicker({ gotoCurrent: true });
設定: $('.selector').datepicker('option', 'gotoCurrent', true);
hideIfNoPrevNext : ブール値 : false
初期値: $('.selector').datepicker({ hideIfNoPrevNext: true });
取得: var hideIfNoPrevNext = $('.selector').datepicker('option', 'hideIfNoPrevNext');
isRTL : ブール値 : false
true に設定すると、すべてのテキストが右から左に表示されます。
取得: var isRTL = $('.selector').datepicker('option', 'isRTL');
設定: $('.selector').datepicker('option', 'isRTL', true);
maxDate : 日付、数値、文字列 : null
選択可能な最大の日付を設定します。 Date オブジェクト、数値 (今日から数えて +7 など)、または有効な文字列 ('y' は年を表し、'm' は月を表し、'w' は週を表し、'd' は日を表します) にすることができます。例:「+1m +7d」)。
初期値: $('.selector').datepicker({ maxDate: '+1m +1w' });
設定: $('.selector').datepicker('option', 'maxDate', '+1m +1w');
$('.selector').datepicker('option', 'maxDate', '12/25/2012');
minDate : 日付、数値、文字列 : null
選択可能な最小の日付を設定します。 Date オブジェクト、数値 (今日から数えて、たとえば +7)、または有効な文字列 ('y' は年を表し、'm' は月を表し、'w' は週を表し、'd' は日を表します) にすることができます。例:「+1m +7d」)。
初期値: $('.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 : 配列 : ['1 月'、'2 月'、'3 月'、'4 月'、'5 月'、'6 月'、'7 月'、'8 月'、'9 月'、'10 月'、'11 月'、' 12月']
初期値: $('.selector').datepicker({monthNames:['Januar','Februar','Marts','April','Maj','Juni','Juli','August',' September ','10月','11月','12月']});
取得: var monthNames = $('.selector').datepicker('option', 'monthNames');
設定: $('.selector').datepicker('option', 'monthNames', ['Januar','Februar','Marts','April','Maj','Juni','Juli',' 8 月、9 月、10 月、11 月、12 月]);
monthNamesShort : 配列 : ['Jan', 'Feb', 'Mar', 'Apr', 'May', '6月', '7月', '8月', '9月', '10月', '11月', ' 12月]
すべての月の略語を設定します。
初期値: $('.selector').datepicker({monthNamesShort:['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug' ,'9月','Okt','11月','12月']});
設定: $('.selector').datepicker('option', 'monthNamesShort', ['Jan','Feb','Mar','Apr','Maj','6月','7月',' 8 月、9 月、10 月、11 月、12 月]);
navigationAsDateFormat : ブール値 : false
true に設定すると、prevText、nextText、currentText の値に formatDate 関数が適用され、たとえば月の名前として表示されます。
初期値: $('.selector').datepicker({ NavigationAsDateFormat: true });
設定: $('.selector').datepicker('option', 'navigationAsDateFormat', true);
nextText : String : '次へ'
初期値: $('.selector').datepicker({ nextText: 'Later' });
取得: var nextText = $('.selector').datepicker('option', 'nextText');
numberOfMonths : 数値、配列 : 1
一度に表示する月数を設定します。整数の場合は、表示される月数です。配列の場合は、表示される行と列の数です。
取得: varnumberOfMonths = $('.selector').datepicker('option', 'numberOfMonths');
設定: $('.selector').datepicker('option', 'numberOfMonths', [2, 3]);
前のテキスト : 文字列 : '前'
「先月」リンクの表示テキストを設定します。
初期値: $('.selector').datepicker({ prevText: 'Earlier' });
設定: $('.selector').datepicker('option', 'prevText', 'Earlier');
締め切り年の値を設定します。数値（0 ～ 99）の場合は、現在の年からカウントされます。文字列の場合は、数値に変換されてから現在の年に加算されます。カットオフ年を超えると、前世紀とみなされます。
初期値: $('.selector').datepicker({ shortyearCutoff: 50 });
取得: var shortyearCutoff = $('.selector').datepicker('option', 'shortyearCutoff');
showAnim : 文字列 : 'show'
日付プラグインの表示・非表示を行うアニメーションの名前を設定します。
初期値: $('.selector').datepicker({ showAnim: 'fold' });
取得: var showAnim = $('.selector').datepicker('option', 'showAnim');
設定: $('.selector').datepicker('option', 'showAnim', 'fold');
showButtonPanel : ブール値 : false
パネル上に関連するボタンを表示するかどうかを設定します。
初期値: $('.selector').datepicker({ showButtonPanel: true });
取得: var showButtonPanel = $('.selector').datepicker('option', 'showButtonPanel');
設定: $('.selector').datepicker('option', 'showButtonPanel', true);
複数の月を表示する場合の当月の表示位置を設定します。上/左から x 番目の位置から開始します。
初期値: $('.selector').datepicker({ showCurrentAtPos: 3 });
取得: var showCurrentAtPos = $('.selector').datepicker('option', 'showCurrentAtPos');
設定: $('.selector').datepicker('option', 'showCurrentAtPos', 3);
初期値: $('.selector').datepicker({ showMonthAfter Year: true });
取得: var showMonthAfter Year = $('.selector').datepicker('option', 'showMonthAfter Year');
設定: $('.selector').datepicker('option', 'showMonthAfter Year', true);
showOn : 文字列 : 'focus'
日付プラグインを表示するパネルをトリガーするイベントを設定します。オプションの値: フォーカス、ボタン、両方
。 初期値: $('.selector').datepicker({ showOn: 'both' });
取得: var showOn = $('.selector').datepicker('option', 'showOn');
設定: $('.selector').datepicker('option', 'showOn', 'both');
showOptions : オプション : {}
showAnim を使用してアニメーション効果を表示する場合、このパラメータを使用して追加のパラメータ設定を追加できます。
初期値: $('.selector').datepicker({ showOptions: {direction: 'up' });
設定: $('.selector').datepicker('option', 'showOptions', {direction: 'up');
showOtherMonths : ブール値 : false
初期値: $('.selector').datepicker({ showOtherMonths: true });
取得: var showOtherMonths = $('.selector').datepicker('option', 'showOtherMonths');
ステップ月数 : 数値 : 1
前/次の月をクリックすると、一度に複数の月をスクロールします。
取得: var stepMonths = $('.selector').datepicker('option', 'stepMonths');
設定: $('.selector').datepicker('option', 'stepMonths', 3);
yearRange : 文字列 : '-10:+10'
年のドロップダウン リストに表示される年数を制御します。現在の年を基準にした相対年数 (-nn:+nn) または絶対年数 (-nnnn:+nnnn) を指定できます
初期値: $('.selector').datepicker({ yearRange: '2000:2010' });
設定: $('.selector').datepicker('option', 'yearRange', '2000:2010');
beforeShow : function(input)
このイベントは、日付コントロールがパネルを表示する前にトリガーされ、現在イベントをトリガーしているコントロールのインスタンス オブジェクトを返します。
初期値: $('.selector').datepicker({ beforeShow: function(input) { ... } });
beforeShowDay : function(date)
日付コントロールがパネルを表示する前に、各パネルの日付がバインドされるとこのイベントがトリガーされ、パラメーターはイベントをトリガーした日付です。関数を呼び出した後、配列を返す必要があります: [0] この日付がオプションかどうか (true/false)、[1] この日付の CSS スタイル名 ("" はデフォルトを意味します)、[2] 次の場合にプロンプトが表示されます。マウスがコンテンツの上に移動します。
初期値: $('.selector').datepicker({ beforeShowDay: function(date) { ... } });
初期値: $('.selector').datepicker({ onChangeMonth Year: function(year, month, inst) { ... } });
onClose: function(dateText, inst)
このイベントは、日付パネルが閉じられたときに (日付が選択されているかどうかに関係なく) トリガーされ、パラメーターは選択された日付と現在の日付プラグインのインスタンスです。
onSelect : function(dateText, inst)
このイベントは、日付パネルで日付が選択されるとトリガーされます。パラメーターは、選択された日付と現在の日付プラグインのインスタンスです。
$('.selector').datepicker({ onSelect: function(dateText, inst) { ... } });
上記の内容は、JQuery datepicker の使用法を紹介しています。気に入っていただければ幸いです。