コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JQuery datepicker use_jqueryの詳しい説明

JQuery datepicker use_jqueryの詳しい説明

WBOY
リリース： 2016-05-16 15:23:27
オリジナル
1786 人が閲覧しました

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');

altFormat : 文字列 : ''


altField が設定されている場合、別のフィールドに表示される日付形式。

初期値: $('.selector').datepicker({ altFormat: 'yy-mm-dd' });
取得: var altFormat = $('.selector').datepicker('option', 'altFormat');
設定: $('.selector').datepicker('option', 'altFormat', 'yy-mm-dd');

追加テキスト : 文字列 : ''


日付プラグインのドメインの後に指定した文字列を追加します。

初期値: $('.selector').datepicker({ appendText: '(yyyy-mm-dd)' });

取得: var appendText = $('.selector').datepicker('option', 'appendText');
設定: $('.selector').datepicker('option', 'appendText', '(yyyy-mm-dd)');

ボタン画像 : 文字列 : ''

ポップアップボタンの画像を設定します。空でない場合、ボタンのテキストは 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);


ボタンテキスト : 文字列 : '...'


トリガーボタンのテキスト内容を設定します。

初期値: $('.selector').datepicker({ buttonText: 'Choose' });

取得: var buttonText = $('.selector').datepicker('option', 'buttonText');
設定: $('.selector').datepicker('option', 'buttonText', 'Choose');

changeMonth : ブール値 : false


設定では、ドロップダウン リストから月を選択できます。
初期値: $('.selector').datepicker({ changeMonth: true });

取得: varchangeMonth = $('.selector').datepicker('option', 'changeMonth');

設定: $('.selector').datepicker('option', 'changeMonth', true);

change Year : ブール値 : false



この設定では、ドロップダウン リストから年を選択できます。
初期値: $('.selector').datepicker({change Year: true });
取得: var change Year = $('.selector').datepicker('option', 'changeyear');

設定: $('.selector').datepicker('option', 'changeyear', true);


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);

currentText : String : '今日'


その日のボタンのテキスト内容を設定します。このボタンは showButtonPanel パラメータの設定を通じて表示する必要があります。

初期値: $('.selector').datepicker({ currentText: 'Now' });
取得: var currentText = $('.selector').datepicker('option', 'currentText');
設定: $('.selector').datepicker('option', 'currentText', 'Now');

日付形式 : 文字列 : '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');
設定: $('.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);

期間 : 文字列、数値 : 'normal'


日付コントロールの展開アニメーションの表示時間を設定します。オプションは「遅い」、「標準」、「速い」です。'' は即時を表し、数値はミリ秒を表します。

初期値: $('.selector').datepicker({ period: 'slow' });
取得: varduration = $('.selector').datepicker('option', 'duration');
設定: $('.selector').datepicker('option', 'duration', 'slow');

初日 : 番号 : 0


週の最初の曜日を設定します。日曜日は 0、月曜日は 1、というようになります。

初期値: $('.selector').datepicker({ firstDay: 1 });

取得: var firstDay = $('.selector').datepicker('option', 'firstDay');
設定: $('.selector').datepicker('option', 'firstDay', 1);

gotoCurrent : ブール値 : false

true に設定すると、今日ボタンをクリックすると、今日ではなく現在選択されている日付に移動します。
初期値: $('.selector').datepicker({ gotoCurrent: true });

取得: var gotoCurrent = $('.selector').datepicker('option', 'gotoCurrent');

設定: $('.selector').datepicker('option', 'gotoCurrent', true);

hideIfNoPrevNext : ブール値 : false

前/次のオプションがない場合、対応するボタンを非表示に設定します。 (デフォルトは使用できません)

初期値: $('.selector').datepicker({ hideIfNoPrevNext: true });
取得: var hideIfNoPrevNext = $('.selector').datepicker('option', 'hideIfNoPrevNext');

設定: $('.selector').datepicker('option', 'hideIfNoPrevNext', true);


isRTL : ブール値 : false


true に設定すると、すべてのテキストが右から左に表示されます。

初期値: $('.selector').datepicker({ isRTL: 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' });

取得: var maxDate = $('.selector').datepicker('option', 'maxDate');

設定: $('.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月']});

取得: var monthNamesShort = $('.selector').datepicker('option', 'monthNamesShort');

設定: $('.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 });

取得: varnavigationAsDateFormat = $('.selector').datepicker('option', 'navigationAsDateFormat');

設定: $('.selector').datepicker('option', 'navigationAsDateFormat', true);

nextText : String : '次へ'

「来月」リンクの表示テキストを設定します。

初期値: $('.selector').datepicker({ nextText: 'Later' });
取得: var nextText = $('.selector').datepicker('option', 'nextText');

設定: $('.selector').datepicker('option', 'nextText', 'Later');


numberOfMonths : 数値、配列 : 1


一度に表示する月数を設定します。整数の場合は、表示される月数です。配列の場合は、表示される行と列の数です。

初期値: $('.selector').datepicker({numberOfMonths: [2, 3] });

取得: varnumberOfMonths = $('.selector').datepicker('option', 'numberOfMonths');
設定: $('.selector').datepicker('option', 'numberOfMonths', [2, 3]);

前のテキスト : 文字列 : '前'


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

取得: var prevText = $('.selector').datepicker('option', 'prevText');

設定: $('.selector').datepicker('option', 'prevText', 'Earlier');

shortyearCutoff : 文字列、数値 : '+10'



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

設定: $('.selector').datepicker('option', 'shortyearCutoff', 50);


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);

showCurrentAtPos : 番号 : 0


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

showMonthAfter Year : ブール値 : false


パネルのヘッ​​ダーに年の次の月を表示するかどうか。

初期値: $('.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' });

