날짜 시간

X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 날짜 시간 필드 사용자 정의 위젯에 자유 텍스트 날짜 상자 대신 적절한 캘린더 선택기를 제공합니다. 편집자는 Elementor 에서 필드를 클릭하면 Flatpickr 캘린더가 열리고 위젯이 기대하는 형식을 입력하는 것에 대해 전혀 걱정하지 않고 날짜 (및 선택적으로 시간) 를 선택합니다. 마스터 애드온 내부 위젯 빌더는, 그 일관성은 전체 포인트: 값은 항상 템플릿과 스크립트가 의존 할 수있는 예측 가능한 형식으로 도착합니다.

Date Time 필드가 지원합니다 조건 모든 컨트롤과 마찬가지로 해당 값도 다음을 통해 인쇄됩니다 나뭇가지 구문 템플릿 엔진, 그래서 비교하거나 감싸도 됩니다 {% if %} 템플릿의 블록. 두 가이드 모두 설정 및 제한 사항을 다룹니다.

필드는 모든 간단한 값 필드와 같은 토큰을 통해 연결됩니다. 인쇄 {{ event_date }} 날짜를 표시하거나 카운트다운, 영업 시간 확인 또는 일정 스크립트를 통해 날짜를 구문 분석할 수 있는 JS 패널에 전달하려면 HTML 패널에서.

날짜 시간 필드가 수행하는 작업 #

• 위젯의 Elementor 패널에서 클릭-열기 캘린더 선택기 (Flatpickr) 를 렌더링합니다.
• 선택적으로 달력과 함께 시간 선택기를 포함합니다.
• 픽을 정규화된 형식화된 문자열로 저장합니다 Y-m-d H:i 시간이 활성화되어 있거나 Y-m-d 없이.
• HTML, CSS 또는 JS 패널의 어느 위치에서나 해당 문자열을 인쇄합니다 {{ your_field_name }}.
• 카운트다운 및 위젯 예약의 일반적인 경로인 JavaScript를 직접 제공합니다.

사용자 정의 위젯이 새 영역인 경우 위젯 빌더 개요 더 나은 출발점입니다; 이 페이지에서는 편집자를 둘러보는 방법을 알고 있다고 가정합니다.

시작하기 전에 #

• 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
• Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
• Widget Builder 편집기에서 열리는 사용자 정의 위젯입니다. 우리의 예는 날짜 시간 필드가 명명 된 이벤트 카운트 다운 위젯입니다 event_date 위젯의 스크립트가 카운트다운됩니다.

날짜 시간 필드를 추가하는 방법 #

드래그하세요 날짜 시간 필드 패널에서 아래 섹션으로 필드 콘텐츠 탭. 그것의 옵션은 착륙 한 번 왼쪽에 열립니다.

날짜 시간 필드 옵션이 설명되었습니다 #

• 라벨: elementor 에서 선택기 옆에 표시된 텍스트,예를 들어 “이벤트 날짜”.
• 이름: 템플릿이 참조하는 고유 식별자입니다. 예를 들어 문자,숫자 및 밑줄만 표시됩니다 event_date.
• 기본값: 시작 날짜 문자열은 위젯과 함께 제공됩니다.
• 시간 활성화: 달력에 시분 선택기를 추가합니다. 켜져 있으면 값이 다음과 같이 나옵니다 Y-m-d H:i (좋아요 2026-12-31 18:00); 그것을 끄면 평원처럼 됩니다 Y-m-d 날짜.
• 분 증가: 분 선택기가 이동하는 단계이므로 편집기는 5, 15 또는 30 분 슬롯으로 제한할 수 있습니다.
• 설명, 라벨 표시, 분리기: 표준 표시 옵션과 다른 컨트롤에 특정 값이 있는 경우에만 필드를 표시하는 조건이 추가됩니다.

후드 아래에서 피커는 다음을 수락합니다 picker_options 다음을 포함하여 추가 Flatpickr 설정이 있는 개체입니다 noCalendar 시간전용 피커인 경우 dateFormat, time_24hr, 그리고 minDate/maxDate 경계. 빌더 UI 는 공통적인 것,시간 및 분 증분 활성화,앞 및 가운데를 유지하고 런타임은 저장된 값을 위의 두 형식으로 어느 쪽이든 정규화합니다.

날짜 시간 필드를 토큰과 연결합니다 #

Date Time 필드는 토큰 필드입니다. 날짜를 표시하는 것은 HTML 패널에 있는 하나의 토큰입니다:

<p class="event-when">Doors open {{ event_date }}</p>

더 일반적인 배선은 JS 패널입니다. 값이 안정적이기 때문입니다 Y-m-d H:i 문자열, JavaScript는 이를 구문 분석하고 카운트다운을 구동할 수 있습니다:

