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

Spring Boot + EasyUI Datebox和Datetimebox样例

news 2026/2/10 9:07:46

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

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下：隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/9/16 21:01:58

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要：设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP（Work-in-Progress）弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中，设立专门的紧急任务通道尤为重要，这能…...

编程新知 2026/2/3 22:50:06

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备工具安装： 下载安装DevEco Studio 4.0（支持HarmonyOS 5）配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化： ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程新知 2026/2/1 4:17:33

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件，用于在原生应用中加载 HTML 页面： 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/8/6 2:19:46

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览漏洞名称：Apache Flink REST API 任意文件读取漏洞CVE编号：CVE-2020-17519CVSS评分：7.5影响版本：Apache Flink 1.11.0、1.11.1、1.11.2修复版本：≥ 1.11.3 或 ≥ 1.12.0漏洞类型：路径遍历&#x…...

编程新知 2026/2/6 2:13:58

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程？ 2. Java创建对象的过程？ 3. 对象的生命周期？ 4. 类加载器有哪些？ 5. 双亲委派模型的作用（好处）？ 6. 讲一下类的加载和双亲委派原则？ 7. 双亲委派模…...

编程新知 2026/1/31 11:18:29

Unity UGUI Button事件流程

场景结构测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

编程新知 2026/2/9 18:50:34

Axure 下拉框联动

实现选省、选完省之后选对应省份下的市区...

编程新知 2026/1/20 13:43:41

ZYNQ学习记录FPGA(一)ZYNQ简介

一、知识准备 1.一些术语,缩写和概念： 1）ZYNQ全称：ZYNQ7000 All Pgrammable SoC 2）SoC:system on chips(片上系统)，对比集成电路的SoB（system on board） 3）ARM：处理器…...

编程新知 2026/2/5 9:30:45

jdbc查询mysql数据库时，出现id顺序错误的情况

我在repository中的查询语句如下所示，即传入一个List<intager>的数据，返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致，会导致返回的id是从小到大排列的，但我不希望这样。 Query("SELECT NEW com…...

编程新知 2026/2/4 19:50:05

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

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

如何在看板中有效管理突发紧急任务

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

【JVM面试篇】高频八股汇总——类加载和类加载器

Unity UGUI Button事件流程

Axure 下拉框联动

ZYNQ学习记录FPGA(一)ZYNQ简介

jdbc查询mysql数据库时，出现id顺序错误的情况