Die jQuery-Benutzeroberfläche ist sehr leistungsstark. Das Datumsauswahl-Plugin „Datepicker“ ist ein flexibles Plug-in. Wir können die Anzeigemethode anpassen, einschließlich Datumsformat und Sprache, den ausgewählten Datumsbereich einschränken, zugehörige Schaltflächen hinzufügen und andere Navigationsmöglichkeiten nutzen.
Offizielle Adresse: http://docs.jquery.com/UI/Datepicker, offizielles Beispiel: http://jqueryui.com/demos/datepicker/.
Eine gute Adresse für DIY-Websites mit jQuery-UI-Schnittstelleneffektenhttp://jqueryui.com/themeroller/
Grundlegende Verwendung von 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 : ''
Nach dem Login kopieren
Synchronisieren Sie das ausgewählte Datum mit einer anderen Domäne und verwenden Sie altFormat, um Datumszeichenfolgen in verschiedenen Formaten anzuzeigen.
Initiale: $('.selector').datepicker({ altField: '#actualDate' });
Holen Sie sich: var altField = $('.selector').datepicker('option', 'altField');
Einstellungen: $('.selector').datepicker('option', 'altField', '#actualDate');
altFormat : String : ''
Wenn altField festgelegt ist, wird das Datumsformat in einem anderen Feld angezeigt.
Initiale: $('.selector').datepicker({ altFormat: 'yy-mm-dd' });
Holen Sie sich: var altFormat = $('.selector').datepicker('option', 'altFormat');
Einstellungen: $('.selector').datepicker('option', 'altFormat', 'yy-mm-dd');
appendText : String : ''
Fügen Sie die angegebene Zeichenfolge nach der Domäne des Datums-Plug-Ins hinzu.
Initiale: $('.selector').datepicker({ appendText: '(yyyy-mm-dd)' });
Holen Sie sich: var appendText = $('.selector').datepicker('option', 'appendText');
Einstellungen: $('.selector').datepicker('option', 'appendText', '(yyyy-mm-dd)');
buttonImage : String : ''
Legen Sie das Bild der Popup-Schaltfläche fest. Wenn es nicht leer ist, wird der Text der Schaltfläche zum Alt-Attribut und wird nicht direkt angezeigt.
Initiale: $('.selector').datepicker({ buttonImage: '/images/datepicker.gif' });
Holen Sie sich: var buttonImage = $('.selector').datepicker('option', 'buttonImage');
Einstellungen: $('.selector').datepicker('option', 'buttonImage', '/images/datepicker.gif');
buttonImageOnly : Boolean : false
Auf „true“ setzen, um ein Bild nach dem Feld zu platzieren, um es als Auslöser zu verwenden, ohne dass es auf einer Schaltfläche erscheint.
Anfänglich: $('.selector').datepicker({ buttonImageOnly: true });
Holen Sie sich: var buttonImageOnly = $('.selector').datepicker('option', 'buttonImageOnly');
Einstellungen: $('.selector').datepicker('option', 'buttonImageOnly', true);
buttonText: String: '...'
Legen Sie den Textinhalt der Auslöseschaltfläche fest.
Initiale: $('.selector').datepicker({ buttonText: 'Choose' });
Holen Sie sich: var buttonText = $('.selector').datepicker('option', 'buttonText');
Einstellungen: $('.selector').datepicker('option', 'buttonText', 'Choose');
changeMonth: Boolean: false
Die Einstellungen ermöglichen die Monatsauswahl über eine Dropdown-Liste.
Anfänglich: $('.selector').datepicker({ changeMonth: true });
Holen Sie sich: var changeMonth = $('.selector').datepicker('option', 'changeMonth');
Einstellungen: $('.selector').datepicker('option', 'changeMonth', true);
changeYear: Boolean: false
Die Einstellung ermöglicht die Auswahl des Jahres über die Dropdown-Liste.
Anfänglich: $('.selector').datepicker({ changeYear: true });
Holen Sie sich: var changeYear = $('.selector').datepicker('option', 'changeYear');
Einstellung: $('.selector').datepicker('option', 'changeYear', true);
closeTextType: StringDefault: 'Fertig'
Legen Sie den Textinhalt der Schaltfläche „Schließen“ fest. Diese Schaltfläche muss durch die Einstellung des Parameters „showButtonPanel“ angezeigt werden.
Initiale: $('.selector').datepicker({ closeText: 'X' });
Holen Sie sich: var closeText = $('.selector').datepicker('option', 'closeText');
Einstellungen: $('.selector').datepicker('option', 'closeText', 'X');
constrainInput: Boolean: true
Wenn auf „true“ gesetzt, wird das aktuelle Eingabedatumsformat eingeschränkt.
Anfänglich: $('.selector').datepicker({ constrainInput: false });
Holen Sie sich: var constrainInput = $('.selector').datepicker('option', 'constrainInput');
Einstellungen: $('.selector').datepicker('option', 'constrainInput', false);
aktueller Text: String: 'Heute'
Legen Sie den Textinhalt der Schaltfläche für den Tag fest. Diese Schaltfläche muss durch die Einstellung des Parameters showButtonPanel angezeigt werden.
Anfänglich: $('.selector').datepicker({ currentText: 'Now' });
Holen Sie sich: var currentText = $('.selector').datepicker('option', 'currentText');
Einstellungen: $('.selector').datepicker('option', 'currentText', 'Now');
Datumsformat: Zeichenfolge: 'mm/tt/jj'
Legen Sie das Anzeigeformat der Datumszeichenfolge fest.
Initiale: $('.selector').datepicker({ dateFormat: 'yy-mm-dd' });
Holen Sie sich: var dateFormat = $('.selector').datepicker('option', 'dateFormat');
Einstellungen: $('.selector').datepicker('option', 'dateFormat', 'yy-mm-dd');
dayNames: Array: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag']
Tetapkan nama setiap hari dalam seminggu, bermula dari Ahad. Kandungan ini dipaparkan apabila dateFormat digunakan, dan apabila tetikus bergerak ke kepala baris dalam kalendar.
Permulaan: $('.selector').datepicker({ dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] });
Dapatkan: var dayNames = $('.selector').datepicker('option', 'dayNames');
Tetapan: $('.selector').datepicker('option', 'dayNames', ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']) ;
dayNamesMin : Array : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
Tetapkan singkatan untuk setiap hari dalam seminggu, bermula dari Ahad, kandungan ini dipaparkan apabila digunakan dalam dateFormat, dan dipaparkan dalam pengepala baris dalam kalendar sebelumnya.
Permulaan: $('.selector').datepicker({ dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] });
Dapatkan: var dayNamesMin = $('.selector').datepicker('option', 'dayNamesMin');
Tetapan: $('.selector').datepicker('option', 'dayNamesMin', ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa']) ;
HariNamesShort : Tatasusunan : ['Ahad', 'Isnin', 'Selasa', 'Rabu', 'Kha', 'Jumaat', 'Sabtu']
Tetapkan singkatan untuk setiap hari dalam seminggu, bermula dari Ahad, kandungan ini dipaparkan apabila digunakan dalam dateFormat, dan dipaparkan dalam pengepala baris dalam kalendar sebelumnya.
Permulaan: $('.selector').datepicker({ dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'] });
Dapatkan: var dayNamesShort = $('.selector').datepicker('option', 'dayNamesShort');
Tetapan: $('.selector').datepicker('option', 'dayNamesShort', ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam']) ;
Tarikh lalai : Tarikh, Nombor, Rentetan : batal
Tetapkan tarikh lalai yang dipilih apabila ia dipaparkan buat kali pertama selepas dimuatkan. Ia boleh menjadi objek Tarikh, nombor (mengira dari hari ini, contohnya 7), atau rentetan yang sah ('y' mewakili tahun, 'm' mewakili bulan, 'w' mewakili minggu, 'd' mewakili hari, contohnya : '1m 7d').
Permulaan: $('.selector').datepicker({ defaultDate: 7 });
Dapatkan: var defaultDate = $('.selector').datepicker('option', 'defaultDate');
Tetapan: $('.selector').datepicker('option', 'defaultDate', 7);
tempoh : Rentetan, Nombor : 'biasa'
Tetapkan masa paparan animasi pengembangan kawalan tarikh, pilihannya adalah "perlahan", "biasa", "cepat", '' mewakili serta-merta dan nombor mewakili bilangan milisaat.
Permulaan: $('.selector').datepicker({ tempoh: 'lambat' });
Dapatkan: var duration = $('.selector').datepicker('option', 'duration');
Tetapan: $('.selector').datepicker('option', 'duration', 'slow');
Hari pertama : Nombor : 0
Tetapkan hari pertama dalam seminggu. Ahad ialah 0, Isnin ialah 1, dan seterusnya.
Permulaan: $('.selector').datepicker({ firstDay: 1 });
Dapatkan: var firstDay = $('.selector').datepicker('option', 'firstDay');
Tetapan: $('.selector').datepicker('option', 'firstDay', 1);
gotoSemasa : Boolean : palsu
Jika ditetapkan kepada benar, apabila mengklik butang hari ini, ia akan beralih ke tarikh yang dipilih pada masa ini dan bukannya hari ini.
Permulaan: $('.selector').datepicker({ gotoCurrent: true });
Dapatkan: var gotoCurrent = $('.selector').datepicker('option', 'gotoCurrent');
Tetapan: $('.selector').datepicker('option', 'gotoCurrent', true);
hideIfNoPrevNext : Boolean : false
Tetapkan butang yang sepadan untuk disembunyikan apabila tiada pilihan sebelumnya/seterusnya. (Lalai tidak tersedia)
Permulaan: $('.selector').datepicker({ hideIfNoPrevNext: true });
Dapatkan: var hideIfNoPrevNext = $('.selector').datepicker('option', 'hideIfNoPrevNext');
Tetapan: $('.selector').datepicker('option', 'hideIfNoPrevNext', true
isRTL : Boolean : false
Jika ditetapkan kepada benar, semua teks akan dari kanan ke kiri.
Permulaan: $('.selector').datepicker({ isRTL: true });
Dapatkan: var isRTL = $('.selector').datepicker('option', 'isRTL');
Tetapan: $('.selector').datepicker('option', 'isRTL', true
maxDate : Tarikh, Nombor, Rentetan : batal
Tetapkan tarikh maksimum yang boleh dipilih. Ia boleh menjadi objek Tarikh, nombor (mengira dari hari ini, contohnya 7), atau rentetan yang sah ('y' mewakili tahun, 'm' mewakili bulan, 'w' mewakili minggu, 'd' mewakili hari, contohnya : '1m 7d').
Permulaan: $('.selector').datepicker({ maxDate: ' 1m 1w' });
Dapatkan: var maxDate = $('.selector').datepicker('option', 'maxDate');
Tetapan: $('.selector').datepicker('option', 'maxDate', ' 1m 1w');
$('.selector').datepicker('option', 'maxDate', '12/25/2012');
minTarikh : Tarikh, Nombor, Rentetan : batal
Tetapkan tarikh minimum yang boleh dipilih. Ia boleh menjadi objek Tarikh, nombor (mengira dari hari ini, contohnya 7), atau rentetan yang sah ('y' mewakili tahun, 'm' mewakili bulan, 'w' mewakili minggu, 'd' mewakili hari, contohnya : '1m 7d').
Permulaan: $('.selector').datepicker({ minDate: new Date(2007, 1 - 1, 1) });
Dapatkan: var minDate = $('.selector').datepicker('option', 'minDate');
Tetapan: $('.selector').datepicker('option', 'minDate', new Date(2007, 1 - 1, 1));
$('.selector').datepicker('option', 'minDate', '12/25/2012');
Nama bulan : Susunan : ['Januari', 'Februari', 'Mac', 'April', 'Mei', 'Jun', 'Julai', 'Ogos', 'September', 'Oktober', 'November', ' Disember']
Tetapkan nama semua bulan.
Permulaan: $('.selector').datepicker({monthNames:['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September ','Oktober', 'November', 'Disember']});
Dapatkan: var monthNames = $('.selector').datepicker('option', 'monthNames');
Tetapan: $('.selector').datepicker('option', 'monthNames', ['Januar','Februar','Marts','April','Maj','Juni','Juli',' Ogos','September','Oktober','November','Disember']);
monthNamesShort : Array : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Ogos', 'Sep', 'Oct', 'Nov', ' Dis']
Tetapkan singkatan untuk semua bulan.
Permulaan: $('.selector').datepicker({monthNamesShort:['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug' ,'Sep','Okt','Nov','Dis']});
Dapatkan: var monthNamesShort = $('.selector').datepicker('option', 'monthNamesShort');
Tetapan: $('.selector').datepicker('option', 'monthNamesShort', ['Jan','Feb','Mar','Apr','Maj','Jun','Jul',' Ogos','Sep','Okt','Nov','Dis']);
navigationAsDateFormat : Boolean : false
Jika ditetapkan kepada benar, fungsi formatDate akan digunakan pada nilai prevText, nextText dan currentText untuk dipaparkan, sebagai contoh, sebagai nama bulan.
Permulaan: $('.selector').datepicker({ navigationAsDateFormat: true });
Dapatkan: var navigationAsDateFormat = $('.selector').datepicker('option', 'navigationAsDateFormat');
Tetapan: $('.selector').datepicker('option', 'navigationAsDateFormat', true
NextTeks : Rentetan : 'Seterusnya'
Tetapkan teks paparan pautan "Bulan Depan".
Permulaan: $('.selector').datepicker({ NextTeks: 'Nanti' });
Dapatkan: var nextText = $('.selector').datepicker('option', 'nextText');
Tetapan: $('.selector').datepicker('option', 'nextText', 'Later');
numberOfMonths : Nombor, Tatasusunan : 1
Tetapkan berapa bulan untuk dipaparkan pada satu masa. Jika ia adalah integer, ia ialah bilangan bulan yang dipaparkan. Jika ia adalah tatasusunan, ia ialah bilangan baris dan lajur yang dipaparkan.
Permulaan: $('.selector').datepicker({ numberOfMonths: [2, 3] });
Dapatkan: var numberOfMonths = $('.selector').datepicker('option', 'numberOfMonths');
Tetapan: $('.selector').datepicker('option', 'numberOfMonths', [2, 3]);
prevTeks : Rentetan : 'Sebelumnya'
Tetapkan teks paparan pautan "Bulan Terakhir".
Permulaan: $('.selector').datepicker({ prevTeks: 'Terdahulu' });
Dapatkan: var prevText = $('.selector').datepicker('option', 'prevText');
Tetapan: $('.selector').datepicker('option', 'prevText', 'Earlier');
potonganTahun pendek : Rentetan, Nombor : ' 10'
Tetapkan nilai tahun pemotongan. Jika ia adalah nombor (0-99), ia akan mula dikira dari tahun semasa Jika ia adalah rentetan, ia akan ditukar kepada nombor dan kemudian ditambah kepada tahun semasa. Apabila melebihi tahun cutoff, ia dianggap sebagai abad sebelumnya.
Permulaan: $('.selector').datepicker({ shortYearCutoff: 50 });
Dapatkan: var shortYearCutoff = $('.selector').datepicker('option', 'shortYearCutoff');
Tetapan: $('.selector').datepicker('option', 'shortYearCutoff', 50);
showAnim : String : 'show'
Tetapkan nama animasi yang menunjukkan dan menyembunyikan pemalam tarikh.
Permulaan: $('.selector').datepicker({ showAnim: 'fold' });
Dapatkan: var showAnim = $('.selector').datepicker('option', 'showAnim');
Tetapan: $('.selector').datepicker('option', 'showAnim', 'fold');
showButtonPanel : Boolean : false
Tetapkan sama ada untuk memaparkan butang berkaitan pada panel.
Permulaan: $('.selector').datepicker({ showButtonPanel: true });
Dapatkan: var showButtonPanel = $('.selector').datepicker('option', 'showButtonPanel');
Tetapan: $('.selector').datepicker('option', 'showButtonPanel', true);
tunjukkanCurrentAtPos : Nombor : 0
Tetapkan kedudukan di mana bulan semasa dipaparkan apabila beberapa bulan dipaparkan. Bermula pada kedudukan ke-x dari atas/kiri.
Permulaan: $('.selector').datepicker({ showCurrentAtPos: 3 });
Dapatkan: var showCurrentAtPos = $('.selector').datepicker('option', 'showCurrentAtPos');
Tetapan: $('.selector').datepicker('option', 'showCurrentAtPos', 3);
showMonthAfterYear : Boolean : false
Sama ada mahu memaparkan bulan selepas tahun dalam pengepala panel.
Permulaan: $('.selector').datepicker({ showMonthAfterYear: true });
Dapatkan: var showMonthAfterYear = $('.selector').datepicker('option', 'showMonthAfterYear');
Tetapan: $('.selector').datepicker('option', 'showMonthAfterYear', true
showOn : Rentetan : 'fokus'
Tetapkan acara yang mencetuskan panel yang memaparkan pemalam tarikh Nilai pilihan: fokus, butang, kedua-duanya
Permulaan: $('.selector').datepicker({ showOn: 'kedua-duanya' });
Dapatkan: var showOn = $('.selector').datepicker('option', 'showOn');
Tetapan: $('.selector').datepicker('option', 'showOn', 'the both');
pilihan persembahan : Pilihan : {}
Jika anda menggunakan showAnim untuk memaparkan kesan animasi, anda boleh menggunakan parameter ini untuk menambah beberapa tetapan parameter tambahan.
Permulaan: $('.selector').datepicker({ showOptions: {direction: 'up' });
Dapatkan: var showOptions = $('.selector').datepicker('option', 'showOptions');
Tetapan: $('.selector').datepicker('option', 'showOptions', {direction: 'up');
tunjukkanBulan Lain : Boolean : palsu
Sama ada mahu memaparkan beberapa nombor tarikh dalam dua bulan sebelumnya dan seterusnya dalam panel semasa (bukan pilihan).
Permulaan: $('.selector').datepicker({ showOtherMonths: true });
Dapatkan: var showOtherMonths = $('.selector').datepicker('option', 'showOtherMonths');
Tetapan: $('.selector').datepicker('option', 'showOtherMonths', true);
langkahBulan : Nombor : 1
Apabila mengklik pada bulan sebelumnya/depan, ia akan menatal beberapa bulan pada satu masa.
Permulaan: $('.selector').datepicker({ stepMonths: 3 });
Dapatkan: var stepMonths = $('.selector').datepicker('option', 'stepMonths');
Tetapan: $('.selector').datepicker('option', 'stepMonths', 3);
Julat tahun : Rentetan : '-10: 10'
Mengawal bilangan tahun yang dipaparkan dalam senarai lungsur tahun, yang boleh menjadi relatif kepada tahun semasa (-nn: nn) atau mutlak (-nnnn: nnnn)
Permulaan: $('.selector').datepicker({ julat tahun: '2000:2010' });
Dapatkan: var yearRange = $('.selector').datepicker('option', 'yearRange');
Tetapan: $('.selector').datepicker('option', 'yearRange', '2000:2010');
beforeShow : fungsi(input)
Peristiwa ini dicetuskan sebelum kawalan tarikh memaparkan panel dan mengembalikan objek contoh kawalan yang mencetuskan acara pada masa ini.
Permulaan: $('.selector').datepicker({ beforeShow: function(input) { ... } });
beforeShowDay : fungsi(tarikh)
Sebelum kawalan tarikh memaparkan panel, peristiwa ini dicetuskan apabila tarikh pada setiap panel diikat dan parameter ialah tarikh yang mencetuskan acara. Selepas memanggil fungsi, tatasusunan mesti dikembalikan: [0] Sama ada tarikh ini adalah pilihan (benar/salah), [1] Nama gaya CSS tarikh ini ("" bermaksud lalai), [2] Gesaan akan muncul apabila tetikus digerakkan di atas kandungan.
Permulaan: $('.selector').datepicker({ beforeShowDay: function(date) { ... } });
onChangeMonthYear : fungsi(tahun, bulan, inst)
Peristiwa ini dicetuskan apabila tahun atau bulan berubah Parameternya ialah tahun dan bulan yang diubah serta tika pemalam tarikh semasa.
Permulaan: $('.selector').datepicker({ onChangeMonthYear: function(year, month, inst) { ... } });
onClose: function(dateTeks, inst)
Peristiwa ini dicetuskan apabila panel tarikh ditutup (tidak kira sama ada tarikh dipilih), dan parameter ialah tarikh yang dipilih dan tika pemalam tarikh semasa.
Permulaan: $('.selector').datepicker({ onClose: function(dateText, inst) { ... } });
onSelect : function(dateText, inst)
Peristiwa ini dicetuskan apabila tarikh dipilih dalam panel tarikh Parameter ialah tarikh yang dipilih dan contoh pemalam tarikh semasa.
$('.selector').datepicker({ onSelect: function(dateText, inst) { ... } });
Kandungan di atas memperkenalkan anda kepada penggunaan JQuery datepicker, saya harap anda menyukainya.
