摘要:[jQuery] datetimepicker 日期時間選擇器(選擇年月日時分秒)
之前小弟PO過[jQuery] Datapicker 日期選擇(單日 / 日期區間) http://www.dotblogs.com.tw/aquarius6913/archive/2012/08/07/73875.aspx
而有網友詢問如何加上時間可以選擇
畢竟有些時候也需要用到年月日時分秒
因此,這次小弟介紹datetimepicker 日期時間選擇器的UI如下圖
大致上把常用到放在一起程式畫面如下:
程式碼如下:
<head runat="server">
<title>datetimepicker:日期時間選擇器</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<style type="text/css">
a
{
color: #007bc4 /*#424242*/;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
ol, ul
{
list-style: none;
}
body
{
height: 100%;
font: 12px/18px Tahoma, Helvetica, Arial, Verdana, "\5b8b\4f53" , sans-serif;
color: #51555C;
}
img
{
border: none;
}
.demo
{
width: 500px;
margin: 20px auto;
}
.demo h4
{
height: 32px;
line-height: 32px;
font-size: 14px;
}
.demo h4 span
{
font-weight: 500;
font-size: 12px;
}
.demo p
{
line-height: 28px;
}
input
{
width: 200px;
height: 20px;
line-height: 20px;
padding: 2px;
border: 1px solid #d3d3d3;
}
pre
{
padding: 6px 0 0 0;
color: #666;
line-height: 20px;
background: #f7f7f7;
}
.ui-timepicker-div .ui-widget-header
{
margin-bottom: 8px;
}
.ui-timepicker-div dl
{
text-align: left;
}
.ui-timepicker-div dl dt
{
height: 25px;
margin-bottom: -25px;
}
.ui-timepicker-div dl dd
{
margin: 0 10px 10px 65px;
}
.ui-timepicker-div td
{
font-size: 90%;
}
.ui-tpicker-grid-label
{
background: none;
border: none;
margin: 0;
padding: 0;
}
.ui_tpicker_hour_label, .ui_tpicker_minute_label, .ui_tpicker_second_label, .ui_tpicker_millisec_label, .ui_tpicker_time_label
{
padding-left: 20px;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery-ui-slide.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
$(function () {
$('#TextBox1').datetimepicker();
$('#TextBox2').datetimepicker({ dateFormat: 'yy/mm/dd' });
$('#TextBox3').timepicker({});
$('#TextBox4').datetimepicker({
showSecond: true,
showMillisec: true,
timeFormat: 'hh:mm:ss:l'
});
$('#TextBox5').timepicker({
ampm: true,
hourMin: 8,
hourMax: 16
});
$('#TextBox6').datetimepicker({
hour: 13,
minute: 15
});
$('#TextBox7').datetimepicker({
numberOfMonths: 2,
minDate: 0,
maxDate: 30
});
$('#TextBox8').timepicker({
hourGrid: 4,
minuteGrid: 10
});
var ex8 = $('#TextBox9');
ex8.datetimepicker();
$('#Button1').click(function () {
ex8.datetimepicker('setDate', (new Date()));
});
$('#Button2').click(function () {
alert(ex8.datetimepicker('getDate'));
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
1. 預設介面
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<br />
2. 日期改成yyyy/MM/dd
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<br />
<br />
3. 時間模式(24小時制)
<br />
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<br />
<br />
4. 可顯示至毫秒
<br />
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
<br />
<br />
5. 設定時間可選範圍(8 < hh <16)
<br />
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
<br />
<br />
6. 默認時間模式(開啟UI的默認值)
<br />
<asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
<br />
<br />
7. 設定可選擇日期區間
<br />
<asp:TextBox ID="TextBox7" runat="server"></asp:TextBox>
<br />
<br />
8. 設定時間尺標間隔
<br />
<asp:TextBox ID="TextBox8" runat="server"></asp:TextBox>
<br />
<br />
9. 抓取與設定時間
<br />
<asp:TextBox ID="TextBox9" runat="server"></asp:TextBox>
<input id="Button1" type="button" value="Set Datetime" />
<input id="Button2" type="button" value="Get Datetime" />
<br />
<br />
</div>
</form>
</body>
小弟附上原始檔提供參考下載
Y2J's Life:http://kimenyeh.blogspot.tw/