WdatePicker日期控件

百度经验:http://jingyan.baidu.com/article/e6c8503c7244bae54f1a18c7.html
csdn博客:http://blog.csdn.net/wanglei19880622/article/details/8051322
(1)效果图

WdatePicker日期控件_第1张图片

(2)上代码

这里一个div里有两个表单控件,

<div class="search_div">
        日期区间:
        <input type="text" id="dateStart" name="dateStart" onclick="display()" readonly="readonly" style="width:140px;"/> -
        <input type="text" id="dateEnd" name="dateEnd" onclick="display()" readonly="readonly" style="width:140px;"/>
        <a href="javascript:search();" class="myBtn"><em>开始查询em>a>
    div>

点击任意一个input控件,就执行dispaly方法

/*
        点击日期控件按钮,选择日期
    */
    function display(){   
         WdatePicker({skin:'whyGreen',startDate:'%y-%M-%d %H:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss'});
   }

数据提交方式使用a href=”javascript:search();”,点击开始查询按钮执行search方法,

/*
        点击‘开始查询’,执行此方法,获取控件的开始,结束时间
    */
    function search(){
        var  dateStart = document.getElementById("dateStart").value;
        var  dateEnd = document.getElementById("dateEnd").value;
        console.log('dateStart='+dateStart+',dateEnd='+dateEnd);
        if(dateEnd==""||dateStart <= dateEnd){//输入正常,将输入的开始,结束时间传给服务器
            /* 下面开始全自动化读取数据什么的了 */
            var modelId = ${modelId};
            printCharts(modelId,dateStart,dateEnd);//什么都不说了,千言万语都在这个方法里了!
        }else{
            alert("开始时间不能大于结束时间!");
        }

    }

你可能感兴趣的:(web基础)