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 : ''
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');
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.
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' });
Einstellungen: $('.selector').datepicker('option', 'buttonImage', '/images/datepicker.gif');
buttonImageOnly : Boolean : false
Anfänglich: $('.selector').datepicker({ buttonImageOnly: true });
Holen Sie sich: var buttonImageOnly = $('.selector').datepicker('option', 'buttonImageOnly');
buttonText: String: '...'
Legen Sie den Textinhalt der Auslöseschaltfläche fest.
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 });
Einstellungen: $('.selector').datepicker('option', 'changeMonth', true);
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');
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);
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.
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);
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.
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 });
Tetapan: $('.selector').datepicker('option', 'gotoCurrent', true);
hideIfNoPrevNext : Boolean : false
Permulaan: $('.selector').datepicker({ hideIfNoPrevNext: true });
Dapatkan: var hideIfNoPrevNext = $('.selector').datepicker('option', 'hideIfNoPrevNext');
isRTL : Boolean : false
Permulaan: $('.selector').datepicker({ isRTL: true });
Dapatkan: var isRTL = $('.selector').datepicker('option', 'isRTL');
maxDate : Tarikh, Nombor, Rentetan : batal
Permulaan: $('.selector').datepicker({ maxDate: ' 1m 1w' });
Dapatkan: var maxDate = $('.selector').datepicker('option', 'maxDate');
$('.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']
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']});
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.
Dapatkan: var navigationAsDateFormat = $('.selector').datepicker('option', 'navigationAsDateFormat');
Tetapan: $('.selector').datepicker('option', 'navigationAsDateFormat', true
NextTeks : Rentetan : 'Seterusnya'
Tetapkan teks paparan pautan "Bulan Depan".
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] });
Tetapan: $('.selector').datepicker('option', 'numberOfMonths', [2, 3]);
prevTeks : Rentetan : 'Sebelumnya'
Permulaan: $('.selector').datepicker({ prevTeks: 'Terdahulu' });
Dapatkan: var prevText = $('.selector').datepicker('option', 'prevText');
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.
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' });
Tetapan: $('.selector').datepicker('option', 'showAnim', 'fold');
Tetapkan sama ada untuk memaparkan butang berkaitan pada panel.
Permulaan: $('.selector').datepicker({ showButtonPanel: true });
Dapatkan: var showButtonPanel = $('.selector').datepicker('option', 'showButtonPanel');
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);
Permulaan: $('.selector').datepicker({ showMonthAfterYear: true });
Dapatkan: var showMonthAfterYear = $('.selector').datepicker('option', 'showMonthAfterYear');
Tetapan: $('.selector').datepicker('option', 'showMonthAfterYear', true
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.
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 });
Tetapan: $('.selector').datepicker('option', 'showOtherMonths', true);
langkahBulan : Nombor : 1
Permulaan: $('.selector').datepicker({ stepMonths: 3 });
Dapatkan: var stepMonths = $('.selector').datepicker('option', 'stepMonths');
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)
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.
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) { ... } });
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.
Kandungan di atas memperkenalkan anda kepada penggunaan JQuery datepicker, saya harap anda menyukainya.
Eine vollständige Liste häufig verwendeter öffentlicher DNS
So öffnen Sie eine VSD-Datei
Welche Mobiltelefonmodelle unterstützt Hongmeng OS 3.0?
Detaillierte Erklärung des Befehls imp in Oracle
Drei Methoden der GPU-Virtualisierung
So übergeben Sie einen Wert an die Vue-Komponente
So implementieren Sie die Online-Chat-Funktion von Vue
Isolationsstufe für MySQL-Transaktionen
