많은 곳에서 나는 서로 다른 시간대의 동료들과 쉽게 데이트를 공유할 수 있기를 바란다.가령 내가 9:00에서 회의를 하고 싶다면, 이것은 무슨 뜻입니까?불행하게도, 만약 당신이 날짜를 쓴다면, 그들은 나의 시간대를 알고 번역해야 한다.만약 응용 프로그램, 특히 인터넷 기반 응용 프로그램이 간단한 HTML 요소를 통해 쉽게 이 점을 실현할 수 있다면 좋지 않겠습니까?
요구 사항:

날짜를 설정할 수 있어야 합니다

.

날짜가 사용자의 시간대에 표시됨

다양한 형식의 유연한 지원

본보기

export class WcLocalDate extends HTMLElement {
    static observedAttributes = [];
    constructor() {
        super();
        this.bind(this);
    }
    bind(element){
        this.render = this.render.bind(element)
    }
    render(){
        this.shadow = this.attachShadow({ mode: "open" });
        this.shadow.innerHTML = ``;
    }
    connectedCallback() {
        this.render();
        this.cacheDom();
    }
    cacheDom(){
        this.dom = {
        };
    }
    attributeChangedCallback(name, oldValue, newValue) {
        this[name] = newValue;
    }
}

customElements.define("wc-local-date", WcLocalDate);

나는 어떤 관련 사건도 생각나지 않기 때문에 우리는 이 사건들을 생략할 수 있지만, 그 외에 그것은 이전의 댓글과 같다.

등록 정보

보통 나는 DOM에서 시작하지만, 거기에는 거의 아무것도 없기 때문에 속성을 보여 준다.가장 뚜렷한 것은 value 날짜를 문자열로 한다.우리는 형식을 받아들이기 위해 속성이 하나 더 필요하다.마찬가지로, 이것은 CSS 사용자 정의 속성의 모든 기능을 사용하여 날짜 형식을 지정하고, 미디어 조회에 따라 짧아지게 할 수 있는 좋은 곳입니다. 그러나 우리는 그것들을 관찰할 수 없습니다.그래서 우리는 약간의 속성이 필요하다.나는 2:date-style와time-style를 생각해냈다.이러한 옵션은 Intl.DateFormat API를 사용하여 로컬화할 것이며, 이후에 어떻게 정렬되는지 분명하기 때문입니다.

#value = new Date();
#dateStyle = "full";
#timeStyle = "full";
static observedAttributes = ["value", "date-style", "time-style"];
get value(){
    return this.#value;
}
set value(val){
    this.#value = val;
}
set dateStyle(val){
    this.#dateStyle = val;
}
set timeStyle(val){
    this.#timeStyle = val;
}

지금은 기본적인 Getter/setter 기능만 필요합니다.value 에서 문자열에서 Date 로 바꾸기를 원하지만.또한 속성 이름을 JS 규약에 더 부합되는 이름으로 바꾸기를 원합니다.

attributeChangedCallback(name, oldValue, newValue) {
    if(name === "value"){
        this.value = new Date(val);
    } else {
        this[hyphenCaseToCamelCase(name)] = newValue;
    } 
}

아주 기본적이에요.hypenCaseToCamelCase 이렇게 보입니다.

function hyphenCaseToCamelCase(text){
    return text.replace(/-([a-z])/g, g => g[1].toUpperCase());
}

