Struts2系列—Form Tags(datetimepicker)

最新推荐文章于 2019-10-21 14:56:41 发布

pterodactyl2007

最新推荐文章于 2019-10-21 14:56:41 发布

阅读量131

点赞数

文章标签： JavaScript Struts JSP 浏览器 prototype ViewUI

本文链接：https://blog.csdn.net/pterodactyl2007/article/details/83429201

版权

中…… Struts2系列—Form Tags(datetimepicker)

http://www.blogjava.net/kalman03/archive/2008/10/30/237554.html

网络上关于Struts2方面资料不少，之所以再重复一些关于Struts2的知识，只是因为本人正在学习Struts2，而且在学习的途中也遇见了不少的问题，由于没有学过Struts2以前的版本，学习途中也是比较的痛苦，在此仅想记录下我的学习历程。
如果你对这个方面有深入研究，恳请你的指点;如果你也是初学者，希望这系列的文章对你有所帮助。

Struts2中的datetimepicker是一个时间选择器，个人觉得是一个非常方便的标签，我们知道用JavaScript代码实现一个日期选择器那要写好长以段代码，而Struts2内置的这个datetimepicker标签却帮我们摆脱了长长的JavaScript的噩梦。来看一下就知道了：

datetimepicker.jsp：

<% @ page language = " java " import = " java.util.* " pageEncoding = " UTF-8 " %>
<% @ taglib prefix = " s " uri = " /struts-tags " %>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
     < s:head theme ="simple" />
     
     
     < body >
         < s:datetimepicker value ="today" name ="getdate" label ="时间选择器" ></ s:datetimepicker >
     </ body >
</ html >

可以看到很漂亮的效果：

当然我们可以格式化日期格式，一些其他的处理可以根据需要在action里面进行处理。来看一个初始化时间为2008-08-08，按照年月日显示的日期选择器：
增加下列代码到上面的JSP里面：

< s:datetimepicker name ="hopedate" label ="year-month-date" displayFormat ="yyyy-MM-dd" />

增加一个DatetimepickerAction.java:

package com.kalman03.action;

import java.util.Date;

import com.opensymphony.xwork2.ActionSupport;

/**
*@FileName DatetimepickerAction.java
*
*@Author kalman03
*
*/
public class DatetimepickerAction extends ActionSupport {

     private Date hopedate;
     public Date getHopedate() {
         return hopedate;
    }
     public void setHopedate(Date hopedate) {
         this .hopedate = hopedate;
    }
    @Override
     public String execute() throws Exception {
         this .setHopedate( new Date( " Aug 08,2008 12:00:00 AM " ));
         return SUCCESS;
    }
}

配置struts.xml里面的映射关系：

< action name ="datetimepickertag" class ="com.kalman03.action.DatetimepickerAction" >
< result > /datetimepicker.jsp </ result >
</ action >

到此结束可以在浏览器输入：http://localhost:8080/test/datetimepickertag.action得到格式化后的效果：

我对Struts2的这个标签无语，太强了，有时间好好看看内部是怎么处理的。在这个我再提供给大家一个JavaScript实现的日期选择器，需要声明的是这个JavaScript摘自 kimsoft-jscalendar
js源码（支持IE，Firefox,Safari，Opera，谷歌等多浏览器）：

