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

Spring Boot + EasyUI Datebox和Datetimebox样例

news 2025/10/24 6:16:44

使用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

免费数学几何作图web平台

光锐软件免费数学工具，maths,数学制图，数学作图，几何作图，几何，AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

编程新知 2025/9/28 4:39:19

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

STM32F1 本教程使用零知标准板（STM32F103RBT6）通过I2C驱动ICM20948九轴传感器，实现姿态解算，并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化，适合嵌入式及物联网开发者。在基础驱动上新增…...

编程新知 2025/10/16 3:34:17

WPF八大法则：告别模态窗口卡顿

⚙️ 核心问题：阻塞式模态窗口的缺陷原始代码中ShowDialog()会阻塞UI线程，导致后续逻辑无法执行： var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...

编程新知 2025/10/18 2:38:40

系统掌握PyTorch：图解张量、Autograd、DataLoader、nn.Module与实战模型

本文较长，建议点赞收藏，以免遗失。更多AI大模型应用开发学习视频及资料，尽在聚客AI学院。本文通过代码驱动的方式，系统讲解PyTorch核心概念和实战技巧，涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...

编程新知 2025/10/19 10:17:08

数学建模-滑翔伞伞翼面积的设计，运动状态计算和优化！

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态，并优化伞翼面积的设计。一、问题分析滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...

编程新知 2025/10/10 13:27:22

大模型——基于Docker+DeepSeek+Dify ：搭建企业级本地私有化知识库超详细教程

基于Docker+DeepSeek+Dify ：搭建企业级本地私有化知识库超详细教程下载安装Docker Docker官网：https://www.docker.com/ 自定义Docker安装路径 Docker默认安装在C盘，大小大概2.9G，做这行最忌讳的就是安装软件全装C盘，所以我调整了下安装路径。新建安装目录：E:\MyS…...

编程新知 2025/10/21 19:26:06

k8s从入门到放弃之Pod的容器探针检测

k8s从入门到放弃之Pod的容器探针检测在Kubernetes（简称K8s）中，容器探测是指kubelet对容器执行定期诊断的过程，以确保容器中的应用程序处于预期的状态。这些探测是保障应用健康和高可用性的重要机制。Kubernetes提供了两种种类型…...

编程新知 2025/10/14 0:35:05

day51 python CBAM注意力

目录一、CBAM 模块简介二、CBAM 模块的实现 （一）通道注意力模块 （二）空间注意力模块 （三）CBAM 模块的组合三、CBAM 模块的特性四、CBAM 模块在 CNN 中的应用一、CBAM 模块简介在之前的探索中…...

编程新知 2025/9/24 3:13:03

Java严格模式withResolverStyle解析日期错误及解决方案

在Java中使用DateTimeFormatter并启用严格模式（ResolverStyle.STRICT）时，解析日期字符串"2025-06-01"报错的根本原因是：模式字符串中的年份格式yyyy被解释为YearOfEra（纪元年份），而非…...

编程新知 2025/8/6 19:33:12

【计算机网络】NAT、代理服务器、内网穿透、内网打洞、局域网中交换机

🔥个人主页🔥：孤寂大仙V 🌈收录专栏🌈：计算机网络 🌹往期回顾🌹：【计算机网络】数据链路层——ARP协议 🔖流水不争，争的是滔滔不息一、网络地址转…...

编程新知 2025/10/19 14:07:51

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

免费数学几何作图web平台

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

WPF八大法则：告别模态窗口卡顿

系统掌握PyTorch：图解张量、Autograd、DataLoader、nn.Module与实战模型

数学建模-滑翔伞伞翼面积的设计，运动状态计算和优化！

大模型——基于Docker+DeepSeek+Dify ：搭建企业级本地私有化知识库超详细教程

k8s从入门到放弃之Pod的容器探针检测

day51 python CBAM注意力

Java严格模式withResolverStyle解析日期错误及解决方案

【计算机网络】NAT、代理服务器、内网穿透、内网打洞、局域网中交换机