当前位置：首页 > news >正文

Spring Boot + EasyUI Datebox和Datetimebox样例

news 2026/5/29 5:25:36

使用EasyUI的Datebox和Datetimebox组件，并对其进行适当的改造，比如更改日期格式、设置默认值或者将当前时间设置为默认值。

一、运行结果

二、实现代码

1.代码框架

2.实现代码

SpringBootMainApplication.java:

package com.xj.main;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ComponentScan;/*** @Author: xjfu* @Create: 2023/10/20 7:33* @Description: SpringBoot启动类*/
@ComponentScan("com.xj")
@SpringBootApplication
public class SpringBootMainApplication {public static void main(String[] args) {try{SpringApplication.run(SpringBootMainApplication.class, args);}catch (Exception e){e.printStackTrace();}}
}

ThymeleafController.java

package com.xj.controller;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;/*** @Author: xjfu* @Create: 2023/10/20 7:42* @Description:*/
@RequestMapping("/easyui")
@Controller
public class ThymeleafController {//Datebox和Datetimebox案例@RequestMapping("/dateboxAndDatetimebox")public String dateboxAndDatetimebox(){//启动DateboxAndDatetimebox.html页面return "DateboxAndDatetimebox";}}

DateboxAndDatetimebox.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Datetimebox 与 Datebox</title><link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../../themes/icon.css"><link rel="stylesheet" type="text/css" href="../demo.css"><script type="text/javascript" src="../../jquery.min.js"></script><script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<p>原装 Datetimebox: 默认日期格式为 MM/dd/yyyy HH:mm 默认时间为 3/4/2010 2:3</p>
<input class="easyui-datetimebox" name="birthday" data-options="required:true,showSeconds:false" value="3/4/2010 2:3" style="width:150px"><br>
<p>改装 Datetimebox：1.日期格式更改为 yyyy-MM-dd HH:mm 2.默认值为当前时间</p>
<input class="easyui-datetimebox" name="birthday" data-options="formatter:myformatter2,parser:myparser2,required:true,showSeconds:false" value= "new Date()" style="width:150px"/><br>
<p>原装 Datebox: 默认日期格式为 MM/dd/yyyy 无默认时间</p>
<input class="easyui-datebox"/><br>
<p>改装 Datebox: 1.日期格式更改为 yyyy-MM-dd 2.默认时间为当前时间</p>
<input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser" value="newDate()"/><br>
<script type="text/javascript">//格式化日期的函数：对日期进行格式化 yyyy-MM-ddfunction myformatter(date){var y = date.getFullYear();var m = date.getMonth()+1;var d = date.getDate();return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);}//格式化日期的函数：对日期进行格式化 yyyy-MM-dd HH:mmfunction myformatter2(date){var y = date.getFullYear();var m = date.getMonth()+1;var d = date.getDate();var hour = date.getHours(); // 时var minutes = date.getMinutes(); // 分var seconds = date.getSeconds() //秒return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d) + ' ' + (hour<10?('0'+hour):hour) + ':' + (minutes<10?('0'+minutes):minutes);}//解析日期字符串的函数：该函数有一个 'date' 字符串，并返回一个日期值function myparser(s){if (!s) return new Date();var ss = (s.split('-'));var y = parseInt(ss[0],10);var m = parseInt(ss[1],10);var d = parseInt(ss[2],10);if (!isNaN(y) && !isNaN(m) && !isNaN(d)){return new Date(y,m-1,d);} else {return new Date();}}//解析日期字符串的函数：该函数有一个 'date' 字符串，并返回一个日期值function myparser2(s){if (!s) return new Date();console.log('s==>' + s);var ss = (s.split(' '));console.log('ss==>' + ss);var s1 = ss[0].split('-');console.log('s1==>' + s1);var s2 = ss[1].split(':');console.log('s2==>' + s2);var y = parseInt(s1[0],10);var m = parseInt(s1[1],10);var d = parseInt(s1[2],10);var HH = parseInt(s2[0],10);var mm = parseInt(s2[1],10);if (!isNaN(y) && !isNaN(m) && !isNaN(d)){return new Date(y,m-1,d,HH,mm);} else {return new Date();}}
</script>
</body>
</html>

三、代码解析

名称类型描述

formatter

function

名称	类型	描述
formatter	function	格式化日期的函数，该函数有一个 'date' 参数，并返回一个字符串值。下面的实例演示如何重写默认的格式化（formatter）函数。 `$.fn.datebox.defaults.formatter = function(date){var y = date.getFullYear();var m = date.getMonth()+1;var d = date.getDate();return m+'/'+d+'/'+y; }`
parser	function	解析日期字符串的函数，该函数有一个 'date' 字符串，并返回一个日期值。下面的实例演示如何重写默认的解析（parser）函数。 `$.fn.datebox.defaults.parser = function(s){var t = Date.parse(s);if (!isNaN(t)){return new Date(t);} else {return new Date();} }`

格式化日期的函数，该函数有一个 'date' 参数，并返回一个字符串值。下面的实例演示如何重写默认的格式化（formatter）函数。

$.fn.datebox.defaults.formatter = function(date){var y = date.getFullYear();var m = date.getMonth()+1;var d = date.getDate();return m+'/'+d+'/'+y;
}

parser

function

解析日期字符串的函数，该函数有一个 'date' 字符串，并返回一个日期值。下面的实例演示如何重写默认的解析（parser）函数。

$.fn.datebox.defaults.parser = function(s){var t = Date.parse(s);if (!isNaN(t)){return new Date(t);} else {return new Date();}
}

四、参考文献

1.Easyui Datebox 日期框_EasyUI 插件

2.EasyUI 日期格式(Date Format)_easyui demo

3.JavaScript 获取当前日期时间年月日时分秒的方法_javascript技巧_脚本之家

Spring Boot + EasyUI Datebox和Datetimebox样例

使用EasyUI的Datebox和Datetimebox组件，并对其进行适当的改造，比如更改日期格式、设置默认值或者将当前时间设置为默认值。一、运行结果二、实现代码 1.代码框架 2.实现代码 SpringBootMainApplication.java: package com.xj.main;import org.spri…...

编程日记 2023/11/7 0:20:43

web前端JS基础------制作一个获取验证码

1，需要一个定时器，和一个button，通过点击事件启动获取验证码 2，参考代码如下 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><body><…...

编程日记 2023/11/7 0:18:42

MyBatis面经

MyBatis常见面试题 ！！本文主要是博主总结看着玩的，不具有很高的参考价值，慎重 1、MyBatis是什么？MyBatis工作原理？MyBatis的使用场景有哪些？ MyBatis是一款优秀的持久层框架，它是…...

编程日记 2023/11/7 0:16:40

SpringBoot基础（六）-- 辅助功能之一 -- 内嵌tomcat

目录 1. 内嵌Tomcat定义位置 2. 内嵌Tomcat运行原理 3. 更换内嵌Tomcat 在前面，我们做的SpringBoot入门案例（SpringBoot基础（一）-- 使用idea(2022版)创建一个Springboot项目(联网开发)）勾选了Spirng-web的功能&#...

编程日记 2023/11/7 0:14:38

K8s：部署 CNI 网络组件+k8s 多master集群部署+负载均衡及Dashboard k8s仪表盘图像化展示管理

目录 1 部署 CNI 网络组件 1.1 部署 flannel 1.2 部署 Calico 1.3 部署 CoreDNS 2 负载均衡部署 3 部署 Dashboard 1 部署 CNI 网络组件 1.1 部署 flannel K8S 中 Pod 网络通信： ●Pod 内容器与容器之间的通信在同一个 Pod 内的容器（Pod 内的容…...

编程日记 2023/11/7 0:13:37

「直播回放」使用 PLC + OPC + TDengine，快速搭建烟草生产监测系统

在烟草工业场景里，多数设备的自动控制都是通过 PLC 可编程逻辑控制器来实现的，PLC 再将采集的数据汇聚至 OPC 服务器。传统的 PI System、实时数据库、组态软件等与 OPC 相连，提供分析、可视化、报警等功能，这类系统存在一些问题&…...

编程日记 2023/11/7 0:11:33

私域流量搭建与运营，技巧全攻略！

2023年是比拼运营深度和服务效率的一年，用户对于体验的期望值将持续增长，企业需提供无缝的客户体验，以推动增长、保障收入、确保客户忠诚度。在疫情新常态下，企业已构建起APP、小程序等一系列线上触点矩阵，而各个触点之…...

编程日记 2023/11/7 0:10:31

AWS SAP-C02教程0--课程概述

SAP是亚马逊云的解决方案架构师专业级认证，关于本课程，我会简述已下3点： 在本课程中按照自己的分类讲述考试相关的AWS产品，特别会注明每个产品在考试中可能出现的考点会对一些解决方案做对比，通过一些对比给出不同场景…...

编程日记 2023/11/7 0:07:27

RFC使用与WebService

RFC连接 CSDN RFC中引用类型组 http://t.csdnimg.cn/wQWAYhttp://t.csdnimg.cn/wQWAY 远程目标系统维护SM59 这里的类型指的是目标系统的系统类型(目标系统即rfc函数存在的系统). 类型2（R/2连接），只需给出主机名，所有通信信息…...

编程日记 2023/11/7 0:06:26

打造全球化电商平台，多语言商城系统助您开拓海外市场

全球化进程的加速，越来越多的企业开始将目光投向海外市场。然而，语言和文化差异成为了企业面临的一大挑战。为了帮助企业顺利拓展海外业务，多语言商城系统应运而生。作为一种功能强大的电子商务平台，多语言商城系统具备以下关键功…...

编程日记 2023/11/7 0:05:23

【滑动窗口】篮里到底能装 “几个水果” 呢？

Problem: 904. 水果成篮文章目录题目分析算法原理分析暴力枚举哈希表滑动窗口优化数组再度优化复杂度Code 题目分析首先我们来分析一下本题的思路首先我们通过题目的描述来理解一下其要表达的含义，题目给到我们一个fruit数组，里面存放的是每棵树上…...

编程日记 2023/11/7 0:04:21

newstarctf2022week2

Word-For-You(2 Gen) 和week1 的界面一样不过当时我写题的时候出了个小插曲连接 MySQL 失败: Access denied for user rootlocalhost 这句话印在了背景，后来再进就没了，我猜测是报错注入想办法传参可以看到一个name2,试着传参发现有回显三个字段…...

编程日记 2023/11/7 0:03:20

集群调度-01

目录 1、调度约束 2、Pod 是 Kubernetes 的基础单元，Pod 启动典型创建过程如下 2.1 工作机制 **** 2.2 调度过程 *** 2.3 Predicate 有一系列的常见的算法可以使用： ** 2.4 指定调度节点 1、调度约束 Kubernetes 是通过 List-Watch **…...

编程日记 2023/11/7 0:02:19

【软件工程】金管局计算机岗位——软件测试的分类（⭐⭐⭐⭐）

软件工程软件测试的分类从是否关心软件内部结构和具体实现的角度划（⭐⭐⭐⭐）从是否执行代码角度划分（⭐⭐）从软件开发的过程按阶段划分（⭐⭐⭐⭐） 软件测试的分类考点导读： 软件测试是软件工…...

编程日记 2023/11/7 0:00:16

Halcon WPF 开发学习笔记(1)：Hello World小程序

文章目录文章专栏视频链接Hello World训练图片训练目的开始训练图像预处理导入图像三通道处理调用算子通道选取滤波什么是好的滤波增加对比度区域选取阈值处理算子参数选择运行结果(红色为选择区域) 区域分割运行结果特征筛选参数代码第二次，面积筛选画选中十…...

编程日记 2023/11/6 23:57:11

pix2tex - LaTeX OCR 安装使用记录

系列文章目录文章目录系列文章目录前言一、安装二、使用三、少侠请留步，点赞、收藏、关注前言项目地址：这儿一、安装版本要求 Python: 3.7 PyTorch: >1.7.1 安装：pip install "pix2tex[gui]" 注意：Pyside6…...

编程日记 2023/11/6 23:56:09

前端框架Vue学习 ——（四）Axios

文章目录 Axios 介绍Axios 入门Vue项目中使用 Axios Axios 介绍介绍: Axios 对原生的 Ajax 进行了封装，简化书写，快速开发。（异步请求） 官网: https://www.axios-http.cn/ 官网介绍：Axios 是一个基于 promise 网络请…...

编程日记 2023/11/6 23:53:06

将json数据导入到ES集群——解决方案对比填坑日记

需求将写好的json数据。导入到es集群数据说明文件JSON数据，一行一个JSON。 {"id":"d2716ae8fba4e026c4bd9445c3f49e2c","lang":"zh","title":"吉美旅馆","content":"吉美..."}…...

编程日记 2023/11/6 23:51:04

C语言----------#pragma预处理分析

一、#pragma预处理分析 1、#pragma是编译器指示字，用于指示编译器完成一些特定的动作； 2、#pragma所定义的很多指示字是编译器和操作系统特有的； 3、#pragma在不同的编译器间是不可移植的： 预处理器将忽略它不认识的#pragma指…...

编程日记 2023/11/6 23:50:01

原因数据库中使用的是datetime[64] 的格式。精确的毫秒了。django默认的使用的是datetime.datetime.fromisoformat转换的。转换不了使用原生查找 for raw in StockNominate.objects.raw("select id,code,strftime(%Y-%m-%d,date) as date from table_name; "):pr…...

编程日记 2023/11/6 23:49:00

Python PIL 画矩形框

基础代码 from PIL import Image, ImageDraw# 打开图片 img Image.open(your_image.jpg)# 创建绘图对象 draw ImageDraw.Draw(img)# 矩形坐标 (x1, y1, x2, y2) coords (23, 21, 69, 76)# 画矩形框（红色，线宽2） draw.rectangle(coords, ou…...

编程新知 2026/5/26 0:44:32

长期使用Taotoken聚合服务对项目月度账单的可预测性提升

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度长期使用Taotoken聚合服务对项目月度账单的可预测性提升在AI驱动的项目开发与运营中，成本控制与预算规划是团队管理者…...

编程新知 2026/5/26 0:30:20

美团外卖mtgsig与waimai_sign双层签名逆向解析

1. 这不是“爬虫教程”，而是一份反向工程现场笔记你搜到这篇内容，大概率正卡在某个调试窗口前：抓包看到mtgsig和waimai_sign两个参数像两堵墙，无论怎么改请求头、换UA、清缓存，返回永远是{"code":403,"…...

编程新知 2026/5/26 0:28:16

VMware ESXi 9.1.0.0集成NVME+网卡驱动版发布｜新特性+驱动集成+部署升级+FAQ全指南

一、ESXi 9.1.0.0 正式版核心新特性 VMware ESXi 9.1.0.0（2026 年 5 月发布）是 vSphere 9.1 核心组件，聚焦硬件兼容扩展、性能跃升、安全加固、运维简化四大方向，重点强化 NVMe 存储与网卡生态适配，以下为关键更新&am…...

编程新知 2026/5/26 0:24:13

＜背包问题＞

背包问题是一类组合优化问题，其基本形式是给定一组物品，每个物品都有一个重量和一个价值，以及一个有限的背包容量，目标是在不超过背包容量的前提下，选择物品使得背包中的物品价值最大化。动态规划是解决背包问题的常用…...

编程新知 2026/5/25 22:10:17

在模型广场灵活选型让我找到了更适合代码生成的Taotoken模型

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度在模型广场灵活选型让我找到了更适合代码生成的Taotoken模型开发代码辅助工具时，选择合适的模型是平衡效果与成本的关…...

编程新知 2026/5/25 20:30:09

DLA功耗优化验证：tegrastats实战指南

重磅预告：本专栏将独家连载系列丛书《智能体视觉技术与应用》部分精华内容，该书是世界首套系统阐述“因式智能体”视觉理论与实践的专著，特邀美国 TypeOne 公司首席科学家、斯坦福大学博士 Bohan 担任技术顾问。Bohan先生师从美国三院院士、“…...

编程新知 2026/5/25 17:48:30

基于Atmega 1284P的16位复古计算器：硬件设计与软件实现全解析

1. 项目概述与核心思路最近在整理工作室时，翻出了一堆老旧的7段数码管和矩阵键盘，看着这些充满复古气息的元件，一个想法冒了出来：为什么不自己动手做一台复古风格的计算器呢？不是那种用液晶屏显示的现代计算器&#xf…...

编程新知 2026/5/25 17:19:23

如何快速掌握ncmdumpGUI：Windows平台网易云音乐NCM文件转换完整教程

如何快速掌握ncmdumpGUI：Windows平台网易云音乐NCM文件转换完整教程【免费下载链接】ncmdumpGUI C#版本网易云音乐ncm文件格式转换，Windows图形界面版本项目地址: https://gitcode.com/gh_mirrors/nc/ncmdumpGUI 你是否曾经下载了网易云音乐的…...

编程新知 2026/5/25 16:02:23

LLM驱动的高性能计算日志解析技术实践

1. 项目概述：LLM驱动的HPC日志解析革命高性能计算(HPC)系统如同数字世界的巨型望远镜，每天产生PB级的观测数据——系统日志。这些日志记录了从硬件底层到应用层的所有活动，但它们的价值长期被埋没在非结构化文本的泥沼中。传统日志解析方法就…...

编程新知 2026/5/25 14:33:55

Spring Boot + EasyUI Datebox和Datetimebox样例

一、运行结果

二、实现代码

1.代码框架

2.实现代码

三、代码解析

四、参考文献

相关文章：

Spring Boot + EasyUI Datebox和Datetimebox样例

web前端JS基础------制作一个获取验证码

MyBatis面经

SpringBoot基础（六）-- 辅助功能之一 -- 内嵌tomcat

K8s：部署 CNI 网络组件+k8s 多master集群部署+负载均衡及Dashboard k8s仪表盘图像化展示管理

「直播回放」使用 PLC + OPC + TDengine，快速搭建烟草生产监测系统

私域流量搭建与运营，技巧全攻略！

AWS SAP-C02教程0--课程概述

RFC使用与WebService

打造全球化电商平台，多语言商城系统助您开拓海外市场

【滑动窗口】篮里到底能装 “几个水果” 呢？

newstarctf2022week2

集群调度-01

【软件工程】金管局计算机岗位——软件测试的分类（⭐⭐⭐⭐）

Halcon WPF 开发学习笔记(1)：Hello World小程序

pix2tex - LaTeX OCR 安装使用记录

前端框架Vue学习 ——（四）Axios

将json数据导入到ES集群——解决方案对比填坑日记

C语言----------#pragma预处理分析

数据库中的时间django转换成None

Python PIL 画矩形框

长期使用Taotoken聚合服务对项目月度账单的可预测性提升

美团外卖mtgsig与waimai_sign双层签名逆向解析

VMware ESXi 9.1.0.0集成NVME+网卡驱动版发布｜新特性+驱动集成+部署升级+FAQ全指南

＜背包问题＞

在模型广场灵活选型让我找到了更适合代码生成的Taotoken模型

DLA功耗优化验证：tegrastats实战指南

基于Atmega 1284P的16位复古计算器：硬件设计与软件实现全解析

如何快速掌握ncmdumpGUI：Windows平台网易云音乐NCM文件转换完整教程

LLM驱动的高性能计算日志解析技术实践