<!--
/* *
* Calendar
* @param   beginYear           1990
* @param   endYear             2010
* @param   language            0(zh_cn)|1(en_us)|2(en_en)|3(zh_tw)
* @param   patternDelimiter    "-"
* @param   date2StringPattern  "yyyy-MM-dd"
* @param   string2DatePattern  "ymd"
* @version 1.0 build 2006-04-01
* @version 1.1 build 2006-12-17
* @author  KimSoft (jinqinghua [at] gmail.com)
* NOTE!    you can use it free, but keep the copyright please
* IMPORTANT:you must include this script file inner html body elment
* @see http://code.google.com/p/kimsoft-jscalendar/
*/
function Calendar(beginYear, endYear, language, patternDelimiter, date2StringPattern, string2DatePattern) {
     this .beginYear = beginYear || 1990 ;
     this .endYear    = endYear    || 2020 ;
     this .language   = language   || 0 ;
     this .patternDelimiter = patternDelimiter      || " - " ;
     this .date2StringPattern = date2StringPattern || Calendar.language[ " date2StringPattern " ][ this .language].replace( / \ -/ g, this .patternDelimiter);
     this .string2DatePattern = string2DatePattern || Calendar.language[ " string2DatePattern " ][ this .language];

     this .dateControl = null ;
     this .panel   = this .getElementById( " __calendarPanel " );
     this .iframe = window.frames[ " __calendarIframe " ];
     this .form    = null ;

     this .date = new Date();
     this .year = this .date.getFullYear();
     this .month = this .date.getMonth();

     this .colors = { " bg_cur_day " : " #00CC33 " , " bg_over " : " #EFEFEF " , " bg_out " : " #FFCC00 " }
};

Calendar.language = {
     " year "    : [ " \u5e74 " , "" , "" , " \u5e74 " ],
     " months " : [
                [ " \u4e00\u6708 " , " \u4e8c\u6708 " , " \u4e09\u6708 " , " \u56db\u6708 " , " \u4e94\u6708 " , " \u516d\u6708 " , " \u4e03\u6708 " , " \u516b\u6708 " , " \u4e5d\u6708 " , " \u5341\u6708 " , " \u5341\u4e00\u6708 " , " \u5341\u4e8c\u6708 " ],
                [ " JAN " , " FEB " , " MAR " , " APR " , " MAY " , " JUN " , " JUL " , " AUG " , " SEP " , " OCT " , " NOV " , " DEC " ],
                [ " JAN " , " FEB " , " MAR " , " APR " , " MAY " , " JUN " , " JUL " , " AUG " , " SEP " , " OCT " , " NOV " , " DEC " ],
                [ " \u4e00\u6708 " , " \u4e8c\u6708 " , " \u4e09\u6708 " , " \u56db\u6708 " , " \u4e94\u6708 " , " \u516d\u6708 " , " \u4e03\u6708 " , " \u516b\u6708 " , " \u4e5d\u6708 " , " \u5341\u6708 " , " \u5341\u4e00\u6708 " , " \u5341\u4e8c\u6708 " ]
                ],
     " weeks "   : [[ " \u65e5 " , " \u4e00 " , " \u4e8c " , " \u4e09 " , " \u56db " , " \u4e94 " , " \u516d " ],
                [ " Sun " , " Mon " , " Tur " , " Wed " , " Thu " , " Fri " , " Sat " ],
                [ " Sun " , " Mon " , " Tur " , " Wed " , " Thu " , " Fri " , " Sat " ],
                [ " \u65e5 " , " \u4e00 " , " \u4e8c " , " \u4e09 " , " \u56db " , " \u4e94 " , " \u516d " ]
        ],
     " clear "   : [ " \u6e05\u7a7a " , " Clear " , " Clear " , " \u6e05\u7a7a " ],
     " today "   : [ " \u4eca\u5929 " , " Today " , " Today " , " \u4eca\u5929 " ],
     " close "   : [ " \u5173\u95ed " , " Close " , " Close " , " \u95dc\u9589 " ],
     " date2StringPattern " : [ " yyyy-MM-dd " , " yyyy-MM-dd " , " yyyy-MM-dd " , " yyyy-MM-dd " ],
     " string2DatePattern " : [ " ymd " , " ymd " , " ymd " , " ymd " ]
};

