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');
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.
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' });
Tetapan: $('.selector').datepicker('option', 'buttonImage', '/images/datepicker.gif');
butangImageOnly : Boolean : false
Permulaan: $('.selector').datepicker({ buttonImageOnly: true });
Dapatkan: var buttonImageOnly = $('.selector').datepicker('option', 'buttonImageOnly');
butangTeks : Rentetan : '...'
Tetapkan kandungan teks butang pencetus.
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 });
Tetapan: $('.selector').datepicker('option', 'changeMonth', true
tukarTahun : Boolean : palsu
Tetapan membenarkan pemilihan tahun melalui senarai juntai bawah.
Permulaan: $('.selector').datepicker({ changeYear: true });
Tetapan: $('.selector').datepicker('option', 'changeYear', true);
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');
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');
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);
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.
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 });
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 });
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 });
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' });
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']
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']);
Initiale : $('.selector').datepicker({ navigationAsDateFormat: true });
Obtenez : var navigationAsDateFormat = $('.selector').datepicker('option', 'navigationAsDateFormat');
Paramètres : $('.selector').datepicker('option', 'navigationAsDateFormat', true
);
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.
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' });
Paramètres : $('.selector').datepicker('option', 'prevText', 'Earlier');
shortYearCutoff : String, Number : '10'
Initiale : $('.selector').datepicker({ shortYearCutoff: 50 });
Obtenez : var shortYearCutoff = $('.selector').datepicker('option', 'shortYearCutoff');
showAnim : String : 'show'
Définissez le nom de l'animation qui affiche et masque le plug-in de date.
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 });
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);
Initiale : $('.selector').datepicker({ showMonthAfterYear: true });
Obtenez : var showMonthAfterYear = $('.selector').datepicker('option', 'showMonthAfterYear');
Paramètres : $('.selector').datepicker('option', 'showMonthAfterYear', true
);
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.
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 });
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 });
Paramètres : $('.selector').datepicker('option', 'stepMonths', 3);
yearRange : String : '-10 : 10'
Initiale : $('.selector').datepicker({ yearRange: '2000:2010' });
Obtenez : var yearRange = $('.selector').datepicker('option', 'yearRange');
beforeShow : fonction(entrée)
Initiale : $('.selector').datepicker({ beforeShow: function(input) { ... } });
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.
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) { ... } });
$('.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.