jQuery EasyUI/TopJUI建立日期輸入框

jQuery EasyUI/TopJUI建立日期輸入框

日期時間輸入框組件

 

HTML

required:必填字段，默認爲false；prompt：顯示在輸入框的提示性文字；pattern：日期格式 YYYY、YYYY-mm

　　

<div class="topjui-container">
    <fieldset>
        <legend>yyyy-MM-dd格式</legend>
    </fieldset>
    <div class="topjui-row">
        <div class="topjui-col-sm6">
            <label class="topjui-form-label">出生日期</label>
            <div class="topjui-input-block"><input type="text" name="birthday" data-toggle="topjui-datebox">
            </div>
        </div>
        <div class="topjui-col-sm6">
            <label class="topjui-form-label">入職日期</label>
            <div class="topjui-input-block">
                <input type="text" name="jobDate"
                       data-toggle="topjui-datebox"
                       data-options="required:true,prompt:'入職日期是必填字段'">
                </td>
            </div>
        </div>
    </div>

    <fieldset>
        <legend>YYYY-mm格式</legend>
    </fieldset>
    <div class="topjui-row">
        <div class="topjui-col-sm6">
            <label class="topjui-form-label">出生年月</label>
            <div class="topjui-input-block">
                <input type="text" name="birthday"
                       data-toggle="topjui-datebox"
                       data-options="pattern:'YYYY-mm'">
            </div>
        </div>
        <div class="topjui-col-sm6">
            <label class="topjui-form-label">入職年月</label>
            <div class="topjui-input-block">
                <input type="text" name="jobDate"
                       data-toggle="topjui-datebox"
                       data-options="required:true,pattern:'YYYY-mm',prompt:'入職年月是必填字段'">
                </td>
            </div>
        </div>
    </div>

    <fieldset>
        <legend>YYYY格式</legend>
    </fieldset>
    <div class="topjui-row">
        <div class="topjui-col-sm6">
            <label class="topjui-form-label">出生年度</label>
            <div class="topjui-input-block">
                <input type="text" name="birthday"
                       data-toggle="topjui-datebox"
                       data-options="pattern:'YYYY'">
            </div>
        </div>
        <div class="topjui-col-sm6">
            <label class="topjui-form-label">入職年度</label>
            <div class="topjui-input-block">
                <input type="text" name="jobDate"
                       data-toggle="topjui-datebox"
                       data-options="required:true,pattern:'YYYY',prompt:'入職年度是必填字段'">
            </div>
        </div>
    </div>
</div>

　　js

<input id="dd" type="text">

$('#dd').iDatebox({
    required:true
});

　　格式化日期

$.fn.iDatebox.defaults.formatter = function(date){
    var y = date.getFullYear();
    var m = date.getMonth()+1;
    var d = date.getDate();
    return m+'/'+d+'/'+y;
}

　　設置日期輸入框的值

$('#dd').iDatebox('setValue', '6/1/2012');  // 設置日期輸入框的值
var v = $('#dd').iDatebox('getValue');  // 獲取日期輸入框的值

　　日曆下面的按鈕

var buttons = $.extend([], $.fn.iDatebox.defaults.buttons);
buttons.splice(1, 0, {
    text: 'MyBtn',
    handler: function(target){
    alert('click MyBtn');
    }
    });
    $('#dd').iDatebox({
    buttons: buttons
});

　　

EasyUI中文網：http://www.jeasyui.cn

TopJUI前端框架：http://www.topjui.com

TopJUI交流社區：http://ask.topjui.com