Calendar.prototype.draw = function () {
    calendar = this ;

     var _cs = [];
    _cs[_cs.length] = ' < form id = " __calendarForm " name = " __calendarForm " method = " post " > ';
    _cs[_cs.length] = ' < table id = " __calendarTable " width = " 100% " border = " 0 " cellpadding = " 3 " cellspacing = " 1 "
align = " center " > ';
    _cs[_cs.length] = ' < tr > ';
    _cs[_cs.length] = '   < th >< input class = " l " name = " goPrevMonthButton " type = " button " id = " goPrevMonthButton "
value = " < " \ />< \ / th > ';
    _cs[_cs.length] = '   < th colspan = " 5 " >< select class = " year " name = " yearSelect " id = " yearSelect " >< \ / select >< select class = " month " name = " monthSelect " id = " monthSelect " >< \ / select >< \ / th > ';
    _cs[_cs.length] = '   < th >< input class = " r " name = " goNextMonthButton " type = " button " id = " goNextMonthButton "
value = " > " \ />< \ / th > ';
    _cs[_cs.length] = ' < \ / tr > ';
    _cs[_cs.length] = ' < tr > ';
     for ( var i = 0 ; i < 7 ; i ++ ) {
        _cs[_cs.length] = ' < th class = " theader " > ';
        _cs[_cs.length] = Calendar.language[ " weeks " ][ this .language][i];
        _cs[_cs.length] = ' < \ / th > ';
    }
    _cs[_cs.length] = ' < \ / tr > ';
     for ( var i = 0 ; i < 6 ; i ++ ){
        _cs[_cs.length] = ' < tr align = " center " > ';
         for ( var j = 0 ; j < 7 ; j ++ ) {
             switch (j) {
                 case 0 : _cs[_cs.length] = ' < td class = " sun " >& nbsp; < \ / td > '; break ;
                 case 6 : _cs[_cs.length] = ' < td class = " sat " >& nbsp; < \ / td > '; break ;
                 default :_cs[_cs.length] = ' < td class = " normal " >& nbsp; < \ / td > '; break ;
            }
        }
        _cs[_cs.length] = ' < \ / tr > ';
    }
    _cs[_cs.length] = ' < tr > ';
    _cs[_cs.length] = '   < th colspan = " 2 " >< input type = " button " class = " b " name = " clearButton " id = " clearButton " \ />< \ / th > ';
    _cs[_cs.length] = '   < th colspan = " 3 " >< input type = " button " class = " b " name = " selectTodayButton " id = " selectTodayButton " \ />< \ / th > ';
    _cs[_cs.length] = '   < th colspan = " 2 " >< input type = " button " class = " b " name = " closeButton " id = " closeButton " \ />< \ / th > ';
    _cs[_cs.length] = ' < \ / tr > ';
    _cs[_cs.length] = ' < \ / table > ';
    _cs[_cs.length] = ' < \ / form > ';

     this .iframe.document.body.innerHTML = _cs.join( "" );
     this .form = this .iframe.document.forms[ " __calendarForm " ];

     this .form.clearButton.value = Calendar.language[ " clear " ][ this .language];
     this .form.selectTodayButton.value = Calendar.language[ " today " ][ this .language];
     this .form.closeButton.value = Calendar.language[ " close " ][ this .language];

     this .form.goPrevMonthButton.onclick = function () {calendar.goPrevMonth( this );}
     this .form.goNextMonthButton.onclick = function () {calendar.goNextMonth( this );}
     this .form.yearSelect.onchange = function () {calendar.update( this );}
     this .form.monthSelect.onchange = function () {calendar.update( this );}

     this .form.clearButton.onclick = function () {calendar.dateControl.value = "" ;calendar.hide();}
     this .form.closeButton.onclick = function () {calendar.hide();}
     this .form.selectTodayButton.onclick = function () {
         var today = new Date();
        calendar.date = today;
        calendar.year = today.getFullYear();
        calendar.month = today.getMonth();
        calendar.dateControl.value = today.format(calendar.date2StringPattern);
        calendar.hide();
    }
};

Calendar.prototype.bindYear = function () {
     var ys = this .form.yearSelect;
    ys.length = 0 ;
     for ( var i = this .beginYear; i <= this .endYear; i