湛江网站如何制作,个性化网站设计,江苏建设管理中心网站,成都市成华区建设路商务中心网站使用EasyUI的Datebox和Datetimebox组件#xff0c;并对其进行适当的改造#xff0c;比如更改日期格式、设置默认值或者将当前时间设置为默认值。
一、运行结果 二、实现代码
1.代码框架 2.实现代码
SpringBootMainApplication.java:
package com.xj.main;import org.spri… 使用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 langen
headmeta charsetUTF-8titleDatetimebox 与 Datebox/titlelink relstylesheet typetext/css href../../themes/default/easyui.csslink relstylesheet typetext/css href../../themes/icon.csslink relstylesheet typetext/css href../demo.cssscript typetext/javascript src../../jquery.min.js/scriptscript typetext/javascript src../../jquery.easyui.min.js/script
/head
body
p原装 Datetimebox: 默认日期格式为 MM/dd/yyyy HH:mm 默认时间为 3/4/2010 2:3/p
input classeasyui-datetimebox namebirthday data-optionsrequired:true,showSeconds:false value3/4/2010 2:3 stylewidth:150pxbr
p改装 Datetimebox1.日期格式更改为 yyyy-MM-dd HH:mm 2.默认值为当前时间/p
input classeasyui-datetimebox namebirthday data-optionsformatter:myformatter2,parser:myparser2,required:true,showSeconds:false value new Date() stylewidth:150px/br
p原装 Datebox: 默认日期格式为 MM/dd/yyyy 无默认时间/p
input classeasyui-datebox/br
p改装 Datebox: 1.日期格式更改为 yyyy-MM-dd 2.默认时间为当前时间/p
input classeasyui-datebox data-optionsformatter:myformatter,parser:myparser valuenewDate()/br
script typetext/javascript//格式化日期的函数对日期进行格式化 yyyy-MM-ddfunction myformatter(date){var y date.getFullYear();var m date.getMonth()1;var d date.getDate();return y-(m10?(0m):m)-(d10?(0d):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-(m10?(0m):m)-(d10?(0d):d) (hour10?(0hour):hour) : (minutes10?(0minutes):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
三、代码解析
名称类型描述formatterfunction 格式化日期的函数该函数有一个 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;
} parserfunction 解析日期字符串的函数该函数有一个 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技巧_脚本之家
