Rumah > Artikel > hujung hadapan web > Penjelasan terperinci tentang JQuery datepicker usage_jquery

Penjelasan terperinci tentang JQuery datepicker usage_jquery

WBOYasal: 2016-05-16 15:23:271742semak imbas

UI jQuery sangat berkuasa Pemalam pemilihan tarikh Datepicker ialah pemalam yang fleksibel Kami boleh menyesuaikan kaedah paparannya, termasuk format tarikh, bahasa, mengehadkan julat tarikh yang dipilih, menambah butang berkaitan dan navigasi lain.

Alamat rasmi: http://docs.jquery.com/UI/Datepicker, contoh rasmi: http://jqueryui.com/demos/datepicker/.

Alamat yang bagus untuk tapak kesan antara muka UI jQuery DIYhttp://jqueryui.com/themeroller/

Penggunaan asas 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 : ''

Segerakkan tarikh yang dipilih ke domain lain dan gunakan altFormat untuk memaparkan rentetan tarikh dalam format yang berbeza.

Permulaan: $('.selector').datepicker({ altField: '#actualDate' });
Dapatkan: var altField = $('.selector').datepicker('option', 'altField');
Tetapan: $('.selector').datepicker('option', 'altField', '#actualDate');

altFormat : Rentetan : ''

Apabila altField ditetapkan, format tarikh dipaparkan dalam medan lain.

Permulaan: $('.selector').datepicker({ altFormat: 'yy-mm-dd' });
Dapatkan: var altFormat = $('.selector').datepicker('option', 'altFormat');
Tetapan: $('.selector').datepicker('option', 'altFormat', 'yy-mm-dd');

tambahTeks : Rentetan : ''

Tambahkan rentetan yang ditentukan selepas domain pemalam tarikh.

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

Dapatkan: var appendText = $('.selector').datepicker('option', 'appendText');
Tetapan: $('.selector').datepicker('option', 'appendText', '(yyyy-mm-dd)');

butangImej : Rentetan : ''

Tetapkan gambar butang timbul Jika ia tidak kosong, teks butang akan menjadi atribut alt dan tidak akan dipaparkan secara langsung.
Permulaan: $('.selector').datepicker({ buttonImage: '/images/datepicker.gif' });

Dapatkan: var buttonImage = $('.selector').datepicker('option', 'buttonImage');

Tetapan: $('.selector').datepicker('option', 'buttonImage', '/images/datepicker.gif');

butangImageOnly : Boolean : false

Tetapkan kepada benar untuk meletakkan imej selepas medan untuk digunakan sebagai pencetus tanpa ia muncul pada butang.

Permulaan: $('.selector').datepicker({ buttonImageOnly: true });
Dapatkan: var buttonImageOnly = $('.selector').datepicker('option', 'buttonImageOnly');

Tetapan: $('.selector').datepicker('option', 'buttonImageOnly', true);

butangTeks : Rentetan : '...'

Tetapkan kandungan teks butang pencetus.

Permulaan: $('.selector').datepicker({ buttonTeks: 'Choose' });

Dapatkan: var buttonText = $('.selector').datepicker('option', 'buttonText');
Tetapan: $('.selector').datepicker('option', 'buttonText', 'Choose');

tukarBulan : Boolean : palsu

Tetapan membenarkan pemilihan bulan melalui senarai juntai bawah.
Permulaan: $('.selector').datepicker({ changeMonth: true });

Dapatkan: var changeMonth = $('.selector').datepicker('option', 'changeMonth');

