Spring Boot + EasyUI Datebox和Datetimebox样例

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


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Datetimebox 与 Dateboxtitle>
    <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:3p>
<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-dd
    function 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:mm
    function 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技巧_脚本之家

相关阅读:
VBA技术资料MF69：添加和删除工作表中的分页符
 AI人工智能大模型业务到底有多烧钱？
Confluence 内容管理
 【BUG】第一次创建vue3+vite项目启动报错Error: Cannot find module ‘worker_threads‘
考研数学笔记：一个例子让你明白什么是自由未知数什么是非自由未知数
 一起Talk Android吧（第四百零八回：间接绘制几何图形）
有来实验室|第一篇：Seata1.5.2版本部署和开源商城订单支付业务实战
 多目标杜鹃搜索（MOCS）优化算法（Matlab代码实现）
16、window11+visual studio 2022+cuda+ffmpeg进行拉流和解码（RTX3050）
OA系统都能为企业带来什么
原文地址：https://blog.csdn.net/qq_21370419/article/details/134239337