날짜 시간 필드는 마스터 애드온으로 빌드한 사용자 지정 위젯에 캘린더 선택기를 추가합니다 위젯 빌더. 편집자는 Elementor 에서 필드를 클릭하고 하루를 선택하고 허용하면 시간을 선택합니다. 위젯은 다음과 같은 일반 텍스트 값으로 선택권을 얻습니다 2026-10-24 19:30HTML로 인쇄하거나 카운트다운 스크립트로 전달할 수 있습니다.
Date Time 은 Pro 필드입니다. 무료 플러그인에는 제한된 Widget Builder 가 포함되어 있으며 전체 필드 세트가 함께 제공됩니다 마스터 애드온 프로.
날짜 시간 필드가 수행하는 작업 #
- Elementor 에서 위젯의 패널에 날짜 입력을 추가합니다. 이를 클릭하면 캘린더가 열립니다.
- 와 함께 시간 활성화 에,달력은 아래에 1 시간 분 행을 얻습니다. 시계는 항상 24 시간입니다.
- 선택한 값을 텍스트로 저장합니다:
Y-m-d H:i(예를 들어2026-10-24 19:30) 시간이 있거나Y-m-d(2026-10-24) 그것 없이. - 토큰을 어디에 두든 그 가치를 인쇄하세요
{{ event_date }}HTML, CSS 또는 JS 패널에서.
건축업자에게 새로운? 읽기 위젯 빌더 개요 일단 위젯을 열어놓고 돌아오세요.
시작하기 전에 #
- Elementor가 설치되어 활성화된 WordPress입니다.
- Elementor 및 Master Addons Pro 용 마스터 애드온,둘 다 활성화됨. The 설치 가이드 설정을 다룹니다.
- 위젯 빌더에서 열린 위젯. 이 가이드의 예는 “이벤트 카운트다운” 위젯입니다: 라는 텍스트 필드
event_title라는 이름의 날짜 시간 필드입니다event_date그리고 그 날짜까지 카운트다운되는 짧은 스크립트입니다.
날짜 시간 필드를 추가하는 방법 #
- 로 이동 마스터 애드온 > 위젯 빌더 그리고 위젯을 엽니다.
- 에 콘텐츠 탭, 아직 없는 경우 섹션을 추가, 예를 들어 “이벤트”.
- 유형
date왼쪽의 필드 검색 상자에. - 드래그 날짜 시간 섹션으로. 필드의 연필을 클릭하여 설정을 엽니다.
날짜 시간 필드 옵션이 설명되었습니다 #
- 라벨: elementor 의 입력 옆에 있는 텍스트,예를 들어 “이벤트 날짜”.
- 이름: 필드의 고유 ID 및 토큰 이름. 예를 들어 문자,숫자 및 밑줄만 사용합니다
event_date. - 설명: elementor 의 입력 아래에 표시된 힌트,예를 들어 “카운트다운이 끝나는 날짜와 시간을 선택합니다.”
- 시간 활성화: 시간 및 분 행을 캘린더에 추가하고 저장된 형식을 전환합니다
Y-m-d에Y-m-d H:i. - 분 증가: 화살표를 클릭할 때마다 분 이동 거리입니다. 기본값은 1 입니다. 15 를 사용하면 화살표는 :00,:15,:30 및:45 를 통해 단계적으로 이동합니다.
- 기본값: 위젯의 새 복사본이 시작되는 날짜입니다.
기본값 상자는 동일한 캘린더를 열므로 입력하는 대신 시작 날짜를 선택합니다. 시간 열기 가 켜져 있을 때 시간 행이 여기에도 나타납니다.
카운트다운의 경우,미래의 기본 날짜를 선택합니다. 그런 다음 새 위젯은 0 을 표시하는 대신 바로 카운트다운합니다.
공통 설정 #
- 라벨 표시 패널에 레이블을 숨기거나 표시합니다.
- 라벨 블록 입력 위에 라벨을 자체 라인에 놓습니다. 라벨이 길면 켜십시오.
- 조건 다른 컨트롤이 특정 값을 가질 때만 필드를 표시합니다. 예를 들어 “카운트다운 표시” 스위처입니다. 참조 조건.
- 분리기 컨트롤 전후에 구분선을 그립니다.
반응형 제어,동적 지원,프론트엔드 사용 가능,제어 클래스 및 선택기가 모든 필드에 나타납니다. 이 가이드의 설정에는 이들 중 어느 것도 필요하지 않으며 날짜 선택기가 CSS 를 작성하지 않으므로 선택기가 비어 있을 수 있습니다.
선택자는 시간 전용 시계나 과거 날짜를 차단할 수 있는 옵션이 없습니다. 편집자는 아무 날이나 선택할 수 있습니다.
템플릿에서 날짜를 사용하세요 #
날짜가 표시되어야 하는 위치에 토큰을 인쇄합니다. 이벤트 카운트다운 위젯에서 HTML 은 텍스트 줄과 a 에 날짜를 넣습니다 data-deadline 스크립트가 읽는 속성:
<div class="event-card">
<p class="event-title">{{ event_title }}</p>
{% if event_date %}
<p class="event-when">Starts {{ event_date }}</p>
<div class="event-countdown" data-deadline="{{ event_date }}">
<span class="days">0</span>d <span class="hours">0</span>h <span class="mins">0</span>m
</div>
{% endif %}
</div>
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 {% if event_date %} 중요한 사항을 확인하십시오. 편집기가 입력을 지우면 토큰은 아무것도 인쇄하지 않습니다. 기본 값은 다시 사용되지 않으며 검사가 없으면 카운트다운이 표시됩니다 NaN.
JS 패널에서 카운트다운을 빌드합니다 #
JS 패널은 이 스크립트를 실행합니다. 각 카운트다운을 찾아 저장된 텍스트를 날짜로 바꾸고 30 초마다 숫자를 업데이트합니다:
document.querySelectorAll(".event-countdown").forEach(function (el) {
var deadline = new Date(el.dataset.deadline.replace(" ", "T"));
if (isNaN(deadline)) return;
function tick() {
var diff = Math.max(0, deadline - new Date());
el.querySelector(".days").textContent = Math.floor(diff / 86400000);
el.querySelector(".hours").textContent = Math.floor(diff / 3600000) % 24;
el.querySelector(".mins").textContent = Math.floor(diff / 60000) % 60;
}
tick();
setInterval(tick, 30000);
});
replace(" ", "T")회전2026-10-24 19:30안으로2026-10-24T19:30모든 브라우저가 동일한 방식으로 읽는 형식입니다.isNaN(deadline)날짜가 비어 있거나 읽을 수 없을 때 스크립트를 중지합니다.- 데이터 속성에서 값을 읽으면 페이지의 각 위젯이 자체 날짜까지 카운트다운됩니다.
토큰은 JS 패널에서도 직접 작동합니다. 우리의 테스트에서, var deadline = "{{ event_date }}"; 저장된 날짜를 인쇄했습니다. 따옴표를 유지하십시오. 왜냐하면 bare 날짜는 유효한 JavaScript 가 아니기 때문입니다.
저장된 값은 시간대가 없습니다. 브라우저는 방문자의 현지 시간으로 읽으므로 19:30 까지의 카운트다운은 런던에서 19:30 에 끝나고 뉴욕에서 19:30 에 다시 끝납니다. 전 세계적으로 한 순간 동안,예를 들어 구문 분석하기 전에 문자열에 오프셋을 추가합니다 2026-10-24T19:30:00+00:00.
Elementor 에서 Date Time 컨트롤을 사용합니다 #
페이지에 위젯을 추가하거나 페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다. 필드는 에 있습니다 콘텐츠 라벨 아래에 있는 탭. 입력을 클릭하여 캘린더를 열고 하루를 선택한 다음 아래 행에서 시분으로 설정합니다. 미리보기는 선택하자마자 업데이트됩니다.
월 이름은 드롭다운이 있고 연도는 숫자 상자로, 개월을 앞당기면 클릭이 많이 걸리지 않습니다.
일반적인 사용 사례 #
- 출시, 판매 및 웹 세미나에 대한 카운트다운.
- 타이틀과 장소 옆에 날짜가 표시된 이벤트 카드.
- 마감일이 지나면 스크립트에 숨겨지는 배너를 제공합니다.
- 일정 위젯에 인쇄된 열기 또는 닫기 시간입니다.
날짜 시간 필드와 함께 작업하기 위한 팁 #
- 편집자가 위젯을 사용하기 전에 시간 활성화를 결정합니다. 형식을 전환한 후에 선택한 날짜에만 형식이 변경됩니다. 로 저장된 값
2026-10-24 19:30시간 활성화를 켠 후에도 시간을 유지합니다. - 항상 빈 값을 처리합니다. 마크업을 감싸세요
{% if %}그리고 스크립트에서 잘못된 날짜를 확인하십시오. - 과거의 날짜에 대한 계획. 예제는 0 에서 멈춥니다. 위젯을 숨기거나 “이 이벤트가 종료되었습니다” 메시지를 표시할 수도 있습니다.
- 5분, 15분, 30분 증분을 사용하세요 1시간 또는 30분에 시작되는 이벤트의 경우.
- 명확한 설명을 작성하세요. 날짜가 시작인지, 끝인지, 마감일인지 말하여 편집자가 올바른 날짜를 선택하도록 하세요.
자주 묻는 질문 #
Date Time 필드는 무료인가요?
아니요. 날짜 시간은 위젯 빌더의 Pro 필드 중 하나이므로 Master Addons Pro를 위젯에 추가하려면 먼저 활성화해야 합니다.
저장된 날짜는 어떤 형식을 사용합니까?
Enable Time을 켜면, Y-m-d H:i예를 들어 2026-10-24 19:30. 꺼져서, Y-m-d예를 들어 2026-10-24. 시계는 항상 24 시간이다.
왜 내 카운트 다운은 NaN을 표시합니까?
날짜 필드가 비어 있거나 값을 읽을 수 없습니다. 카운트다운을 에서 감싸십시오 {% if event_date %} 그리고 언제 스크립트를 건너뜁니다 isNaN(deadline) 는 사실이다.
시간전용 피커를 만들거나 지난 날짜를 차단할 수 있나요?
필드 설정에서가 아닙니다. 날짜 시간 필드에는 항상 캘린더가 표시되며 편집자는 아무 날짜나 선택할 수 있습니다.
JavaScript 내부에서 토큰을 사용할 수 있습니까?
예. 토큰은 JS 패널에서 작동합니다. 에서와 같이 토큰을 따옴표로 넣으십시오 "{{ event_date }}"또는 HTML의 데이터 속성에서 읽어보세요.
감싸는 #
콘텐츠 섹션에 날짜 시간 필드를 추가하고 시간이 필요한지 여부를 선택한 다음 인쇄합니다 {{ event_date }} HTML 에서 또는 JS 패널에서 읽으십시오. 빈 값을 확인하고 편집기가 날짜를 지우면 위젯이 유지됩니다. X 와 페어링하십시오. 이 위젯은 2009 년 10 월 1 일 1 일 2 일 1 일 스위처 필드 편집자가 카운트다운을 숨기고 볼 수 있도록 합니다 가격 각 계획에 포함된 내용입니다.
