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