Struts2 日历选择框 标签<sx:datetimepicker.../>详解

本文介绍如何使用 Struts2 的 Dojo 插件创建日历选择框,包括导入插件、配置 JSP 页面及设置 datetimepicker 标签的方法。详细解释了标签的参数含义和用法,并提供了不同 value 属性写法的例子。

先导入struts2-dojo-plugin-2.1.6.jar,再在jsp页面最开头加上:

<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>

在<html> </html>中加入<sx:head />:head标签的功能是生成页面文件的HEAD部分,它还生成了对Ajax框架dojo的配置文件的引用或代码。

下面的代码直接就实现了日历选择框:

		<sx:datetimepicker label="日历" name="calendar" value="today" 
		toggleType="plain" toggleDuration="300" language="zh_CN" type="date" 
		displayWeeks="5" displayFormat="dd/MM/yyyy" formatLength="long"  />

Parameters:

(注:toggle['tɒg(ə)l]触发)

最后的效果如下图:

value属性的写法还有:

<sx:datetimepicker value="%{date}"/>

<sx:datetimepicker value="%{'2007-01-01'}"/>
<sx:datetimepicker value="%{'today'}"/>

datetimepicker标签解析:

Description:

Renders a date/time picker in a dropdown(下拉) container.

A stand-alone DateTimePicker widget(文本桌面) that makes it easy to select a date/time, or increment by week, month, and/or year.

It is possible to customize the user-visible formatting with either the 'formatLength' (long, short, medium or full) or 'displayFormat' attributes. By defaulty current locale(区域设置) will be used.

参数displayFormat的所有可能取值:

FormatDescription
dDay of the month
DDay of year
MMonth - Use one or two for the numerical month, three for the abbreviation, or four for the full name, or 5 for the narrow name.
yYear
hHour [1-12].
HHour [0-23].
mMinute. Use one or two for zero padding.
sSecond. Use one or two for zero padding.

The following formats(in order) will be used to parse the values of the attributes 'value', 'startDate' and 'endDate':

  • SimpleDateFormat built using RFC 3339 (yyyy-MM-dd'T'HH:mm:ss)
  • SimpleDateFormat.getTimeInstance(DateFormat.SHORT)
  • SimpleDateFormat.getDateInstance(DateFormat.SHORT)
  • SimpleDateFormat.getDateInstance(DateFormat.MEDIUM)
  • SimpleDateFormat.getDateInstance(DateFormat.FULL)
  • SimpleDateFormat.getDateInstance(DateFormat.LONG)
  • SimpleDateFormat built using the value of the 'displayFormat' attribute(if any)
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <head> <th:block th:include="include :: header('123456789')"/> <th:block th:include="include :: datetimepicker-css"/> <!-- <th:block th:include="include :: datetimepicker-css"/>--> <th:block th:include="include :: bootstrap-fileinput-css"/> </head> <style> </style> <body> <div> <div> <input type="text" name="filex" id="inputfile"> <div class='file-loading'> <input class='form-control file-upload' name='file' type='file' id="filex"> </div> </div> <div> <button onclick="chuli()">确定</button> </div> </div> <th:block th:include="include :: footer"/> <th:block th:include="include :: echarts-js"/> <th:block th:include="include :: datetimepicker-js"/> <th:block th:include="include :: bootstrap-fileinput-js"/> <script th:inline="javascript"> $(".file-upload").fileinput({ uploadUrl: ctx + 'common/upload', maxFileCount: 1, autoReplace: true, showPreview: false }).on('fileuploaded', function (event, data, previewId, index) { $("input[name='" + event.currentTarget.id + "']").val(data.response.url) }).on('fileremoved', function (event, id, index) { $("input[name='" + event.currentTarget.id + "']").val('') }) function chuli() { const x = document.getElementById("inputfile"); alert(x.value); } </script> </body> </html> 我使用的ruoyi框架,是bootstrap版本的,这是我的代码,我现在是通过组件打开的,我现在希望我点击确定能把我拿到的值传回上一个页面
最新发布
09-09
你希望在点击“确定”按钮后,将选中的文件信息传递回上一个页面。由于你使用的是 RuoYi 框架(Bootstrap 版本),并且你已经通过 Bootstrap FileInput 插件实现了文件上传功能,接下来我们可以通过 `window.opener` 和 `window.close()` 的方式实现“弹窗选择文件后传值回父页面”的功能。 --- ### ✅ 解决方案说明: 1. **当前页面是弹窗页面**(即通过 `window.open()` 打开的页面)。 2. **点击“确定”按钮后**,获取上传后的文件 URL,并通过 `window.opener` 调用父页面的方法或设置父页面的某个字段。 3. 最后关闭当前弹窗页面。 --- ### ✅ 修改后的代码如下: ```html <!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <head> <th:block th:include="include :: header('123456789')"/> <th:block th:include="include :: datetimepicker-css"/> <th:block th:include="include :: bootstrap-fileinput-css"/> </head> <style> </style> <body> <div> <div> <input type="text" name="filex" id="inputfile"> <div class='file-loading'> <input class='form-control file-upload' name='file' type='file' id="filex"> </div> </div> <div> <button onclick="chuli()">确定</button> </div> </div> <th:block th:include="include :: footer"/> <th:block th:include="include :: echarts-js"/> <th:block th:include="include :: datetimepicker-js"/> <th:block th:include="include :: bootstrap-fileinput-js"/> <script th:inline="javascript"> $(".file-upload").fileinput({ uploadUrl: ctx + 'common/upload', maxFileCount: 1, autoReplace: true, showPreview: false }).on('fileuploaded', function (event, data, previewId, index) { $("input[name='" + event.currentTarget.id + "']").val(data.response.url) }).on('fileremoved', function (event, id, index) { $("input[name='" + event.currentTarget.id + "']").val('') }); function chuli() { const x = document.getElementById("inputfile"); const fileUrl = x.value; if (window.opener && typeof window.opener.receiveFileUrl === 'function') { // 调用父页面定义的函数 window.opener.receiveFileUrl(fileUrl); } else { // 或者直接赋值给父页面的某个输入框 if (window.opener) { window.opener.document.getElementById("targetInputId").value = fileUrl; } } window.close(); // 关闭弹窗 } </script> </body> </html> ``` --- ### ✅ 父页面代码示例(接收文件 URL) 在父页面中,你需要定义一个函数 `receiveFileUrl(url)` 或者准备好一个 `<input>` 元素用于接收值,例如: ```html <input type="text" id="targetInputId" readonly /> <a href="javascript:void(0);" onclick="openFileDialog()">选择文件</a> <script> function openFileDialog() { window.open("/your/upload/page", "选择文件", "width=600,height=400"); } // 接收文件 URL 的函数 function receiveFileUrl(url) { document.getElementById("targetInputId").value = url; } </script> ``` --- ### ✅ 总结 - 使用 `window.opener` 可以访问打开当前窗口的父窗口。 - 通过 `window.opener.receiveFileUrl()` 或直接操作 DOM 来传递数据。 - 使用 `window.close()` 关闭弹窗页面。 --- ###
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

itzyjr

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值