대부분의 사람들과 마찬가지로, 나는 stackoverflow로부터 훔쳐 왔지만, 이것은 설명할 가치가 있다.그것은 - 이후의 소문자를 찾은 다음, Replace 함수에서 두 번째 문자 (첫 번째는 - 를 가져와 대문자로 되돌려줍니다.구성 요소 시스템을 만들고 있다면 쉽게 공유할 수 있기 때문에 도구 상자에 넣으세요.
따라서 값은 여전히 변환이 필요하기 때문에 실행하는 것이 의미가 있다new Date(str).따라서 ISO 날짜 형식을 지원하도록 쉽게 결정할 수 있습니다.

ISO 날짜

JS 근처에 오래 있으면 대추는 다트총과 날카로운 대창이 가득한 어두운 동굴이라는 것을 알게 될 것이다.동굴의 이 구역에서 보물은 ISO(또는 자집)의 시간을 현명하게 입력하고 이를 해석할 수 있다.
우리는 이렇게 하기를 바란다. 왜냐하면 그것은 저주받은 입력 형식의 현지화 문제에서 우리를 해방시키기 때문이다.설령 우리가 간단한 숫자와 구분자만 있는 형식에 국한된다 하더라도 날짜 형식은 다른 순서가 있을 수 있다. 이것은 사용자의 문화에 달려 있다.국제화의 날짜로서, 우리는 그것을 모든 사람이 편리하게 사용할 수 있도록 확보해야 한다.ISO는 작성과 해석이 용이합니다.
ISO 날짜를 다시 봅시다.ISO 8601 공식 이름은 날짜를 지정하는 텍스트 형식으로 컴퓨터 플랫폼에서 상당히 표준적이다.그것은 1년 1월 1일, 자모 'T' 시 분초, 그리고 시간 편이이다.대부분의 부품은 선택할 수 있으며 0으로 채워야 합니다.

2020-11-06T05:35:00Z

2020-11-06T05:35:00-09:00

2020-11-06T05:35:00-0900

2020-11-06T05:35:00+01:00

2020-11-06T05:35:00+0100

2020-11-06T05:35.001

2020-11-06T05:35

2020-11-06

2020-11

2020

Date에서 지원됩니다.이 기준은 편향 속기 2020-11-06T05:35:00-09 와 같은 것도 지원하지만, 이것은 믿을 수 없다.
첫 번째 예제Z에서 UTC(주루 시간) 를 지정합니다.다음 4개는 hour:minute의 시간대 편이이고 사칭:은 선택할 수 있으며 UTC의 +/-가 될 수 있다.다음 거는요?그것들은 어느 시간대입니까?만약 당신이 시간 부분을 포함한다면 그것은 사용자의 시간대이고, 만약 당신이 포함하지 않는다면 그것은 UTC이다.알겠습니다!
이런 이상한 행동은 분명히 사용자로 하여금 매우 중요한 회의를 놓치게 할 것이다.따라서 다양한 형식 유형을 캡처하고 이를 규범화할 수 있는 함수를 구축해야 합니다.

//this is static, not a member of WcLocalDate
function asUTC(dateString){
    if (/\d\d\d\d-\d\d-\d\dT\d\d:\d\d$/.test(dateString)) {
        return `${dateString}:000Z`;
    }
    return dateString;
}

정규 표현식은 보통 쓰기보다 읽기에 더 무섭다.우리가 해야 할 일은 테스트\d(숫자)의 서열이다. 그중에 -가 유사yyyy-mm-dd하지만 시간분량T+hh:mm:ss가 삽입되어 있다.만약 그것과 일치한다면, 우리는 나머지 부분을 추가해서 UTC로 만들 것입니다.마지막 $ 을 주의하십시오. 이것은 매우 중요합니다. 그렇지 않으면 부분을 더 긴 형식과 일치하게 할 것입니다. 이것은 우리가 원하는 것이 아닙니다.만약 우리가 정확한 격식을 얻지 못한다면, 우리는 그들이 정확한 것을 썼다고 가정한다. 적어도 이런 오류는 좀 더 뚜렷해야 한다.
참고로 저는 API를 사용할 때 작성한 것이기 때문에 정적 시간대로 변환되는 형식만 찾으려면 다음과 같은 정규 표현식을 사용할 수 있습니다. /\d\d\d\d(-\d\d(-\d\d(T\d\d:\d\d:\d\d(Z|[+-]\d\d:?\d\d))?)?)?$/

변화에 반응하다

속성이 변경되면 업데이트된 매개 변수를 사용하여 날짜를 다시 표시해야 하므로 setters를 업데이트합니다.

setDisplayValue(){
    const options = {};
    if (this.#dateStyle) {
        options.dateStyle = this.#dateStyle;
    }
    if (this.#timeStyle) {
        options.timeStyle = this.#timeStyle
    }
    const formatter = new Intl.DateTimeFormat(undefined, options);
    this.#displayValue = formatter.format(this.#value);
    if(this.dom?.date){
        this.dom.date.textContent = this.#displayValue;
    }
}
get value(){
    return this.#value;
}
set value(val){
    this.#value = val;
    this.setDisplayValue();
}
set dateStyle(val){
    this.#dateStyle = val;
    this.setDisplayValue();
}
set timeStyle(val){
    this.#timeStyle = val;
    this.setDisplayValue();
}

우리는 this.setDisplayValue() 매개 변수를 받아들여 Intl.DateTimeFormat 정확한 언어 환경으로 그것을 나타낼 수 있도록 호출했다.첫 번째 매개변수는 사용자 로케일을 사용하게 되므로 정의되지 않습니다.속성 업데이트는 렌더링 전에 트리거되기 때문에 this.dom가 존재하는지 확인해야 합니다.

테스트

테스트 구성 요소가 짜증날 수도 있습니다.더 신뢰할 수 있는 방법은 컴퓨터의 로케일과 시간대를 변경한 후, 완성된 후에 그것을 원래의 위치로 설정하는 것이다.다행히도 크롬은 지역 설정을 설정하기 위해 개발 도구를 제공했다. 크롬은 약간의 숨김만 있을 뿐이다.

콘솔 서랍

67917시

센서

이제 로케일과 위치를 시뮬레이션할 수 있습니다.

퇴로

브라우저에서 사용자 정의 요소를 지원하지 않거나 JS를 지원하지 않으면 뒤로 이동시킬 수 있습니다.이것은 간단합니다. 태그에 날짜를 하나만 추가하면 됩니다.

<wc-local-date value="2020-11-06T01:00:00Z" date-style="short">2020-11-06T01:00:00Z</wc-local-date>

내부 부분은 렌더링되고 브라우저가 지원하면 로컬 날짜 구성 요소 표시로 강화됩니다.

데모

참고: Codepen은 HTML 태그에 로케일en를 설정한 것 같아서 다른 언어 설정은 덮어쓸 수 있지만 구성 요소 오류는 아닙니다.