dojo之日期DateTextBox篇
来源：互联网 发布：淘宝知己知彼软件 编辑：程序博客网 时间：2024/05/24 02:07
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", style:"width: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:"width: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:"width: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:"width: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:"width: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:"width: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:"width: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 | Templatesand 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", 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"); } '/> </td> <!--设置开始月份--> <td> <label for="startMonth" style='color:#00FF00;'>开始月份：</label> <input id="startMonth" data-dojo-type="dijit/form/DateTextBox" data-dojo-props='type:"text", style:"width: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:"width: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:"width: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:"width: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:"width: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:"width: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:"width:100px;", name:"byMonth", constraints:{datePattern:"yyyy-MM"}, required:true, value:new Date()'/> </td> </tr> </table> </body></html>
1 0
- dojo之日期DateTextBox篇
- 给Dojo中DateTextBox设置默认日期
- dojo中DateTextBox日期格式yyyy-MM-dd转化为数据库中yyyyMMdd
- DateTextBox 日期选择
- dojo中取DateTextBox中的值两种方法
- dojo中DateTextBox阻止用户输入
- 自定义控件之日历文本框(DateTextBox)
- Dojo -- Getting Started篇之Hello Dojo!
- Dojo -- Getting Started篇之Modern Dojo(现代化Dojo)
- dojo之TabContainer篇
- dojo之Button篇
- AJAX架构之Dojo篇
- AJAX架构之Dojo篇
- AJAX架构之Dojo篇
- AJAX架构之Dojo篇
- AJAX架构之Dojo篇
- dojo日期操作
- Dojo之简介(Dojo项目)
- linux myeclipse2013的下载与安装
- frame
- 未知的类型名‘ulong_t’解决
- 谈谈BAT高薪招聘应届生:为什么刚毕业能拿到高薪？
- CentOS6.5 U盘安装（解决了FAT32格式造成的不能复制iso文件至U盘根目录问题）
- dojo之日期DateTextBox篇
- DBLP文献类型初步分析
- Oracle绑定变量
- Telling INIT to go to single user mode. init: rc main process (4483) killed by TERM signal
- POJ 搜索题目分类
- android程序员学习ios - 4 - 点击事件初步了解（xcode 5.0)
- 何时需要单元测试以及C++单元测试工具选择
- hadoop自定义排序 步骤1.4
- nagios 被动监控
