dojo之日期DateTextBox篇

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:"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", 
                                            style:"100px;",
                                            name:"endDate", 
                                            constraints:{datePattern:"yyyy-MM-dd"},
                                            required:true,
                                            value:new Date(),
					    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", 
                                            style:"100px;",
                                            name:"startMonth", 
                                            constraints:{datePattern:"yyyy-MM"},
                                            required:true,
                                            value:new Date(),
					    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", 
                                            style:"100px;",
                                            name:"endMonth", 
                                            constraints:{datePattern:"yyyy-MM"},
                                            required:true,
                                            value:new Date(),
					    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", 
                                            style:"100px;",
                                            name:"startYear", 
                                            constraints:{datePattern:"yyyy"},
                                            required:true,
                                            value:new Date(),
					    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", 
                                            style:"100px;",
                                            name:"endYear", 
                                            constraints:{datePattern:"yyyy"},
                                            required:true,
                                            value:new Date(),
					    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", 
                                            style:"100px;",
                                            name:"byDay", 
                                            constraints:{datePattern:"yyyy-MM-dd"},
                                            required:true,
                                            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", 
                                            style:"100px;",
                                            name:"byMonth", 
                                            constraints:{datePattern:"yyyy-MM"},
                                            required:true,
                                            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{
                100%;
                height:100%;
                font-size:12px;
            }
            #tab{
                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", 
                                            style:"100px;",
                                            name:"startDate", 
                                            constraints:{datePattern:"yyyy-MM-dd"},
                                            required:true,
                                            value:new Date(),
					    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", 
                                            style:"100px;",
                                            name:"startMonth", 
                                            constraints:{datePattern:"yyyy-MM"},
                                            required:true,
                                            value:new Date(),
					    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", 
                                            style:"100px;",
                                            name:"startYear", 
                                            constraints:{datePattern:"yyyy"},
                                            required:true,
                                            value:new Date(),
					    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", 
                                            style:"100px;",
                                            name:"byDay", 
                                            constraints:{datePattern:"yyyy-MM-dd"},
                                            required:true,
                                            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", 
                                            style:"100px;",
                                            name:"endDate", 
                                            constraints:{datePattern:"yyyy-MM-dd"},
                                            required:true,
                                            value:new Date(),
					    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", 
                                            style:"100px;",
                                            name:"endMonth", 
                                            constraints:{datePattern:"yyyy-MM"},
                                            required:true,
                                            value:new Date(),
					    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", 
                                            style:"100px;",
                                            name:"endYear", 
                                            constraints:{datePattern:"yyyy"},
                                            required:true,
                                            value:new Date(),
					    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", 
                                            style:"100px;",
                                            name:"byMonth", 
                                            constraints:{datePattern:"yyyy-MM"},
                                            required:true,
                                            value:new Date()'/>
                </td>
            </tr>
        </table> 
    </body>
</html>