Tetapan: $('.selector').datepicker('option', 'changeMonth', true

tukarTahun : Boolean : palsu

Tetapan membenarkan pemilihan tahun melalui senarai juntai bawah.
Permulaan: $('.selector').datepicker({ changeYear: true });

Dapatkan: var changeYear = $('.selector').datepicker('option', 'changeYear');

Tetapan: $('.selector').datepicker('option', 'changeYear', true);

closeTextType: StringDefault: 'Selesai'

Tetapkan kandungan teks butang tutup Butang ini perlu dipaparkan melalui tetapan parameter showButtonPanel.
Permulaan: $('.selector').datepicker({ closeTeks: 'X' });
Dapatkan: var closeText = $('.selector').datepicker('option', 'closeText');

Tetapan: $('.selector').datepicker('option', 'closeText', 'X');

constrainInput : Boolean : true

Jika ditetapkan kepada benar, mengekang format tarikh input semasa.
Permulaan: $('.selector').datepicker({ constrainInput: false });
Dapatkan: var constrainInput = $('.selector').datepicker('option', 'constrainInput');
Tetapan: $('.selector').datepicker('option', 'constrainInput', false);

Teks semasa : Rentetan : 'Hari ini'

Tetapkan kandungan teks butang untuk hari itu Butang ini perlu dipaparkan melalui tetapan parameter showButtonPanel.
Permulaan: $('.selector').datepicker({Teks semasa: 'Sekarang' });
Dapatkan: var currentText = $('.selector').datepicker('option', 'currentText');
Tetapan: $('.selector').datepicker('option', 'currentText', 'Now');

Format tarikh : Rentetan : 'mm/dd/yy'

Tetapkan format paparan rentetan tarikh.

Permulaan: $('.selector').datepicker({ dateFormat: 'yy-mm-dd' });
Dapatkan: var dateFormat = $('.selector').datepicker('option', 'dateFormat');
Tetapan: $('.selector').datepicker('option', 'dateFormat', 'yy-mm-dd');

Nama hari : Susunan : ['Ahad', 'Isnin', 'Selasa', 'Rabu', 'Khamis', 'Jumaat', 'Sabtu']

Définissez le nom de chaque jour de la semaine, à partir du dimanche. Ce contenu est affiché lorsque le dateFormat est utilisé et lorsque la souris se déplace vers l'en-tête de la ligne du calendrier.
Initiale : $('.selector').datepicker({ dayNames : ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] });
Obtenez : var dayNames = $('.selector').datepicker('option', 'dayNames');
Paramètres : $('.selector').datepicker('option', 'dayNames', ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']) ;

dayNamesMin : Array : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']

Définissez l'abréviation pour chaque jour de la semaine, à partir du dimanche, ce contenu est affiché lorsqu'il est utilisé dans dateFormat et affiché dans l'en-tête de ligne du calendrier précédent.
Initiale : $('.selector').datepicker({ dayNamesMin : ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] });
Obtenez : var dayNamesMin = $('.selector').datepicker('option', 'dayNamesMin');
Paramètres : $('.selector').datepicker('option', 'dayNamesMin', ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa']) ;

dayNamesShort : Array : ['Sun', 'Mon', 'Tue', 'Wed', 'Jeudi', 'Fri', 'Sat']

Définissez l'abréviation pour chaque jour de la semaine, à partir du dimanche, ce contenu est affiché lorsqu'il est utilisé dans dateFormat et affiché dans l'en-tête de ligne du calendrier précédent.
Initiale : $('.selector').datepicker({ dayNamesShort : ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'] });
Obtenez : var dayNamesShort = $('.selector').datepicker('option', 'dayNamesShort');
Paramètres : $('.selector').datepicker('option', 'dayNamesShort', ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam']) ;

defaultDate : Date, Nombre, Chaîne : null

Définissez la date par défaut sélectionnée lors de son premier affichage après le chargement. Il peut s'agir d'un objet Date, d'un nombre (à partir d'aujourd'hui, par exemple 7) ou d'une chaîne valide (« y » représente l'année, « m » représente le mois, « w » représente la semaine, « d » représente le jour, par exemple : '1m 7d').
Initiale : $('.selector').datepicker({ defaultDate : 7 });
Obtenez : var defaultDate = $('.selector').datepicker('option', 'defaultDate');
Paramètres : $('.selector').datepicker('option', 'defaultDate', 7);

durée : Chaîne, Nombre : 'normal'

Définissez l'heure d'affichage de l'animation d'expansion du contrôle de date, les options sont "lent", "normal", "rapide", '' représente immédiatement et le nombre représente le nombre de millisecondes.

Initiale : $('.selector').datepicker({ durée : 'slow' });
Obtenez : var durée = $('.selector').datepicker('option', 'duration');
Paramètres : $('.selector').datepicker('option', 'duration', 'slow');

premierJour : Numéro : 0

Réglez le premier jour de la semaine. Dimanche vaut 0, lundi vaut 1, et ainsi de suite.

Initiale : $('.selector').datepicker({ firstDay : 1 });

Obtenez : var firstDay = $('.selector').datepicker('option', 'firstDay');
Paramètre : $('.selector').datepicker('option', 'firstDay', 1);

gotoCurrent : Booléen : faux

Si défini sur true, lorsque vous cliquez sur le bouton Aujourd'hui, il passera à la date actuellement sélectionnée au lieu d'aujourd'hui.
Initiale : $('.selector').datepicker({ gotoCurrent: true });

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

Paramètre : $('.selector').datepicker('option', 'gotoCurrent', true
);

hideIfNoPrevNext : Boolean : false

Définissez le bouton correspondant pour qu'il soit masqué lorsqu'il n'y a pas d'option précédente/suivante. (La valeur par défaut n'est pas disponible)
Initiale : $('.selector').datepicker({ hideIfNoPrevNext: true });

Obtenez : var hideIfNoPrevNext = $('.selector').datepicker('option', 'hideIfNoPrevNext');

Paramètres : $('.selector').datepicker('option', 'hideIfNoPrevNext', true
);

isRTL : Booléen : faux

Si défini sur true, tout le texte sera de droite à gauche.
Initiale : $('.selector').datepicker({ isRTL: true });

Obtenez : var isRTL = $('.selector').datepicker('option', 'isRTL');

Paramètre : $('.selector').datepicker('option', 'isRTL', true
);

maxDate : Date, Nombre, Chaîne : null

Définissez une date maximale sélectionnable. Il peut s'agir d'un objet Date, d'un nombre (à partir d'aujourd'hui, par exemple 7) ou d'une chaîne valide (« y » représente l'année, « m » représente le mois, « w » représente la semaine, « d » représente le jour, par exemple : '1m 7d').
Initiale : $('.selector').datepicker({ maxDate : ' 1m 1w' });

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

Paramètre : $('.selector').datepicker('option', 'maxDate', ' 1m 1w');
$('.selector').datepicker('option', 'maxDate', '12/25/2012');

minDate : Date, Nombre, Chaîne : null

Définissez une date minimale sélectionnable. Il peut s'agir d'un objet Date, d'un nombre (à partir d'aujourd'hui, par exemple 7) ou d'une chaîne valide (« y » représente l'année, « m » représente le mois, « w » représente la semaine, « d » représente le jour, par exemple : '1m 7d').
Initiale : $('.selector').datepicker({ minDate: new Date(2007, 1 - 1, 1) });
Obtenez : var minDate = $('.selector').datepicker('option', 'minDate');
Paramètre : $('.selector').datepicker('option', 'minDate', new Date(2007, 1 - 1, 1));

$('.selector').datepicker('option', 'minDate', '12/25/2012');
MonthNames : Array : ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', ' Décembre']

Définissez les noms de tous les mois.
Initiale : $('.selector').datepicker({monthNames:['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September ','Octobre','Novembre','Décembre']});
Obtenez : var MonthNames = $('.selector').datepicker('option', 'monthNames');
Paramètres : $('.selector').datepicker('option', 'monthNames', ['Januar','Februar','Marts','April','Maj','Juni','Juli',' août', 'septembre', 'octobre', 'novembre', 'décembre']) ; MonthNamesShort : Array : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', ' Déc']

Définissez des abréviations pour tous les mois.

Initiale : $('.selector').datepicker({monthNamesShort:['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug' ,'Sep','Okt','Nov','Dec']});

Obtenez : var MonthNamesShort = $('.selector').datepicker('option', 'monthNamesShort');
Paramètres : $('.selector').datepicker('option', 'monthNamesShort', ['Jan','Feb','Mar','Apr','Maj','Jun','Jul',' Août','Sep','Okt','Nov','Dec']);

navigationAsDateFormat : Booléen : faux

Si définie sur true, la fonction formatDate sera appliquée aux valeurs de prevText, nextText et currentText pour afficher, par exemple, comme nom du mois.

Initiale : $('.selector').datepicker({ navigationAsDateFormat: true });
Obtenez : var navigationAsDateFormat = $('.selector').datepicker('option', 'navigationAsDateFormat');
Paramètres : $('.selector').datepicker('option', 'navigationAsDateFormat', true
);

nextText : String : 'Suivant'

Définissez le texte d'affichage du lien "Mois suivant".

Initiale : $('.selector').datepicker({ nextText : 'Later' });
Obtenez : var nextText = $('.selector').datepicker('option', 'nextText');
Paramètres : $('.selector').datepicker('option', 'nextText', 'Plus tard');

numberOfMonths : Nombre, Tableau : 1

Définissez le nombre de mois à afficher à la fois. S'il s'agit d'un nombre entier, c'est le nombre de mois affichés. S'il s'agit d'un tableau, c'est le nombre de lignes et de colonnes affichées.

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

Obtenez : var numberOfMonths = $('.selector').datepicker('option', 'numberOfMonths');
Paramètre : $('.selector').datepicker('option', 'numberOfMonths', [2, 3]);

prevText : String : 'Précédent'

Définissez le texte d'affichage du lien "Mois dernier".
Initiale : $('.selector').datepicker({ prevText: 'Earlier' });

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

Paramètres : $('.selector').datepicker('option', 'prevText', 'Earlier');

shortYearCutoff : String, Number : '10'

Définissez la valeur de l'année limite. S'il s'agit d'un nombre (0-99), le décompte commencera à partir de l'année en cours. S'il s'agit d'une chaîne, il sera converti en nombre puis ajouté à l'année en cours. Lorsque l’année limite est dépassée, elle est considérée comme le siècle précédent.

Initiale : $('.selector').datepicker({ shortYearCutoff: 50 });
Obtenez : var shortYearCutoff = $('.selector').datepicker('option', 'shortYearCutoff');

Paramètre : $('.selector').datepicker('option', 'shortYearCutoff', 50);

showAnim : String : 'show'

Définissez le nom de l'animation qui affiche et masque le plug-in de date.

Initiale : $('.selector').datepicker({ showAnim: 'fold' });

Obtenez : var showAnim = $('.selector').datepicker('option', 'showAnim');
Paramètres : $('.selector').datepicker('option', 'showAnim', 'fold');

showButtonPanel : Booléen : faux

Définissez s'il faut afficher les boutons associés sur le panneau.
Initiale : $('.selector').datepicker({ showButtonPanel: true });

Obtenez : var showButtonPanel = $('.selector').datepicker('option', 'showButtonPanel');

Paramètres : $('.selector').datepicker('option', 'showButtonPanel', true
);

showCurrentAtPos : Numéro : 0

Définissez la position où le mois en cours est affiché lorsque plusieurs mois sont affichés. En commençant à la xième position en partant du haut/gauche.
Initiale : $('.selector').datepicker({ showCurrentAtPos: 3 });
Obtenez : var showCurrentAtPos = $('.selector').datepicker('option', 'showCurrentAtPos');
Paramètres : $('.selector').datepicker('option', 'showCurrentAtPos', 3);

showMonthAfterYear : Booléen : faux

S'il faut afficher le mois après l'année dans l'en-tête du panneau.

Initiale : $('.selector').datepicker({ showMonthAfterYear: true });
Obtenez : var showMonthAfterYear = $('.selector').datepicker('option', 'showMonthAfterYear');
Paramètres : $('.selector').datepicker('option', 'showMonthAfterYear', true
);

showOn : String : 'focus'

Définissez quel événement déclenche le panneau qui affiche le plug-in de date. Valeurs facultatives : focus, bouton, les deux

. Initiale : $('.selector').datepicker({ showOn: 'both' });
Obtenez : var showOn = $('.selector').datepicker('option', 'showOn');
Paramètres : $('.selector').datepicker('option', 'showOn', 'both');

afficherOptions : Options : {}

Si vous utilisez showAnim pour afficher des effets d'animation, vous pouvez utiliser ce paramètre pour ajouter des paramètres supplémentaires.

Initiale : $('.selector').datepicker({ showOptions : {direction : 'up' });

Obtenez : var showOptions = $('.selector').datepicker('option', 'showOptions');
Paramètres : $('.selector').datepicker('option', 'showOptions', {direction : 'up');

showOtherMonths : Boolean : false

S'il faut afficher certains numéros de date des deux mois précédents et suivants dans le panneau actuel (non facultatif).
Initiale : $('.selector').datepicker({ showOtherMonths: true });

Obtenez : var showOtherMonths = $('.selector').datepicker('option', 'showOtherMonths');

Paramètres : $('.selector').datepicker('option', 'showOtherMonths', true
);

stepMonths : Nombre : 1

Lorsque vous cliquez sur le mois précédent/suivant, plusieurs mois à la fois s'affichent.
Initiale : $('.selector').datepicker({ stepMonths: 3 });

Obtenez : var stepMonths = $('.selector').datepicker('option', 'stepMonths');

Paramètres : $('.selector').datepicker('option', 'stepMonths', 3);

yearRange : String : '-10 : 10'

Contrôle le nombre d'années affiché dans la liste déroulante des années, qui peut être relatif à l'année en cours (-nn : nn) ou absolu (-nnnn : nnnn)

Initiale : $('.selector').datepicker({ yearRange: '2000:2010' });
Obtenez : var yearRange = $('.selector').datepicker('option', 'yearRange');

Paramètre : $('.selector').datepicker('option', 'yearRange', '2000:2010');

beforeShow : fonction(entrée)

Cet événement est déclenché avant que le contrôle de date n'affiche le panneau et renvoie l'objet instance du contrôle qui déclenche actuellement l'événement.

Initiale : $('.selector').datepicker({ beforeShow: function(input) { ... } });

beforeShowDay : fonction(date)

Avant que le contrôle de date n'affiche le panneau, cet événement est déclenché lorsque la date sur chaque panneau est liée, et le paramètre est la date qui a déclenché l'événement. Après avoir appelé la fonction, un tableau doit être renvoyé : [0] Si cette date est facultative (vrai/faux), [1] Le nom du style CSS de cette date ("" signifie par défaut), [2] Une invite apparaîtra lorsque la souris est déplacée au-dessus du contenu.

Initiale : $('.selector').datepicker({ beforeShowDay: function(date) { ... } });

onChangeMonthYear : function(année, mois, inst)

Cet événement est déclenché lorsque l'année ou le mois change. Les paramètres sont l'année et le mois modifiés et l'instance du plug-in de date actuelle.
Initiale : $('.selector').datepicker({ onChangeMonthYear: function(year,month, inst) { ... } });

onClose : function(dateText, inst)

Cet événement est déclenché lorsque le panneau de date est fermé (qu'une date soit sélectionnée ou non), et les paramètres sont la date sélectionnée et l'instance du plug-in de date actuelle.
Initiale : $('.selector').datepicker({ onClose: function(dateText, inst) { ... } });

onSelect : fonction(dateText, inst)

Cet événement est déclenché lorsqu'une date est sélectionnée dans le panneau de date. Les paramètres sont la date sélectionnée et l'instance du plug-in de date actuelle.

$('.selector').datepicker({ onSelect: function(dateText, inst) { ... } });

Le contenu ci-dessus vous présente l'utilisation de JQuery datepicker, j'espère qu'il vous plaira.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Koleksi kaedah dan fungsi JavaScript yang biasa digunakan yang perlu saya kongsikan (Bahagian 2)_kemahiran javascriptArtikel seterusnya：Koleksi kaedah dan fungsi JavaScript yang biasa digunakan yang perlu saya kongsikan (Bahagian 2)_kemahiran javascript

Artikel berkaitan

Lihat lagi