Bài viết này sẽ giúp bạn tạo DateTimePicker bằng jQuery và JavaScript

Chọn DateTime sử dụng jQuery và JavaScript

Tài liệu ASP.NET ,C#,Chọn DateTime sử dụng jQuery và JavaScript

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. 
 
DateTimePickerJS1.jpg
 
DateTimePickerJS2.jpg
 
DateTimePickerJS3.jpg
 
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
});

 

 

Source demo của bài viết tại đây

Nguồn: dotnet.vn