ホームページ ウェブフロントエンド jsチュートリアル jquery datepickerパラメータの概要とexamples_jquery

jquery datepickerパラメータの概要とexamples_jquery

May 16, 2016 pm 04:52 PM

复制代代码如下:





<script><br>$(document).ready(function() {<br>$("#datepicker").datepicker();<br>});<br></script>



2.パラメータ

复制代码代码如下:

altField : String : ''
将选择的日期同步到另一个域中,配合altFormat可以显示不同格式的日期字符串。
初始:$('.selector').datepicker({ altField: '#actualDate' });
获取:var altField = $('.selector').datepicker('option', 'altField');
设置:$('.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 : String : ''
在日期插件的所属域后面添加指定的字符串。
初始:$('.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 : Boolean : false
Set to true to place an image after the field to use as the trigger without it appearing on a button.
初始:$('.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');
设置:$('.selector').datepicker('option', 'buttonText', 'Choose');

changeMonth : Boolean : false
设置允许通过下拉框列表选取月份。
初始:$('.selector').datepicker({ changeMonth: true });
获取:var changeMonth = $('.selector').datepicker('option', 'changeMonth');
设置:$('.selector').datepicker('option', 'changeMonth', true);

changeYear : Boolean : false
设置允许通过下拉框列表选取年份。
初始:$('.selector').datepicker({ changeYear: true });
获取:var changeYear = $('.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 : Boolean : true
如果设置为true,则约束当前输入的日期格式。
初始:$('.selector').datepicker({ constrainInput: false });
获取:var constrainInput = $('.selector').datepicker('option', 'constrainInput');
设置:$('.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 : Array : ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
设置一星期中每天的名称,从星期天开始。此内容用于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 : 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', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
设置一星期中每天的缩语,从星期天开始,此内容用于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 : Date, Number, String : null
设置默认加载完后第一次显示时选中的日期。可以是Date对象,或者是数字(从今天算起,例如+7),或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如:'+1m +7d')。
初始:$('.selector').datepicker({ defaultDate: +7 });
获取:var defaultDate = $('.selector').datepicker('option', 'defaultDate');
设置:$('.selector').datepicker('option', 'defaultDate', +7);

duration : String, Number : 'normal'
设置日期控件展开动画的显示时间,可选是"slow", "normal", "fast",''代表立刻,数字代表毫秒数。
初始:$('.selector').datepicker({ duration: 'slow' });
获取:var duration = $('.selector').datepicker('option', 'duration');
设置:$('.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');
设置:$('.selector').datepicker('option', 'gotoCurrent', true);

hideIfNoPrevNext : Boolean : false
设置当没有上一个/下一个可选择的情况下,隐藏掉相应的按钮。(默认为不可用)
初始:$('.selector').datepicker({ hideIfNoPrevNext: true });
获取: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'代表日, 例如:'+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 : Date, Number, String : 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 : Array : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
设置所有月份的名称。
初始:$('.selector').datepicker({monthNames:['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December']});
获取:var monthNames = $('.selector').datepicker('option', 'monthNames');
设置:$('.selector').datepicker('option', 'monthNames', ['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December']);

monthNamesShort : Array : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
设置所有月份的缩写。
初始:$('.selector').datepicker({monthNamesShort:['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec']});
获取:var monthNamesShort = $('.selector').datepicker('option', 'monthNamesShort');
设置:$('.selector').datepicker('option', 'monthNamesShort', ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec']);

navigationAsDateFormat : Boolean : false
如果设置为true,则formatDate函数将应用到 prevText,nextText和currentText的值中显示,例如显示为月份名称。
初始:$('.selector').datepicker({ navigationAsDateFormat: true });
获取:var navigationAsDateFormat = $('.selector').datepicker('option', 'navigationAsDateFormat');
设置:$('.selector').datepicker('option', 'navigationAsDateFormat', true);

nextText : String : 'Next'
设置“下个月”链接的显示文字。
初始:$('.selector').datepicker({ nextText: 'Later' });
获取:var nextText = $('.selector').datepicker('option', 'nextText');
设置:$('.selector').datepicker('option', 'nextText', 'Later');

numberOfMonths : Number, Array : 1
设置一次要显示多少个月份。如果为整数则是显示月份的数量,如果是数组,则是显示的行与列的数量。
初始:$('.selector').datepicker({ numberOfMonths: [2, 3] });
获取:var numberOfMonths = $('.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({ shortYearCutoff: 50 });
获取:var shortYearCutoff = $('.selector').datepicker('option', 'shortYearCutoff');
设置:$('.selector').datepicker('option', 'shortYearCutoff', 50);

showAnim : String : 'show'
设置显示、隐藏日期插件的动画的名称。
初始:$('.selector').datepicker({ showAnim: 'fold' });
获取:var showAnim = $('.selector').datepicker('option', 'showAnim');
设置:$('.selector').datepicker('option', 'showAnim', 'fold');

showButtonPanel : Boolean : false
设置是否在面板上显示相关的按钮。
初始:$('.selector').datepicker({ showButtonPanel: true });
获取:var showButtonPanel = $('.selector').datepicker('option', 'showButtonPanel');
设置:$('.selector').datepicker('option', 'showButtonPanel', true);

showCurrentAtPos : Number : 0
设置当多月份显示的情况下,当前月份显示的位置。自顶部/左边开始第x位。
初始:$('.selector').datepicker({ showCurrentAtPos: 3 });
获取:var showCurrentAtPos = $('.selector').datepicker('option', 'showCurrentAtPos');
设置:$('.selector').datepicker('option', 'showCurrentAtPos', 3);

showMonthAfterYear : Boolean : false
是否在面板的头部年份后面显示月份。
初始:$('.selector').datepicker({ showMonthAfterYear: true });
获取:var showMonthAfterYear = $('.selector').datepicker('option', 'showMonthAfterYear');
设置:$('.selector').datepicker('option', 'showMonthAfterYear', true);

showOn : String : 'focus'
设置什么事件触发显示日期插件的面板,可选值:focus, button, both
初始:$('.selector').datepicker({ showOn: 'both' });
获取:var showOn = $('.selector').datepicker('option', 'showOn');
设置:$('.selector').datepicker('option', 'showOn', 'both');

showOptions : Options : {}
如果使用showAnim来显示动画效果的话,可以通过此参数来增加一些附加的参数设置。
初始:$('.selector').datepicker({ showOptions: {direction: 'up' });
获取:var showOptions = $('.selector').datepicker('option', 'showOptions');
设置:$('.selector').datepicker('option', 'showOptions', {direction: 'up');

showOtherMonths : Boolean : false
是否在当前面板显示上、下两个月的一些日期数(不可选)。
初始:$('.selector').datepicker({ showOtherMonths: true });
获取:var showOtherMonths = $('.selector').datepicker('option', 'showOtherMonths');
设置:$('.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'
年のドロップダウン リストに表示される年数を制御します。現在の年を基準にした相対年数 (-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(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) { ... } });

$.datepicker.setDefaults( settings ) - 日付選択プラグインのパラメーターをグローバルに設定します。
$.datepicker.formatDate( format, date, settings ) - 表示される日付文字列をフォーマットします
$。 datepicker.iso8601Week(date) - 日付を指定すると、実際にその年の週になります
$.datepicker.parseDate(format, value, settings) - 指定された形式に従って日付文字列を取得します


d - 月の日 (先頭のゼロなし)
dd - 月の日 (2 桁)
o - 年の日 (先頭のゼロなし) 0)
oo - 年間の日 (3 桁)
D - 日の名前 (短い)
DD - 日の名前 (長い)
m - 月 (先頭のゼロなし)
mm - 月 (2 桁)
M - 短い月名
MM - 長い月名
y - 年 (2 桁)
yy - 年 (4 桁)
@ - Unix タイムスタンプ (1970 年 1 月 1 日から)
'...' - テキスト
" - 一重引用符
(その他) - テキスト


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'
タイムスタンプ - '@'
W3C - 'yy-mm-dd'

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します:内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換()メソッドを使用することです。 str = str.replace( "find"、 "置換"); この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace(/fi

8見事なjQueryページレイアウトプラグイン 8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

楽なWebページレイアウトのためにjQueryを活用する:8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。 この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます

独自のAjax Webアプリケーションを構築します 独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか? Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

10 jQueryの楽しみとゲームプラグイン 10 jQueryの楽しみとゲームプラグイン Mar 08, 2025 am 12:42 AM

10の楽しいjQueryゲームプラグインして、あなたのウェブサイトをより魅力的にし、ユーザーの粘着性を高めます! Flashは依然としてカジュアルなWebゲームを開発するのに最適なソフトウェアですが、jQueryは驚くべき効果を生み出すこともできます。また、純粋なアクションフラッシュゲームに匹敵するものではありませんが、場合によってはブラウザで予期せぬ楽しみもできます。 jquery tic toeゲーム ゲームプログラミングの「Hello World」には、JQueryバージョンがあります。 ソースコード jQueryクレイジーワードコンポジションゲーム これは空白のゲームであり、単語の文脈を知らないために奇妙な結果を生み出すことができます。 ソースコード jquery鉱山の掃引ゲーム

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか? 独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか? Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

Ajaxを使用して動的にボックスコンテンツをロードします Ajaxを使用して動的にボックスコンテンツをロードします Mar 06, 2025 am 01:07 AM

このチュートリアルでは、Ajaxを介してロードされた動的なページボックスの作成を示しており、フルページのリロードなしでインスタントリフレッシュを可能にします。 JQueryとJavaScriptを活用します。カスタムのFacebookスタイルのコンテンツボックスローダーと考えてください。 重要な概念: ajaxとjquery

jQuery Parallaxチュートリアル - アニメーションヘッダーの背景 jQuery Parallaxチュートリアル - アニメーションヘッダーの背景 Mar 08, 2025 am 12:39 AM

このチュートリアルでは、jQueryを使用して魅惑的な視差の背景効果を作成する方法を示しています。 見事な視覚的な深さを作成するレイヤー画像を備えたヘッダーバナーを構築します。 更新されたプラグインは、jQuery 1.6.4以降で動作します。 ダウンロードしてください

JavaScript用のクッキーレスセッションライブラリを作成する方法 JavaScript用のクッキーレスセッションライブラリを作成する方法 Mar 06, 2025 am 01:18 AM

このJavaScriptライブラリは、Cookieに依存せずにセッションデータを管理するためにWindow.nameプロパティを活用します。 ブラウザ全体でセッション変数を保存および取得するための堅牢なソリューションを提供します。 ライブラリは、セッションの3つのコア方法を提供します

See all articles