1、设计思路
（1）利用dojo的DateTextBox设计出四组日期格式以及选择日期类型；
（2）控制日期的格式，分别显示年月日、年月和年份三种，另外一种是利用RadioButton选择日期格式
2、设计步骤
第一步：设置开始日期和结束日期
<label for="startDate" style='color:#FF0000;'>开始日期：</label>
<input id="startDate"
data-dojo-type="dijit/form/DateTextBox"
data-dojo-props='type:"text",style:"width:100px;",name:"startDate",constraints:{datePattern:"yyyy-MM-dd"},required:true,value:new Date(),onChange:function(){ dijit.byId("endDate").constraints.min = this.get("value"); } '/>
<label for="endDate" style='color:#FF0000;'>结束日期：</label>
<input id="endDate"
data-dojo-type="dijit/form/DateTextBox"
data-dojo-props='type:"text",name:"endDate",onChange:function(){ dijit.byId("startDate").constraints.min = this.get("value"); } '/>
显示结果如下图：
第二步：设置开始月份和结束月份
<label for="startMonth" style='color:#00FF00;'>开始月份：</label>
<input id="startMonth"
data-dojo-type="dijit/form/DateTextBox"
data-dojo-props='type:"text",name:"startMonth",constraints:{datePattern:"yyyy-MM"},onChange:function(){ dijit.byId("endMonth").constraints.min = this.get("value"); } '/>
<label for="endMonth" style='color:#00FF00;'>结束月份：</label>
<input id="endMonth"
data-dojo-type="dijit/form/DateTextBox"
data-dojo-props='type:"text",name:"endMonth",onChange:function(){ dijit.byId("startMonth").constraints.min = this.get("value"); } '/>
显示结果如下图：
第三步：设置开始年份和结束年份
<label for="startYear" style='color:#0000FF;'>开始年份：</label>
<input id="startYear"
data-dojo-type="dijit/form/DateTextBox"
data-dojo-props='type:"text",name:"startYear",constraints:{datePattern:"yyyy"},onChange:function(){ dijit.byId("endYear").constraints.min = this.get("value"); } '/>
<label for="endYear" style='color:#0000FF;'>结束年份：</label>
<input id="endYear"
data-dojo-type="dijit/form/DateTextBox"
data-dojo-props='type:"text",name:"endYear",onChange:function(){ dijit.byId("startYear").constraints.min = this.get("value"); } '/>
第四步：设置选日和选月
<input type='radio' data-dojo-type='dijit/form/RadioButton' name='date' checked='checked'/> <label for="byDay" style='color:#00FFFF;'>按日：</label> <input id="byDay" data-dojo-type="dijit/form/DateTextBox" data-dojo-props='type:"text",name:"byDay",value:new Date()'/>
<input type='radio' data-dojo-type='dijit/form/RadioButton' name='date'/> <label for="byMonth" style='color:#00FFFF;'>按月：</label> <input id="byMonth" data-dojo-type="dijit/form/DateTextBox" data-dojo-props='type:"text",name:"byMonth",value:new Date()'/>
显示结果如下：
3、附录
源码：
<!DOCTYPE html>
<!--
To change this license header,choose License Headers in Project Properties.
To change this template file,choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>DateTextBox</title>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="../script/dojoroot/dijit/themes/claro/claro.css"/>
<script type="text/javascript" src="../script/dojoroot/dojo/dojo.js" data-dojo-config="isDebug: true,parSEOnLoad: true"></script>
<style type="text/css">
body{
width:100%;
height:100%;
font-size:12px;
}
#tab{
width:80%;
height:30px;
font-weight:bold;
}
</style>
<script type="text/javascript">
dojo.require("dijit.form.DateTextBox");
</script>
</head>
<body class="claro" role="main">
<table id="tab">
<tr>
<!--设置开始日期-->
<td>
<label for="startDate" style='color:#FF0000;'>开始日期：</label>
<input id="startDate"
data-dojo-type="dijit/form/DateTextBox"
data-dojo-props='type:"text",onChange:function(){ dijit.byId("endDate").constraints.min = this.get("value"); } '/>
</td>
<!--设置开始月份-->
<td>
<label for="startMonth" style='color:#00FF00;'>开始月份：</label>
<input id="startMonth"
data-dojo-type="dijit/form/DateTextBox"
data-dojo-props='type:"text",onChange:function(){ dijit.byId("endMonth").constraints.min = this.get("value"); } '/>
</td>
<!--设置开始年份-->
<td>
<label for="startYear" style='color:#0000FF;'>开始年份：</label>
<input id="startYear"
data-dojo-type="dijit/form/DateTextBox"
data-dojo-props='type:"text",onChange:function(){ dijit.byId("endYear").constraints.min = this.get("value"); } '/>
</td>
<!--设置按日-->
<td>
<input type='radio' data-dojo-type='dijit/form/RadioButton' name='date' checked='checked'/>
<label for="byDay" style='color:#00FFFF;'>按日：</label>
<input id="byDay"
data-dojo-type="dijit/form/DateTextBox"
data-dojo-props='type:"text",value:new Date()'/>
</td>
</tr>
<tr>
<!--设置结束日期-->
<td>
<label for="endDate" style='color:#FF0000;'>结束日期：</label>
<input id="endDate"
data-dojo-type="dijit/form/DateTextBox"
data-dojo-props='type:"text",onChange:function(){ dijit.byId("startDate").constraints.min = this.get("value"); } '/>
</td>
<!--设置结束月份-->
<td>
<label for="endMonth" style='color:#00FF00;'>结束月份：</label>
<input id="endMonth"
data-dojo-type="dijit/form/DateTextBox"
data-dojo-props='type:"text",onChange:function(){ dijit.byId("startMonth").constraints.min = this.get("value"); } '/>
</td>
<!--设置结束年份-->
<td>
<label for="endYear" style='color:#0000FF;'>结束年份：</label>
<input id="endYear"
data-dojo-type="dijit/form/DateTextBox"
data-dojo-props='type:"text",onChange:function(){ dijit.byId("startYear").constraints.min = this.get("value"); } '/>
</td>
<!--设置按月-->
<td>
<input type='radio' data-dojo-type='dijit/form/RadioButton' name='date'/>
<label for="byMonth" style='color:#00FFFF;'>按月：</label>
<input id="byMonth"
data-dojo-type="dijit/form/DateTextBox"
data-dojo-props='type:"text",value:new Date()'/>
</td>
</tr>
</table>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
