Thêm input chọn ngày tháng?

 Hỗ trợ lập trình NukeViet

BQT vui lòng hướng dẫn mình các câu lệnh cần thiết để thêm input chọn ngày tháng trong NukeViet với ạ, xin cảm ơn.


Chào bạn, thư viện datepicker đã có sẵn trong source của NukeViet, để dùng nó, bạn chỉ việc gọi và sữ dụng, thêm một số đoạn mã (vào file tpl) như sau:

Tạo input (cái này mình có sử dụng bootstrap cho nó đẹp). Bạn cần có thuộc tính id để xác định input ngày tháng.

<div class="input-group">
    <input class="form-control" value="{SEARCH.denngay}" type="text" id="denngay" name="denngay" readonly="readonly" placeholder="{LANG.denngay}" />
    <span class="input-group-btn">
        <button class="btn btn-default" type="button" id="denngay-btn">
            <em class="fa fa-calendar fa-fix">&nbsp;</em>
        </button> </span>
</div>

Liên kết css, thêm vào đầu trang (bên dưới <!-- BEGIN: main -->)

<link type="text/css" href="/{NV_ASSETS_DIR}/js/jquery-ui/jquery-ui.min.css" rel="stylesheet" />

Liên kết javascript, thêm vào cuối trang (bên trên <!-- END: main -->)

<script type="text/javascript" src="/{NV_ASSETS_DIR}/js/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="/{NV_ASSETS_DIR}/js/language/jquery.ui.datepicker-{NV_LANG_INTERFACE}.js"></script>
<script>
    $("#tungay").datepicker({
        dateFormat: "dd/mm/yy",
        changeMonth: !0,
        changeYear: !0,
        showOtherMonths: !0,
        showOn: "focus",
        yearRange: "-90:+0"
    });
</script>

Code hoàn chỉnh

<!-- BEGIN: main -->
<link type="text/css" href="/{NV_ASSETS_DIR}/js/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
<div class="input-group">
    <input class="form-control" value="{SEARCH.tungay}" type="text" id="tungay" name="tungay" readonly="readonly" placeholder="{LANG.tungay}" /> <span class="input-group-btn">
        <button class="btn btn-default" type="button" id="tungay-btn">
            <em class="fa fa-calendar fa-fix">&nbsp;</em>
        </button>
    </span>
</div>
<script type="text/javascript" src="/{NV_ASSETS_DIR}/js/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="/{NV_ASSETS_DIR}/js/language/jquery.ui.datepicker-{NV_LANG_INTERFACE}.js"></script>
<script>
    $("#tungay").datepicker({
        dateFormat : "dd/mm/yy",
        changeMonth : !0,
        changeYear : !0,
        showOtherMonths : !0,
        showOn : "focus",
        yearRange : "-90:+0"
    });
</script>
<!-- END: main -->

Đã làm được, cảm ơn bạn

Bạn cần đăng nhập để tham gia thảo luận

Trung tâm ứng dụng NukeViet
Ghi rõ nguồn khi sao chép thông tin từ website này.

Powered by NukeViet - a product of VINADES.,JSC