Cara menggunakan kawalan masa jquery UI Datepicker (versi dipertingkatkan)_jquery

Mari kita lihat jadual sifat pemalam Datepicker dahulu:

Contoh penggunaan pertama pemalam kalendar
Mula-mula import fail perpustakaan kelas yang diperlukan:

<</SPAN>scripttype="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.7.1.min.js"></</SPAN>script>
<</SPAN>scripttype="text/javascript" src="${pageContext.request.contextPath }/js/jquery.ui.datepicker-zh-CN.js"></</SPAN>script>
<</SPAN>scripttype="text/javascript"src="${pageContext.request.contextPath }/js/jquery-ui-1.8.18.custom.min.js"></</SPAN>script>
<</SPAN>linkrel="stylesheet"type="text/css"href="${pageContext.request.contextPath }/css/ui-lightness/jquery-ui-1.8.18.custom.css">

Mula-mula tulis kod halaman:

<</SPAN>div class="demo">
<</SPAN>p>Date:<</SPAN>input type="text" id="datepicker"></</SPAN>p>
</</SPAN>div>

Kemudian gunakan kod js untuk memanggil pemalam

Tangkapan skrin kesan:

Berikut ialah pengesahan beberapa atribut biasa melalui contoh:
1. altField: Gunakan medan keluaran alternatif, iaitu, keluarkan tarikh yang dipilih dalam format lain kepada kawalan lain, dan nilainya ialah pemilih, iaitu kawalan untuk dikeluarkan
altFormat: format output altField
Contoh pengesahan:
Kod halaman:

<</SPAN>div class="demo">
<</SPAN>p>Date: <</SPAN>input type="text" id="datepicker">
<</SPAN>input type="text" id="alternate" size="30"/></</SPAN>p>
</</SPAN>div>

Kod Js:

$(function() {
$( "#datepicker" ).datepicker({
altField: "#alternate",
altFormat: "DD, d MM, yy"
});
});

Tangkapan skrin kesan:

2. showAnim: Tetapkan nama animasi yang dipaparkan atau disembunyikan dalam panel tarikh
Menulis kod js:

$(function() {
$( "#datepicker" ).datepicker();
$( "#anim" ).change(function() {
$( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
});
});

3. showButtonPanel: Sama ada untuk memaparkan panel butang
Kod Js:
[javascript] lihat plaincopyprint?
$( "#datepicker" ).datepicker({
showButtonPanel:benar
});

Seperti yang ditunjukkan dalam gambar, terdapat dua butang di bawah panel: mengklik "Hari ini" akan melompat ke tarikh hari ini dan mengklik "Tutup" akan menutup panel.

4. Format tarikh: Nyatakan format untuk memaparkan tarikh
Kod Js:

$( "#datepicker" ).datepicker({
dateFormat:"yy/mm/dd"
});

Tangkapan skrin kesan:

Seperti yang anda boleh lihat daripada imej, format tarikh dalam kotak teks telah ditukar daripada "yy-mm-dd" kepada "by/mm/dd". Sudah tentu, terdapat format lain yang boleh ditetapkan mengikut pilihan anda sendiri.
5. changeMonth: Sama ada hendak menggunakan senarai juntai bawah untuk memilih bulan
changeYear: sama ada hendak menggunakan senarai juntai bawah untuk memilih tahun
Tambahkan atribut ini dalam kod js: changeMonth:true atau changeYear:true
Bulan atau tahun dalam bar tajuk akan muncul dalam bentuk menu lungsur:

6 tahunJulat: Tetapkan julat tahun yang dipaparkan dalam kotak senarai lungsur, yang boleh menjadi relatif kepada tahun ini (-nn: nn) atau relatif kepada tahun yang dipilih (c-nn: c nn) atau tahun mutlak (nnnn:nnnn)
Tambahkan atribut dalam kod js:

$( "#datepicker" ).datepicker({
changeYear: true,
yearRange:"2011:2012"
});

Tangkapan skrin kesan:

Seperti yang anda lihat dari gambar, kedudukan tahun adalah dalam bentuk menu lungsur, dan hanya pilihan untuk 2011 dan 2012 akan muncul dalam menu lungsur.
Nota: atribut yearRange hanya digunakan apabila changeYear adalah benar.

7. numberOfMonths: Tetapkan berapa bulan untuk dipaparkan pada satu masa. Boleh menjadi tatasusunan yang mengandungi dua nombor, menunjukkan bilangan baris dan lajur yang dipaparkan
Kod Js:

$( "#datepicker" ).datepicker({
numberOfMonths: 3
});

上面指定numberOfMonths为3，那么弹出的日历面板就会显示当前以及以后两个月，如图：

8、showOn：设置触发选择器的事件名称
buttonText：指定触发按钮上显示的文本，showOn属性应设置为button或both
buttonImage：指定弹出按钮图像的URL，若设置则buttonText将成为alt值
buttonImageOnly：是否将图像放在控件后面，作为触发器，如果设置为true那么按钮将只剩下图片作为按钮，是页面更加美观
这里我编写三个文本框进行以上属性的对比：
1) Js代码：

$( "#datepicker2" ).datepicker({
showOn: "both",
buttonText:"日历按钮"
});

效果截图：

2）将按钮设置为图片：
Js代码：

$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
});

通过以上对比，可以理解buttonImageOnly属性的作用。
9、minDate：可以选择的最小日期，null表示无限制
maxDate：可以选择的最大日期。null表示无限制
两者都是根据以当天日期为基础的。
Js代码：

$(function() {
$( "#datepicker" ).datepicker({
//表示以当天为准，只有在20天之前和10天之后的日期之间的时间可以选择
minDate: -20,
maxDate: "+10D"
});
});

如下图在7号之前都不可选择（当前日期为27）：

以上就是对jquery UI Datepicker时间控件的使用方法深入学习，为之后的学习打下了基础，希望大家继续关注jquery UI Datepicker时间控件终结篇学习。