Tôi đã tìm kiếm nhiều trang web cho việc chọn datetime và đã không tìm thấy bất cứ gì hữu ích. Cuối cùng tôi đã tìm thấy jQuery và JavaScript để sử dụng chọn ngày và nó rất đơn giản và hấp dẫn.
Tôi đã đơn giản hóa và tạo ra điều khiển thể tái sử dụng chọn thời gian. Xin vui lòng tìm tập tin đính kèm phía trên. Tôi đã sử dụng Ajax Update Panel trong bài viết này. Vì vậy, bạn có thể sử dụng đồng bộ trong dự án.
Control DataTimePicker
<style type="text/css">
.textBox
{
width: 150px;
border-radius: 4px 4px 4px 4px;
color: #555555;
display: inline-block;
font-size: 14px;
height: 20px;
line-height: 20px;
margin-bottom: 10px;
padding: 4px 6px;
vertical-align: middle;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}
</style>
<script type="text/javascript" language="javascript">
function getDateTimePicker()
{
$('#datetimepicker').DateTimePickerNew({
format: 'dd/MM/yyyy hh:mm:ss',
language: 'en'
});
}
</script>
<div id="datetimepicker" class="input-append date">
<asp:TextBox ID="txtDateTime" CssClass="textBox" runat="server"></asp:TextBox>
<span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<script type="text/javascript" language="javascript">
$('#datetimepicker').DateTimePickerNew({
format: 'dd/MM/yyyy hh:mm:ss',
language: 'en'
});
</script>Thêm DateTime trên Trang
Đăng ký sử dụng điều khiển trong trang.
<%@ Register Src="~/Control/DateTimePicker.ascx" TagName="DateTimePicker" TagPrefix="DateTime" %>
Thêm điều khiển đăng ký vào trang.
<DateTime:DateTimePicker ID="DateTimePicker" runat="server" />
JavaScript Code
Date Format
$('.datepicker').datepicker({
format: 'mm-dd-yyyy'
});
Ngôn ngữ và thời gian theo Format
$('#datetimepicker2').datetimepicker({
language: 'en',
pick12HourFormat: true
});
Pick Only Date Format
$('#datetimepicker3').datetimepicker({
pickDate: false
});
Pick Only Time Format
$('#datetimepicker4').datetimepicker({
pickTime: false
});