@ bigbinary/ 需要时区
与时区合作的简单而轻量级的国家预防机制一揽子计划。 这个软件包为时区提供了人类友好的时区选择器和实用功能.
安装
您可以使用纱线安装软件包 :
yarn add @bigbinary/neeto-time-zones
将 CSS 样式导入到主样式表
您应该添加以下内容 main.scss 文件 :
@import "@bigbinary/neeto-time-zones/dist/style.css";
新时区选择器
用法 1
import { NeetoTimezoneSelector } from "@bigbinary/neeto-time-zones";
const ReactComponent = () => {
const timezoneRef = useCallback(node => {
if (!(node !== null)) return;
new NeetoTimezoneSelector(node, {
elementId: "custom-selector-element",
className: "custom-selector-class",
initialValue: "initial-timezone",
position: "top",
onChange: (timezone) => {
console.log(timezone);
},
onHourFormatChange: (timeFormat) => {
console.log(timeFormat);
}
});
}, []);
return (
<div
ref={timezoneRef}
/>
);
};
使用量 2
import NeetoTimezoneSelector from "@bigbinary/neeto-time-zones/react";
const ReactComponent = () => {
return (
<NeetoTimezoneSelector
elementId="custom-selector-element"
className="custom-selector-class"
initialValue="initial-timezone"
position="top"
onChange={(timezone) => {
console.log(timezone);
}}
onHourFormatChange={(timeFormat) => {
console.log(timeFormat);
}}
/>
);
}
配置
您可以通过选项作为第二个参数来配置时区选择器组件.
- 元素ID: NeetoTimezoneSelector 的标识。 默认 ID 是
timezone-selector - 类Name:可添加到组件中的自定义类.
- 初始值:时区选择器的初始值.
- 位置:选择者应打开的位置。 可用选项 :
top, (中文(简体) ),bottom默认位置为bottom。 。 。 . - : 当时区选择器改变时调用函数.
- 上 HourFormatChange: 当时间格式改变时调用函数.
- 是TimeFormatSwitchBible:将此设置为假将隐藏时间格式来切换 。 默认值为真 .
- 是TimeFormat24H:当禁用内部时间格式切换时,请使用此道具来通过时间格式选项。 这将用于更改时区选择器内的时间格式 .
ianaTimezone 到人可读
import { ianaTimezoneToHumanReadable } from "@bigbinary/neeto-time-zones";
ianaTimezoneToHumanReadable("Asia/Calcutta") // => Indian Standard Time
ianaTimezoneToHumanReadable("America/New_York") // => Eastern Standard Time
ianaTimezoneToHumanReadable("Europe/Berlin") // => Central Standard Time
转写支持
时区标签可以在用户的浏览器语言脚本(如印地语,阿拉伯语,日语)中显示. 这是 转写 ——英语时区名称在目标脚本中拼写而来,不是被翻译.
拾取器部件自动通过 navigator.language 并装入相应的转写文件。 拾取器不需要配置 .
对于消费的应用软件 ianaTimezoneToHumanReadable 直接( 不渲染拾取器), 调用 initTranslations() 一旦在应用程序启动时预装转写数据 :
import { initTranslations } from "@bigbinary/neeto-time-zones";
// Call once at app startup (e.g., in your entry point)
initTranslations();
// After initTranslations resolves, ianaTimezoneToHumanReadable
// returns transliterated labels based on the browser locale.
ianaTimezoneToHumanReadable("Asia/Calcutta")
// => "इंडियन स्टैंडर्ड टाइम" (when browser locale is "hi")
// => "Indian Standard Time" (when browser locale is "en" or unsupported)
支助的当地人(35人)
活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活
中国地产变体自动处理:
zh-Hans-CN, (中文(简体) ),zh-Hans, (中文(简体) ),zh-SG, (中文(简体) ),zh- 简化中文(zh-CN(中文(简体) )zh-Hant-TW, (中文(简体) ),zh-Hant, (中文(简体) ),zh-HK, (中文(简体) ),zh-MO——传统汉语zh-TW(中文(简体) )
添加新区域
- 创建
data/translations/<locale>.json带有所需结构(见现有文件供参考) - 复制文件到
ruby/data/translations/<locale>.json - 添加一个
case "<locale>": return () => import("../../data/translations/<locale>.json");输入js/translations/index.js - 重建软件包
获取时区对象
import { getTimezoneObject } from "@bigbinary/neeto-time-zones";
getTimezoneObject("Asia/Kolkata")
// => { utc: ["Asia/Kolkata", "Asia/Calcutta"], main: "Asia/Kolkata", label: "Indian Standard Time", ... }
是时区
import { isValidTimezone } from "@bigbinary/neeto-time-zones";
isValidTimezone("Asia/Kolkata") // => true
isValidTimezone("Invalid/Zone") // => false
获取浏览时区
import { getBrowserTimezone } from "@bigbinary/neeto-time-zones";
getBrowserTimezone() // => "Asia/Kolkata" (based on browser's Intl API)
发展
清除还原
git clone [email protected]:bigbinary/neeto-time-zones.git
cd neeto-time-zones/js
yarn install
yarn dev
要与主机应用程序捆绑 :
yarn build && cp dist/* ../../neeto-cal-web/node_modules/@bigbinary/neeto-time-zones/dist
出版指令
将标记为补丁、次要或主干件的PR合并到主分支后,将发布一个软件包。 补丁标签地址为错误修正, 小符号表示新特性的添加, 并主要表示断开更改, 坚持其中概述的原则 语义版 (SemVer)。 。 。 .
您可以在 GitHub 动作中检查并发布发布工作流程, 以获取实时更新 .