Struts2系列—Form Tags(datetimepicker)

pterodactyl

浏览: 750761 次
性别:
来自: 杭州

最近访客更多访客>>

wangyy

abb_fly

scotttom020

kqogje

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript Struts JSP 浏览器 prototype

中…… 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"> <\/td>'; break;
                case 6: _cs[_cs.length] = '<td class="sat"> <\/td>'; break;
                default:_cs[_cs.length] = '<td class="normal"> <\/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</

分享到：