码迷,mamicode.com
首页 > Web开发 > 详细

jQuery EasyUI/TopJUI创建日期输入框

时间:2019-06-17 15:46:24      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:nta   image   javascrip   年度   code   框架   default   span   efault   

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 

jQuery EasyUI/TopJUI创建日期输入框

标签:nta   image   javascrip   年度   code   框架   default   span   efault   

原文地址:https://www.cnblogs.com/xvpindex/p/11039888.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!