jQuery UI contoh - pemilih tanggal (Datepicker)
Dari kotak pop-up atau kalender inline untuk memilih tanggal.
Untuk rincian lebih lanjut tentang komponen datepicker, lihat dokumentasi API anggota pemetik tanggal (yang Datepicker Widget) .
Fungsi standar
Tanggal picker (Datepicker) terikat untuk bentuk standar pada field input. Pindahkan fokus pada input (atau gunakan tombol tab untuk klik) untuk membuka kalender interaktif pada overlay kecil. Pilih tanggal, klik di manapun pada halaman (kotak input kehilangan fokus), atau klik tombol Esc untuk menutup. Jika Anda memilih tanggal, umpan balik ditampilkan sebagai nilai input.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery tanggal UI pemetik (Datepicker) - Fungsi standar </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Fungsi () {
$ ( "#datepicker") .datepicker ();
});
</ Script>
</ Kepala>
<Body>
<P> Tanggal: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
animasi
Gunakan animasi yang berbeda ketika Anda membuka atau menutup datepicker. Pilih film dari kotak drop-down, dan kemudian klik di kotak untuk melihat efeknya. Anda dapat menggunakan salah satu dari tiga animasi standar, efek khusus, atau menggunakan salah UI.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery tanggal UI pemetik (Datepicker) - Anime </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Fungsi () {
$ ( "#datepicker") .datepicker ();
$ ( "#anim") .change (Fungsi () {
$ ( "#datepicker") .datepicker ( "Option", "showAnim", $ (ini) val ());
});
});
</ Script>
</ Kepala>
<Body>
<P> Tanggal: <input type = "text" id = "datepicker" size = "30"> </ p>
<P> Animation: Situs
<Pilih id = "anim">
<Option value = "show"> Show (default) </ option>
<Value Option = "slideDown"> Slide </ option>
<Value Option = "fadeIn"> Fade </ option>
<Value Option = "buta"> Blind (UI tirai efek) </ option>
<Option value = "bouncing"> Bounce (efek UI Rebound) </ option>
<Value Option = "klip"> Klip (efek editing UI) </ option>
<Value Option = "drop"> Jatuhkan (UI efek mendarat) </ option>
<Value Option = "lipat"> Lipat (efek UI dilipat) </ option>
<Value Option = "slide"> Slide (UI efek sliding) </ option>
<Value Option = ""> Tidak ada </ option>
</ Pilih>
</ P>
</ Body>
</ Html>
bulan lain dari tanggal
datepicker dapat menunjukkan tanggal bulan tambahan, tanggal ini mungkin diatur ke opsional.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery tanggal UI pemetik (Datepicker) - di bulan lain dari tanggal </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Fungsi () {
$ ( "#datepicker") .datepicker ({
showOtherMonths: benar,
selectOtherMonths: true
});
});
</ Script>
</ Kepala>
<Body>
<P> Tanggal: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
tombol layar bar
Dengan boolean showButtonPanel untuk pemilihan hari ini tampilan tanggal "Hari ini" tombol untuk mematikan kalender menampilkan "Selesai" tombol pilihan. Secara default, ketika sebuah bar tampilan tombol akan memungkinkan setiap tombol, namun tombol dapat dimatikan melalui pilihan lain. Teks tombol dapat disesuaikan.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery tanggal UI pemetik (Datepicker) - Tampilan bar tombol </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Fungsi () {
$ ( "#datepicker") .datepicker ({
showButtonPanel: true
});
});
</ Script>
</ Kepala>
<Body>
<P> Tanggal: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
display inline
datepicker bersarang di tampilan halaman, bukan di lapisan penutup. Cukup memanggil div .datepicker () bisa, bukan memanggil pada input.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI pemetik tanggal (Datepicker) - display inline </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Fungsi () {
$ ( "#datepicker") .datepicker ();
});
</ Script>
</ Kepala>
<Body>
Tanggal: <div id = "datepicker"> </ div>
</ Body>
</ Html>
Tampilan Bulan & Tahun menu
kotak drop-down menampilkan bulan dan tahun, daripada tampilan statis dari judul bulan / tahun, sangat mudah untuk menjangkau berbagai macam waktu pada navigasi. Menambahkan nilai Boolean changeMonth dan changeYear pilihan.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery tanggal UI pemetik (Datepicker) - Tampilan bulan & amp; menu Tahun </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Fungsi () {
$ ( "#datepicker") .datepicker ({
changeMonth: benar,
changeYear: true
});
});
</ Script>
</ Kepala>
<Body>
<P> Tanggal: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
Menampilkan beberapa bulan
Pengaturan numberOfMonths pilihan adalah integer 2 atau integer lebih besar dari 2, yang akan ditampilkan pada datepicker beberapa bulan.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery tanggal UI pemetik (Datepicker) - Tampilan beberapa bulan </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Fungsi () {
$ ( "#datepicker") .datepicker ({
NUMBEROFMONTHS: 3,
showButtonPanel: true
});
});
</ Script>
</ Kepala>
<Body>
<P> Tanggal: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
Format Tanggal
Dalam berbagai cara untuk menampilkan umpan balik tanggal. Pilih format tanggal dari kotak drop-down, kemudian klik dan pilih tanggal di kotak input, melihat format tanggal tampilan yang dipilih.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery tanggal UI pemetik (Datepicker) - Format Tanggal </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Fungsi () {
$ ( "#datepicker") .datepicker ();
$ ( "#format") .change (Fungsi () {
$ ( "#datepicker") .datepicker ( "Option", "dateformat", $ (ini) val ());
});
});
</ Script>
</ Kepala>
<Body>
<P> Tanggal: <input type = "text" id = "datepicker" size = "30"> </ p>
<P> Format Options: Situs
<Pilih id = "format">
<Option value = "mm / dd / yy"> Default - mm / dd / yy </ option>
<Option value = "yy-mm-dd"> ISO 8601 - yy-mm-dd </ option>
<Value Option = "d M, y"> Pendek - d M, y </ option>
<Value Option = "d MM, y"> Medium - d MM, y </ option>
<Option value = "DD, d MM, yy"> Penuh - DD, d MM, yy </ option>
<Value Option = "& apos; hari & apos; d & apos; dari & apos; MM & apos; pada tahun & apos; yy"> Dengan text - 'hari' d 'dari' MM 'di tahun' yy </ option>
</ Pilih>
</ P>
</ Body>
</ Html>
icon pemicu
Klik ikon di sebelah kotak input untuk menampilkan datepicker. Pengaturan datepicker terbuka (perilaku default) di fokus, atau klik pada ikon untuk membuka, atau membuka / menerima fokus saat mengklik ikon.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery tanggal UI pemetik (Datepicker) - ikon Pemicu </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Fungsi () {
$ ( "#datepicker") .datepicker ({
showOn: "tombol",
buttonImage: "images / calendar.gif",
buttonImageOnly: true
});
});
</ Script>
</ Kepala>
<Body>
<P> Tanggal: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
kalender lokal
Lokalisasi datepicker bahasa kalender dan Format (default adalah bahasa Inggris / Format Barat). datepicker berisi built-in dukungan untuk bahasa membaca dari kanan ke kiri, seperti bahasa Arab dan Ibrani.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery tanggal UI pemetik (Datepicker) - kalender lokal </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-ar.js"> </ script>
<Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-fr.js"> </ script>
<Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-he.js"> </ script>
<Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-zh-TW.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Fungsi () {
$ ( "#datepicker") .datepicker ($ .datepicker.regional [ "Fr"]);
$ ( "#locale") .change (Fungsi () {
$ ( "#datepicker") .datepicker ( "Option",
$ .datepicker.regional [$ Val (ini) ()]);
});
});
</ Script>
</ Kepala>
<Body>
<P> Tanggal: <input type = "text" id = "datepicker"> & nbsp;
<Pilih id = "lokal">
<Value Option = "ar"> Arab (& # 8235; (& # 1575; & # 1604; & # 1593; & # 1585; & # 1576; & # 1610; & # 1577; </ option>
<Value Option = "zh-TW"> Cina Tradisional (& # 32321; & # 39636; & # 20013; & # 25991;) </ option>
<Value Option = ""> English </ option>
<Option value = "fr" yang dipilih = "dipilih"> French (Fran & ccedil; ais) </ option>
<Value Option = "dia"> Hebrew (& # 8235; (& # 1506; & # 1489; & # 1512; & # 1497; & # 1514; </ option>
</ Pilih> </ p>
</ Body>
</ Html>
Mengisi kotak input lain
Gunakan altField dan altFormat pilihan setiap kali pilih tanggal, tanggal tersebut akan diisi dengan format tertentu di kotak input lain. Ketika fungsi ini dengan tanggal pada pengolahan lebih lanjut ramah-komputer, pengguna disajikan dengan tanggal user-friendly.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery tanggal UI pemetik (Datepicker) - mengisi kotak input lain </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Fungsi () {
$ ( "#datepicker") .datepicker ({
altField: "#alternate",
altFormat: "DD, d MM, yy"
});
});
</ Script>
</ Kepala>
<Body>
<P> Tanggal: <input type = "text" id = "datepicker"> & nbsp; <input type = "text" id = "alternate" size = "30"> </ p>
</ Body>
</ Html>
Membatasi rentang tanggal
Dengan minDate dan maxDate opsi membatasi dipilih rentang tanggal. Menetapkan awal dan akhir tanggal tanggal yang sebenarnya (Tanggal baru (2009, 1-1, 26)), atau string dari nilai offset hari ini (-20), atau sebagai siklus dan unit ( '+ 1M + 10D '). Jika diatur ke string, menggunakan 'D' untuk hari, menggunakan 'W' merupakan minggu, menggunakan 'M' untuk bulan, menggunakan 'Y' adalah tahun.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery tanggal UI pemetik (Datepicker) - membatasi rentang tanggal </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Fungsi () {
$ ( "#datepicker") .datepicker ({MinDate: -20, maxDate: "+ 1M + 10D"});
});
</ Script>
</ Kepala>
<Body>
<P> Tanggal: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
Pilih rentang tanggal
Pilih rentang tanggal untuk mencari.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery tanggal UI pemetik (Datepicker) - Pilih rentang tanggal </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Fungsi () {
$ ( "#from") .datepicker ({
defaultDate: "+ 1w",
changeMonth: benar,
NUMBEROFMONTHS: 3,
OnClose: function (SelectedDate) {
$ ( "# Untuk") .datepicker ( "Option", "MinDate", SelectedDate);
}
});
$ ( "# Untuk") .datepicker ({
defaultDate: "+ 1w",
changeMonth: benar,
NUMBEROFMONTHS: 3,
OnClose: function (SelectedDate) {
$ ( "#from") .datepicker ( "Option", "maxDate", SelectedDate);
}
});
});
</ Script>
</ Kepala>
<Body>
<Label untuk = "dari"> dari </ label>
<Input type = "text" id = "dari" name = "dari">
<Label untuk = "untuk"> untuk </ label>
<Input type = "text" id = "untuk" name = "untuk">
</ Body>
</ Html>
Pekan tahun acara
datepicker dapat menampilkan beberapa minggu pertama tahun ini. default dihitung sesuai dengan ISO 8601 Definisi: minggu mulai Senin, minggu pertama tahun yang berisi Kamis pertama. Ini berarti bahwa dalam satu tahun dan mungkin beberapa hari lagi dalam seminggu.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery tanggal UI pemetik (Datepicker) - menampilkan beberapa minggu pertama tahun ini </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Fungsi () {
$ ( "#datepicker") .datepicker ({
showWeek: benar,
firstday: 1
});
});
</ Script>
</ Kepala>
<Body>
<P> Tanggal: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>