jquery easyui 日历控件和文本框结合使用生成日期

???111

于 2019-05-28 00:34:00 发布

阅读量283

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/saintdingspage/p/10934651.html

版权

html部分---等待接收所选日期的文本框

<td>
    <input name='input_date' required class='easyui-textbox' id='xiwustart'   label= '起始日期:' style='width:100%'
    data-options="
    prompt:'Search...',
    icons: [{
    iconCls:'icon-search',
    handler: function(e){
    selectdate(e);
    }}]">                                            
</td>

html部分---点击搜索图标后触发的日期选择对话框

<div id="datedlg" class="easyui-dialog" title="请点击选择日期" data-options="iconCls:'icon-save',closed:true" style="width:400px;
height:300px;padding:10px">
    <div class="easyui-calendar" id="cc" style="width:100%;height:250px;"> 
    </div>
</div>

jquery部分

function selectdate(e)
{
    $("#datedlg").dialog('open');
    $('#cc').calendar({
        onSelect: function(date){
            var myyear = date.getFullYear();
            var mymonth = ((date.getMonth()+1)<10?('0'+(date.getMonth()+1)):(date.getMonth()+1));
            var mydate = ((date.getDate())<10?('0'+(date.getDate())):(date.getDate()));
            var thesedays = myyear+"-"+mymonth+"-"+mydate;
            $(e.data.target).textbox('setText',thesedays);
            $("#datedlg").dialog('close');
        }
    });
}