// JS panel
var deadline = new Date("{{ event_date }}".replace(" ", "T"));

var timer = setInterval(function () {
  var diff = deadline - new Date();
  if (diff <= 0) { clearInterval(timer); return; }
  var days  = Math.floor(diff / 86400000);
  var hours = Math.floor((diff % 86400000) / 3600000);
  document.querySelector(".event-countdown").textContent =
    days + "d " + hours + "h";
}, 1000);

국제 출시 전에 알아둘 가치가 있는 한 가지: 구문 분석된 날짜에는 시간대가 첨부되어 있지 않습니다 new Date() 각 방문자의 현지 시간으로 해석합니다. “18:00”에 대한 카운트 다운은 베를린에서 18:00 에 끝나고 뉴욕에서 18:00 에 다시 끝납니다. 단일 글로벌 마감일에 대해 다음과 같은 명시 적 오프셋을 추가합니다 +00:00 구문 분석하기 전에 문자열에.

조심하세요: 토큰은 일반 문자열을 인쇄하므로 JavaScript로 인용하세요. var deadline = "{{ event_date }}"; 작동; 따옴표가 없으면 렌더링된 값은 구문 오류입니다. 그리고 형식은 시간 활성화 설정에 의해 고정되므로 스크립트에서 기대하는지 미리 결정하십시오 2026-12-31 또는 2026-12-31 18:00을, 그리고 토글을 그것과 일치하게 유지한다.

Elementor 에서 Date Time 컨트롤을 사용합니다 #

Elementor 의 페이지에 사용자 정의 위젯을 추가하거나,페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다. 필드는 레이블 아래에 텍스트 스타일 입력으로 표시됩니다; 클릭하면 캘린더 팝오버가 열립니다.

하루를 선택하고 시간 활성화를 켜면 캘린더 아래에 있는 시간과 분을 설정합니다. 입력은 포맷된 값으로 채워지고 미리보기가 업데이트됩니다. 편집자는 절대로 날짜를 직접 입력하지 않으므로 스크립트가 구문 분석하는 형식은 항상 도착하는 형식입니다.

일반적인 사용 사례 #

• 카운트다운 위젯 출시, 판매, 이벤트의 경우 JS 패널이 계산을 수행합니다.
• 이벤트 카드 장소와 제목 옆에 형식이 지정된 날짜를 인쇄합니다.
• 한정판 배너 마감일이 지나면 스크립트가 숨겨집니다.
• 예약 및 일정 표시 열기 또는 닫기 시간이 마크업을 공급하는 경우.
• “에 게시” 스타일 메타 데이터 사용자 정의 콘텐츠 위젯의 경우.

날짜 시간 필드와 함께 작업하기 위한 팁 #

• Enable Time 을 작업에 매치합니다. 카운트다운에는 시간 구성 요소가 필요합니다; “published on” 라인은 그렇지 않습니다. 저장된 형식은 토글을 따릅니다.
• JS에서 토큰을 인용하세요. 값은 문자열이며 인용되지 않은 날짜는 스크립트가 렌더링되는 순간 스크립트를 깨뜨립니다.
• 구문 분석하기 전에 정규화합니다. 공간을 다음으로 교체합니다 T카운트다운 예에서와 같이 유지합니다 new Date() 브라우저 전반에 걸쳐 일관되게 구문 분석합니다.
• 나중에 기본값을 설정하세요 카운트다운 위젯의 경우 0을 표시하는 대신 새로운 드롭이 카운트다운됩니다.
• 분 증가를 사용하여 소음을 줄입니다. 15분 단계는 임의의 분보다 선택하고 읽기가 더 쉽습니다.
• 과거를 처리하라. 마감일이 지났을 때 어떤 일이 일어나는지 스크립트에서 결정하십시오: 위젯을 숨기거나, 메시지를 표시하거나, 0에서 중지하십시오.

자주 묻는 질문 #

감싸는 #

위젯 빌더 날짜 시간 필드는 편집자의 손에서 날짜 항목을 꺼내어 예측 가능한 문자열을 사용자의 손에 넣습니다: 패널에 하나의 선택기, 템플릿에 하나의 토큰, 그리고 스크립트가 방어 코드 없이 구문 분석할 수 있는 형식과 쌍을 이룹니다 스위처 필드 만료된 상태 동작을 전환하려면 또는 숫자 필드 조정 가능한 새로 고침 간격의 경우 나머지 부분을 탐색합니다 마스터 애드온 위젯 및 확장, 그리고 보세요 가격 페이지 각 계획에 포함된 내용입니다.