前端UI组件【免费下载链接】Metro-UI-CSSA progressive front-end framework for creating high-performance responsive reactive web applications!项目地址https://gitcode.com/gh_mirrors/me/Metro-UI-CSS点击查看免费下载导读Metro UI CSS 框架内置了一套完整的日期时间处理引擎 ——Datetime类。它基于olton/datetime构建提供类 Moment.js 的链式 API解析、格式化、对齐、增减运算、比较、时区与农历月相等一揽子能力同时是框架内calendar、datepicker、calendarpicker、countdown、chat等组件日期逻辑的底层支撑。阅读本文后你将掌握Datetime的静态方法与实例方法全貌、格式化令牌与 strftime 格式、mutable/immutable 状态语义以及它在 Metro UI 组件与 i18n 系统中的真实调用方式可直接用于业务代码开发与二次封装。快速上手两种创建实例的方式在 Metro UI 环境中可以通过全局类Datetime或全局工厂函数datetime()两种方式创建实例二者等价const dt new Datetime(); const dt2 datetime(); console.log(dt.calendar());从源码实现看source/datetime/index.js 将二者同时挂载到了全局对象上import { Datetime, datetime } from olton/datetime; globalThis.Datetime Datetime; globalThis.datetime datetime;因此无论是new Datetime(...)还是datetime(...)在浏览器全局作用域与 ES Module 环境中均可直接使用。Datetime构造时接受与原生Date对象相同的参数形态字符串、时间戳、日期分量等例如new Datetime(2023-10-01 12:00:00)。构造选项locale / utcMode / weekStart / mutable创建Datetime实例时可指定一组起始选项Beginning optionsOptionTypeDefaultDescriptionlocaleStringen日期时间使用的区域locale。utcModeBooleanfalse是否启用 UTC 模式。weekStartNumber0一周的起始日默认取自 locale 配置。mutableBooleantrue是否处于可变状态mutable state。实例创建后选项仍可动态调整const dt new Datetime(); dt.useLocale(ua); // 切换区域 dt.immutable(true) // 切换为不可变状态其中weekStart的默认值由 locale 数据决定见下文setLocale/getLocale而mutable决定实例上的运算方法是否直接改写自身。Metro UI 在 source/datetime/index.js 中还对实例进行了一次时区校正兜底Datetime.correctDate (date) datetime(date).addDay(1).align(day).addMinute(new Date().getTimezoneOffset());该修正逻辑同时被 source/components/calendar/calendar.js 中的_correctDate引用用于把日历组件内部日期对齐到本地时区说明Datetime的时区语义直接影响 UI 组件的行为。静态方法全局工具与解析入口locales静态属性包含当前所有可用 locale 的列表。isDatetime()判断某个值是否为Datetime实例const dt new Datetime(); Datetime.isDatetime(dt); // truenow()返回当前日期时间可指定返回形式为时间戳默认或日期实例const asDate true Datetime.now(); // timestamp Datetime.now(asDate); // dateparse()解析日期字符串并返回Datetime实例const dt Datetime.parse(2023-10-01 12:00:00); console.log(dt.format(YYYY-MM-DD HH:mm:ss)); // 2023-10-01 12:00:00from()带格式的字符串解析from(str, locale, format)按指定格式解析日期字符串是parse的进阶形态。可用格式部件format parts如下const parts { month: [M, mm, %m], day: [D, dd, %d], year: [YY, YYYY, yy, yyyy, %y], hour: [h, hh, %h], minute: [m, mi, i, ii, %i], second: [s, ss, %s], ms: [sss] }示例从Dec, 2025, 01中按m, yyyy, dd解析出月份、年份与日const dt Datetime.from(Dec, 2025, 01, en, m, yyyy, dd);Datetime.from在框架内部被大量使用例如 source/components/calendar/calendar.js 中日历组件的minDate、maxDate、show配置在存在inputFormat时都会通过Datetime.from(o.minDate, o.inputFormat)解析source/components/datepicker/datepicker.js 也用它解析日期选择器的初始值。这说明from是组件自定义输入格式特性的根基。setLocale()/getLocale()setLocale()向可用 locale 列表注册一个区域配置Datetime.setLocale(en, { months: January February March April May June July August September October November December.split( ), monthsShort: Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec.split( ), weekdays: Sunday Monday Tuesday Wednesday Thursday Friday Saturday.split( ), weekdaysShort: Sun Mon Tue Wed Thu Fri Sat.split( ), weekdaysMin: Su Mo Tu We Th Fr Sa.split( ), weekStart: 0 });getLocale()获取指定 locale 数据Datetime.getLocale(en);值得注意的是Metro UI 对getLocale做了重写monkey-patch见 source/datetime/index.js。当Metro全局对象存在且Metro.locales中注册了对应区域时会从Metro.locales[_locale]读取january、february…、sunday、monday… 以及各自_short/_short_2后缀的键组装成months、weekdays、weekStart等标准结构。也就是说框架的 i18n 语言包直接喂养Datetime的区域数据。可对照 source/i18n/zh-CN.js 中january: 一月、sunday_short: 周日、weekStart: 0的写法理解语言包与Datetimelocale 的数据契约。align()对齐到时间部件起点将日期对齐到指定时间部件的起始Datetime.align(2023-01-10 12:00:00, month); // 2023-01-01 00:00:00 Datetime.align(2023-10-01 12:00:00, day); // 2023-10-01 00:00:00可对齐的部件如下PartDescriptionyear对齐到年初。month对齐到月初。week对齐到周初。day对齐到当日 00:00:00。hour对齐到小时起点。minute对齐到分钟起点。second对齐到秒起点。quarter对齐到季度起点。alignEnd()对齐到时间部件终点与align相对对齐到指定部件末尾Datetime.alignEnd(2023-01-10 12:00:00, month); // 2023-01-31 23:59:59 Datetime.alignEnd(2023-10-01 12:00:00, day); // 2023-10-01 23:59:59align(day)是组件中最常见的用法例如 source/components/calendar/calendar.js 中this.today datetime().align(day)将今天归零到当日零点用于日历选中态的精确比较。parseTime()解析时长字符串解析形如255d, 12h, 00m, 00s的时间长度字符串并返回Datetime实例const dt Datetime.parseTime(255d, 12h, 00m, 00s);sort()对Datetime实例数组排序const dt1 new Datetime(...); const dt2 new Datetime(...); const dt3 new Datetime(...); const sorted Datetime.sort([dt1, dt2, dt3]);isTomorrow()/isYesterday()判断给定日期字符串是否为明天 / 昨天Datetime.isTomorrow(2023-10-02 12:00:00); // true Datetime.isYesterday(2023-09-30 12:00:00); // true实例方法状态与模式控制immutable()切换可变状态const dt new Datetime(); dt.immutable(true); // immutable后续运算不修改自身返回新实例 dt.immutable(false); // mutable默认运算直接修改自身utc()/local()const dt new Datetime(); dt.utc(); // 切换为 UTC 模式 dt.local(); // 切换回本地模式useLocale()const dt new Datetime(); dt.useLocale(en); // 实例级切换区域在组件代码中经常以useLocale(locale, true)形式出现例如 source/components/calendar/calendar.js 中切换月份/年份时即调用datetime(...).useLocale(that.locale, true)以保证年月切换后仍渲染正确语言。clone()const dt new Datetime(); const dt2 dt.clone(); // 克隆实例对齐与取值/设值实例级align()/alignEnd()const dt new Datetime(); dt.align(month); // 对齐到月初 dt.alignEnd(month); // 对齐到月末 23:59:59val()整体取值/设值不传参数时返回实例值传参时设置新值const dt new Datetime(); dt.val(2023-10-01 12:00:00); // set value console.log(dt.val()); // get valueyear2()两位年份const dt new Datetime(2023-10-01 12:00:00); dt.year2(); // 23部件级取值/设值ms/second/minute/hour/day/month/year以下方法均为设值时传参、取值时不传参的双向接口const dt new Datetime(2023-10-01 12:00:00); dt.ms(); // 0 dt.ms(1000); // set milliseconds dt.ms(); // 1000 dt.second(); // 0 dt.second(30); dt.second(); // 30 dt.minute(); // 0 dt.minute(30); dt.minute(); // 30 dt.hour(); // 12 dt.hour(18); dt.hour(); // 18 dt.day(); // 1 dt.day(15); dt.day(); // 15 dt.month(); // 10 dt.month(5); dt.month(); // 5 dt.year(); // 2023 dt.year(2025); dt.year(); // 2025time()整体时间const dt new Datetime(2023-10-01 12:00:00); dt.time(); // 12:00:00 dt.time(18:30:00); // set time dt.time(); // 18:30:00weekDay()星期const dt new Datetime(2023-10-01 12:00:00); dt.weekDay(); // 0 dt.weekDay(5); dt.weekDay(); // 5get()/set()按部件名取值/设值const dt new Datetime(2023-10-01 12:00:00); dt.get(year); // 2023 dt.get(month); // 10 dt.set(year, 2025); // set year日期运算add 系列add()通用增减对指定部件增减数值负值即减法const dt new Datetime(2023-10-01 12:00:00); dt.add(2, day); // add 2 days dt.add(-2, day); // sub 2 days专用增减方法const dt new Datetime(2023-10-01 12:00:00); dt.addHour(2); // 加 2 小时 dt.addHour(-2); // 减 2 小时 dt.addMinute(2); // 加 2 分钟 dt.addSecond(2); // 加 2 秒 dt.addMs(2); // 加 2 毫秒 dt.addWeek(2); // 加 2 周 dt.addMonth(2); // 加 2 个月 dt.addYear(2); // 加 2 年addQuarter()季度运算const dt new Datetime(2023-10-01 12:00:00); dt.addQuarter(2); // add 2 quarters dt.add(2, quarter); // add 2 quarters等价格式化format()令牌全表format()是输出最常用的方法const dt new Datetime(2023-10-01 12:00:00); dt.format(YYYY-MM-DD); // 2023-10-01 dt.format(YYYY-MM-DD HH:mm:ss); // 2023-10-01 12:00:00 dt.format(YYYY-MM-DD HH:mm:ss.SSS); // 2023-10-01 12:00:00.000完整格式化令牌format tokens如下FormatDescriptionYY两位年份如 25YYYY完整年份如 2025M月份1-12MM月份01-12MMM月份短名称3 个字符MMMM月份全名称D日1-31DD日01-31d星期dd星期2 字符dddd星期全名称h小时0-1112 小时制hh小时00-11H小时0-2324 小时制HH小时00-23m分钟0-59mm分钟00-59s秒0-59ss秒00-59sss毫秒BB佛历年份buddhistBBBB佛历年份buddhistC世纪aam/pmAAM/PMIISO 星期z时区名称Z时区ZZ时区ZZZ时区W周序号WW周序号WWW周序号WWWW周序号框架内随处可见对format(YYYY-MM-DD)的使用例如 source/components/calendar/calendar.js 用datetime(this).format(YYYY-MM-DD)生成日期选择器的输入值calendar()插件的today字段也按该格式输出见下文。输出转换valueOf()/toString()const dt new Datetime(2023-10-01 12:00:00); dt.valueOf(); // 1696156800000毫秒时间戳 dt.toString(); // 2023-10-01 12:00:00标准 Date 转换方法组Datetime提供了一组与原生Date同名的转换方法Transform datetoDateString()toISOString()toJSON()toGMTString()toLocaleDateString()toLocaleString()toLocaleTimeString()toTimeString()toUTCString()toDate()—— 还原为原生Date对象unix()/timestamp()const dt new Datetime(2023-10-01 12:00:00); dt.unix(); // 秒级 Unix 时间戳 dt.unix(1696156800); // 设置 Unix 时间戳秒 dt.timestamp(); // 返回 Unix 时间戳毫秒比较方法same / compare / between / diff / distancesame()判断两个实例是否完全一致const dt1 new Datetime(2023-10-01 12:00:00); const dt2 new Datetime(2023-10-01 12:00:00); const dt3 new Datetime(2023-10-01 12:00:01); console.log(dt1.same(dt2)); // true console.log(dt1.same(dt3)); // falsecompare()先按指定部件对齐日期再用运算符、!、、、、比较const dt1 new Datetime(2023-10-01 12:00:00); const dt2 new Datetime(2023-10-01 12:00:00); const dt3 new Datetime(2023-10-01 12:00:01); console.log(dt1.compare(dt2, )); // true console.log(dt1.compare(dt3, )); // true console.log(dt1.compare(dt3, )); // false console.log(dt1.compare(dt3, )); // true console.log(dt1.compare(dt3, )); // false console.log(dt1.compare(dt3, !)); // truebetween()/older()/olderOrEqual()/younger()/youngerOrEqual()/equal()/notEqual()语义化的比较快捷方式const dt1 new Datetime(...); const dt2 new Datetime(...); const dt3 new Datetime(...); dt3.between(dt1, dt2); // 是否在 dt1 与 dt2 之间 dt1.older(dt2); // 是否早于 dt1.olderOrEqual(dt2); // 是否早于或等于 dt1.younger(dt2); // 是否晚于 dt1.youngerOrEqual(dt2); // 是否晚于或等于 dt1.equal(dt2); // 是否等于 dt1.notEqual(dt2); // 是否不等于diff()单位差值返回两个实例在指定单位上的差值可用单位ms、second、minute、hour、day、month、year。const dt1 new Datetime(...); const dt2 new Datetime(...); dt1.diff(dt2, day);distance()对齐后差值返回指定单位下、按对齐日期计算的距离const dt1 new Datetime(...); const dt2 new Datetime(...); dt1.distance(dt2, day);max()/min()极值实例方法或静态方法均可调用const dt1 new Datetime(...); const dt2 new Datetime(...); const dt3 new Datetime(...); const dt4 new Datetime(...); const dt5 new Datetime(...); dt1.max(dt2, dt3, dt4, dt5); // 返回最大值实例 Datetime.max(dt1, dt2, dt3, dt4, dt5); dt1.min(dt2, dt3, dt4, dt5); // 返回最小值实例 Datetime.min(dt1, dt2, dt3, dt4, dt5);日历与时间计算插件calendar()生成月历为实例所在月份生成日历数据可通过weekStart指定每周起始日const dt new Datetime(2023-10-01 12:00:00); const calendar dt.calendar(); console.log(calendar);返回结构如下const result { month: String, // 月份名称 days: Number[], // 该月天数数组 weekstart: 1 | 0, // 周起始日 weekdays: [], // 星期名称数组 today: now.format(YYYY-MM-DD), // 今日YYYY-MM-DD weekends: [], // 周末日期 week: [] // 周信息 }calendar插件正是 Metro UI 日历组件渲染的数据来源之一——source/components/calendar/calendar.js 中即通过datetime(this.current.year, this.current.month, this.current.day)构造实例并调用.calendar()生成月视图数据。buddhist()佛历const dt new Datetime(2023-10-01 12:00:00); dt.buddhist(); // 2566-10-01 12:00:00公历 543 年century()世纪const dt new Datetime(2023-10-01 12:00:00); dt.century(); // 21quarter()/addQuarter()const dt new Datetime(2023-10-01 12:00:00); dt.quarter(); // 4第四季度年度天数族dayOfYear/daysInMonth/daysInYearconst dt new Datetime(2023-10-01 12:00:00); dt.dayOfYear(); // 274 dt.daysInMonth(); // 31 dt.daysInYear(); // 365daysInYearMap()/daysInYearObj()按月天数视图数组形式按月份顺序与对象形式键为月份名称const dt new Datetime(2023-10-01 12:00:00); dt.daysInYearMap(); // [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] const locale en; const useShortName true; dt.daysInYearObj(locale, useShortName); // {Jan: 31, Feb: 28, Mar: 31, Apr: 30, May: 31, Jun: 30, Jul: 31, Aug: 31, Sep: 30, Oct: 31, Nov: 30, Dec: 31}年代族decade/decadeStart/decadeEnd/decadeOfMonthconst dt new Datetime(2023-10-01 12:00:00); dt.decade(); // 2020所属年代起点 dt.decadeStart(); // 2020-01-01 00:00:00 dt.decadeEnd(); // 2029-12-31 23:59:59 dt.decadeOfMonth(); // 0当月所属旬0/1/2ampm()/hour12()12 小时制const dt new Datetime(2023-10-01 12:00:00); dt.ampm(); // PM dt.hour12(); // 12isLeapYear()/isoWeekDay()/weekNumber()/isoWeekNumber()/weeksInYear()const dt new Datetime(2023-10-01 12:00:00); dt.isLeapYear(); // false dt.isoWeekDay(); // ISO 星期 dt.weekNumber(); // 40 dt.isoWeekNumber(); // 40ISO 周序号 dt.weeksInYear(); // 52moon()月相返回月相名称月相枚举如下const phases [ new-moon, // 新月 waxing-crescent, // 蛾眉月 first-quarter, // 上弦月 waxing-gibbous, // 盈凸月 full-moon, // 满月 waning-gibbous, // 亏凸月 last-quarter, // 下弦月 waning-crescent // 残月 ]const dt new Datetime(2023-10-01 12:00:00); dt.moon();strftime 格式化strftime()使用 POSIX 风格格式字符串const dt new Datetime(2023-10-01 12:00:00); dt.strftime(%Y-%m-%d %H:%M:%S); // 2023-10-01 12:00:00支持的 strftime 匹配表如下完整继承自源码const matches { %a: names.weekdaysShort[weekDay], // 星期短名 %A: names.weekdays[weekDay], // 星期全名 %b: names.monthsShort[month], // 月份短名 %h: names.monthsShort[month], // 月份短名同 %b %B: names.months[month], // 月份全名 %c: this.toString().substring(0, this.toString().indexOf( ()), %C: this.century(), // 世纪 %d: aDay, // 日补零 %D: [aDay, aMonth, year].join(/), // MM/DD/YY %e: day, // 日不补零 %F: [year, aMonth, aDay].join(-), // YYYY-MM-DD %G: thursday().year(), // ISO 周年份 %g: (thursday().year()).slice(2), // ISO 周两位年份 %H: aHour, // 小时00-23 %I: aHour12, // 小时00-11 %j: lpad(this.dayOfYear(), 0, 3), // 年内第几天001-366 %k: aHour, // 小时0-23 不补零 %l: aHour12, // 小时0-11 不补零 %m: aMonth, // 月份01-12 %n: month 1, // 月份1-12 不补零 %M: aMinute, // 分钟 %p: this.ampm(), // AM/PM %P: this.ampm(true), // am/pm %s: Math.round(time / 1000), // Unix 秒 %S: aSecond, // 秒 %u: this.isoWeekDay(), // ISO 星期1-7 %V: this.isoWeekNumber(), // ISO 周序号 %w: weekDay, // 星期0-6 %x: this.toLocaleDateString(), // 本地日期 %X: this.toLocaleTimeString(), // 本地时间 %y: year2, // 两位年份 %Y: year, // 完整年份 %z: this.timezone().replace(:, ), // 时区偏移 %Z: this.timezoneName(), // 时区名称 %r: [aHour12, aMinute, aSecond].join(:) this.ampm(), // 12 小时制完整时间 %R: [aHour, aMinute].join(:), // HH:MM %T: [aHour, aMinute, aSecond].join(:), // HH:MM:SS %Q: aMs, // 毫秒补零 %q: ms, // 毫秒不补零 %t: this.timezone() // 时区偏移含冒号 };时区相关utcOffset / timezone / timezoneNameconst dt new Datetime(2023-10-01 12:00:00); dt.utcOffset(); // UTC 偏移分钟 dt.timezone(); // 0300 dt.timezoneName(); // Europe/Kiev按运行环境而定今日 / 明天 / 昨天const dt new Datetime(2023-10-01 12:00:00); dt.isToday(); // 是否今天 dt.today(); // 今天保留时分秒 dt.tomorrow(); // 明天2023-10-02 12:00:00 dt.isTomorrow(); // 是否明天false dt.yesterday(); // 昨天2023-09-30 12:00:00 dt.isYesterday();// 是否昨天false其他工具timelapsetimelapse()返回自实例创建/设置值以来经过的时间描述const dt new Datetime(2023-10-01 12:00:00); // 休眠 2 秒后调用 dt.timelapse(); // few sec在 Metro UI 组件中的真实集成Datetime并非孤立工具它是框架组件体系的时间引擎。从源码中可以确认以下调用关系Calendar 日历组件source/components/calendar/calendar.jsconst time datetime()获取当前时间datetime().align(day)归零对齐Datetime.getLocale(locale).months[this.current.month]读取月份名称用于表头渲染同文件 L790。Datepicker / Calendarpicker 日期选择器通过Datetime.from(o.value, o.inputFormat, locale)解析用户自定义输入格式见 source/components/datepicker/datepicker.js 与 source/components/calendarpicker/calendarpicker.js。Countdown 倒计时Datetime.from(o.date, o.inputFormat)解析目标时间后调用.time()见 source/components/countdown/countdown.js。Chat 聊天组件消息时间戳通过Datetime.from(msg.time, o.inputTimeFormat, this.locale)解析见 source/components/chat/chat.js。通用工具层source/common-js/utilities.js 的日期校验工具内部即使用Datetime.from(val, format, locale)并配合Datetime.isDatetime(result)判断合法性。在 HTML 声明式用法中日历组件直接由data-rolecalendar触发且可用data-locale、data-week-start、data-input-format等属性把配置透传给底层Datetime参见 examples/calendar.htmldiv langua>赞分享前端UI组件【免费下载链接】Metro-UI-CSSA progressive front-end framework for creating high-performance responsive reactive web applications!项目地址https://gitcode.com/gh_mirrors/me/Metro-UI-CSS点击查看免费下载相关推荐Metro UI CSS Clock 组件实战指南声明式时钟、日期时间格式化与动态更新机制Metro UI CSS Clock 组件实战指南声明式时钟、日期时间格式化与动态更新机制 导读 本文面向 Metro UI CSS 框架使用者系统讲解内置前端UI组件Metro UI CSS Calendar 组件完全指南日期展示、多选、时间选择与事件管理实战Metro UI CSS Calendar 组件完全指南日期展示、多选、时间选择与事件管理实战 本指南以 Metro UI CSS 开源仓库中 Calenda前端UI组件Metro UI CSS Calendar Picker 组件完全指南日期选择、时间联动与移动端对话框模式Metro UI CSS Calendar Picker 组件完全指南日期选择、时间联动与移动端对话框模式 导读 Calendar Picker 是 Metr前端UI组件上一篇ReactPage内容可访问性检查自动化工具与手动测试下一篇asynq工具集全攻略afilter、asorted与异步缓存的高效应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考