Cấp bậc tác giả:

DOTNET

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

Được viết bởi webmaster ngày 25/09/2013 lúc 04:23 AM
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.
  • 0
  • 3267
Tải tệp tin: Click ở đây

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
});

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML