WordPress 플러그인 "Snow Monkey Forms"에서 날짜 선택을 수행하려면

Snow Monkey Forms는 WordPress에 메일 형식을 설치하는 플러그인입니다.
MW WP Form의 진짜 후계 플러그인은 워드프레스의 블록 편집기와 완전히 대응해 환승하고 싶었지만 기능 면에서는 간소화됐다.
다음은 요구가 많은'날짜 선택'을 실현하는 절차를 총결하였다.npm과 웹팩(JavaScript를 거의 쓰지 못함)을 사용할 수 없는 사람에게도 보충해야 한다.
창 설정

날짜를 선택할 경우 일반적으로'제1희망','제2희망'을 입력하는 예약 관계다.
따라서 텍스트 입력 세트를 만듭니다.
화면 캡처의 예시에서 시간 선택도 선택 상자에 추가됩니다.여기에는 JavaScript에 대한 특별한 언급이 없으며 일반적인 선택 상자입니다.

텍스트 입력을 클릭하면 화면 오른쪽에 있는 속성 화면에 각 속성의 설정 막대가 표시됩니다.
placeholder 속성에 미리 クリックで日付を選択을 입력합니다.
또한class 속성에 js-datepicker을 입력하십시오.
가져오기 날짜 선택
여기서부터는 Word Press가 아니라 주제에 JavaScript 라이브러리를 설치하는 작업입니다.
하면, 만약, 만약...
웹 패키지 등 구축 도구를 사용할 수 있다면 새로운 라이브러리를 사용할 수 있습니다.Air Datepicker를 선택했습니다.
라이브러리에 기재된 조작에 따라.
에어-datepicker를 테마를 만드는 프로젝트에 추가합니다.

npm i air-datepicker -S

웹 팩에 설정된 JS 파일에는 에어-datepicker의 코스 클립, UI를 영어로 번역한 파일, UI용 CSS 코드를 추가합니다.
your-main.js

import AirDatepicker from 'air-datepicker';
import 'air-datepicker/air-datepicker.css';
import localeEn from 'air-datepicker/locale/en';

또한 저는 JS 파일을 구축할 때 CSS를 포함하지 않습니다. (일반적인 웹 페이지 제작자 중에는 이런 사람이 비교적 많습니다.)
이 경우 위의 import의 두 번째 줄을 삭제하고 SCSS에 CSS를 읽는 코드를 씁니다.SCSS 파일을 /src/scss/ 디렉터리에 놓으면 같은 경로를 두 층으로 써야 한다.구체적으로 다음과 같다.
your-css.scss

@import "../../node_modules/air-datepicker/air-datepicker.css";

실행 날짜에 선택한 스크립트는 다음과 같습니다.에어다트픽커는 여러 요소를 집중적으로 집행할 수 없기 때문에querySelectorAll에서 부여js-datepicker클래스의 요소를 추출한 다음forEach에서 각각 집행한다.
물론 형식에서 날짜가 하나만 선택되면 클래스를 ID로 대체할 수 있습니다.
이 프로그램 라이브러리의 UI 기본 언어는 러시아어이기 때문에locale 속성에서 영어화되어야 합니다.
달력을 클릭한 후 입력한 텍스트의 날짜 형식은dateFormt 속성으로 설정되지만, 공식 문서에 일본어 형식의 견본 코드가 설정되어 있습니다. 사용하도록 허락해 주십시오.
your-main.js

document.addEventListener('DOMContentLoaded', function() {

	// datepicker
	const dp = document.querySelectorAll('.js-datepicker');
	dp.forEach( el => {
		new AirDatepicker( el, {
			locale: localeEn,
			dateFormat(date) {
				return date.toLocaleString('ja', {
					year: 'numeric',
					day: '2-digit',
					month: 'long'
				});
			}
		});
	});

});

빌드 도구를 사용할 수 없는 경우
다음 단계에서는 작업을 확인하지 않습니다.스스로 책임지세요.
만약 구축 도구를 사용할 수 없거나 모를 경우, jQuery UI의datepicker는 나무랄 데가 없습니다.
(위에서 설명한 Air Datepicker에서 JS 파일을 단순히 삭제해도 UI를 영어화할 수 없음)
WordPress 항목에서 jQuery UI를 로드합니다.
다운로드하지 않고 사용할 수 있는 최종 버전(CDN)은 12.1이다.테마functions.php에 다음 코드를 쓰십시오.
시작 라이브러리 /js/smform.js 도 읽습니다.
functions.php

function enqueue_jqueryui_scripts() {
	wp_enqueue_style( 'custom-jqueryui-css', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css', array('jquery') );
	wp_enqueue_script( 'custom-jqueryui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js', array('jquery') );
	wp_enqueue_script( 'custom-smform', get_stylesheet_directory_uri() . '/js/smform.js', array('jquery', 'custom-jqueryui') );
}
add_action( 'wp_enqueue_scripts', 'enqueue_jqueryui_scripts', 99 );

전제는 jquery이기 때문에wpenqueue_style, wp_enqueue_script 함수의 두 번째 매개 변수jquery를 전달하면WordPress의 jquery가 먼저 읽힙니다.wp_enqueue_scripts 동작을 이미 썼으면 합쳐 주세요.
실행 날짜에 선택한 스크립트는 다음과 같습니다.
주제 내에서 상술한 /js/smform.js 파일을 제작하고 기술한다.
달력을 클릭한 후 입력한 텍스트의 날짜 형식은dateFormt 속성에서 설정됩니다.
smform.js

$(function(){
  $('.js-datepicker').datepicker({
    dateFormat: 'yy年mm月dd日'
  });
});

기타 속성은 공식 문서를 참고하세요.