jQuery EasyUI/TopJUI建立日期時間輸入框

jQuery EasyUI/TopJUI建立日期時間輸入框

日期時間輸入框組件

 

HTML

和日期輸入框相似，日期時間輸入框容許用戶選擇日期和指定的時間並按照指定的輸出格式顯示。相比日期輸入框，它在下拉麪板中添加了一個時間微調器。

<div class="topjui-container">
    <fieldset>
        <legend>默認日期時間輸入框</legend>
    </fieldset>

    <div class="topjui-row">
        <div class="topjui-col-sm6">
            <label class="topjui-form-label">開始時間</label>
            <div class="topjui-input-block">
                <input name="birthday"
                       data-toggle="topjui-datetimebox"
                       data-options="required:true,
                   width:450,
                   showSeconds:false"> //是否顯示秒鐘信息
            </div>
        </div>
        <div class="topjui-col-sm6">
            <label class="topjui-form-label">結束時間</label>
            <div class="topjui-input-block">
                <input name="birthday"
                       data-toggle="topjui-datetimebox"
                       data-options="required:true,
                   width:450,
                   showSeconds:true">
            </div>
        </div>
    </div>
</div>

　　js

<input id="dt" type="text" name="birthday">
$('#dt').iDatetimebox({
    value: '3/4/2010 2:3',
    required: true,
    showSeconds: false
});

設置日期時間輸入框

$('#dt').iDatetimebox('setValue', '6/1/2012 12:30:56');    // 設置日期時間輸入框的值
var v = $('#dt').iDatetimebox('getValue');               // 獲取日期時間輸入框的值
alert(v);

　　

 

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

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

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