取得: var showOptions = $('.selector').datepicker('option', 'showOptions');

設定: $('.selector').datepicker('option', 'showOptions', {direction: 'up');

showOtherMonths : ブール値 : false

現在のパネルに過去 2 か月と次の 2 か月の日付数値を表示するかどうか (オプションではありません)。

初期値: $('.selector').datepicker({ showOtherMonths: true });
取得: var showOtherMonths = $('.selector').datepicker('option', 'showOtherMonths');

設定: $('.selector').datepicker('option', 'showOtherMonths', true);


ステップ月数 : 数値 : 1


前/次の月をクリックすると、一度に複数の月をスクロールします。

初期値: $('.selector').datepicker({ stepMonths: 3 });

取得: var stepMonths = $('.selector').datepicker('option', 'stepMonths');
設定: $('.selector').datepicker('option', 'stepMonths', 3);

yearRange : 文字列 : '-10:+10'


年のドロップダウン リストに表示される年数を制御します。現在の年を基準にした相対年数 (-nn:+nn) または絶対年数 (-nnnn:+nnnn) を指定できます
初期値: $('.selector').datepicker({ yearRange: '2000:2010' });

取得: var yearRange = $('.selector').datepicker('option', 'yearRange');

設定: $('.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) { ... } });

onChangeMonth Year : function(年、月、インスタ)


このイベントは、年または月が変わるとトリガーされます。パラメーターは、変更された年と月、および現在の日付プラグインのインスタンスです。

初期値: $('.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) { ... } });

上記の内容は、JQuery datepicker の使用法を紹介しています。気に入っていただければ幸いです。

関連ラベル：
datepicker用法 jquery_datepicker
ソース：php.cn
前の記事：シェアしておきたい、よく使うJavaScriptのメソッドと関数まとめ（パート2）_JavaScriptスキル 次の記事：ヒープを使用して Top K アルゴリズムを実装する (JS 実装)_JavaScript スキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
グリッドを使用してこの特定のデザインを作成する: ステップバイステップ ガイド この画像に似たレイアウトを作成しようとしています。このグリッドを使用してみましたが、実現できません。 <ulclass="container">&l...
から 2024-04-06 20:29:08
0
2
492
3 レベル階層のカスタム分類を使用して woocommerce 関連製品を選択します 「スポーツ」というカスタム分類を持つ woocommerce ストアがあります。分類には、親、子、子という 3 つのレベルがあります。たとえば、屋内スポーツ > アリーナ ス...
から 2024-04-06 20:05:30
0
1
544
livewire遅延プレースホルダーでlaravelコンポーネントを使用する方法 laravel コンポーネントのスケルトンを livewire3 プレースホルダー内に追加したい これまでに試したこと: Laravel コンポーネントを含めることによる Live...
から 2024-04-06 20:02:10
0
2
543
MySQL SQLクエリを使用して別のテーブルのフィールドの合計を計算する 次のようなスキーマがあります。 属性「user_id」と「username」を持つユーザーテーブルと、属性「customer_id」（user_idのFK）と「finalPrice...
から 2024-04-06 19:39:29
0
1
441
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート