WdatePicker日期控件

百度经验：http://jingyan.baidu.com/article/e6c8503c7244bae54f1a18c7.html
csdn博客：http://blog.csdn.net/wanglei19880622/article/details/8051322
（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("开始时间不能大于结束时间！");
        }

    }