최적화 도구용 JavaScript: DateTime 선택기 추가

우리는 모두 거기에 있었습니다. 양식에 날짜를 수동으로 추가하는 답답한 작업.

자, 나는 당신에 대해 모르지만 날짜 형식을 찾을 때 내 두뇌가 과도하게 작동합니다. MM/DD/YYYY로 가십니까? 대신 YYYY-MM-DD를 원하면 어떻게 합니까? 2월은 또 몇일 남았나요?

이 블로그 게시물은 양식에 DateTime Picker 입력 필드를 추가하여 코드를 최적화하는 데 도움이 되는 몇 가지 JavaScript 기능을 안내합니다.

비즈니스 사례: 날짜/시간 선택기 추가

이 가상 시나리오에서 다음 가설에 도달합니다.

이 가설을 테스트하기 위해 아래 변경 사항을 적용합니다.

실험에 사용된 코드

이제 재미있는 부분으로 가자!

변경을 실행하기 위해 테스트 페이지에서 아래 JavaScript 코드를 실행합니다. 코드를 복사하여 직접 사용해 보세요!

 var dateInput = document.querySelector("#날짜");
지원되는 var = true;
var 테스트 = document.createElement("입력");
노력하다 {
  test.type = "날짜";
} 잡기 (e) {
  지원됨 = 거짓;
}
if (지원) {
  dateInput.setAttribute("유형", "날짜");
  dateInput.setAttribute("값", getFormattedDate(0));
  dateInput.setAttribute("최소", getFormattedDate(-1));
  dateInput.setAttribute("최대", getFormattedDate(1));
}
함수 getFormattedDate(changeYear) {
  var 오늘 = new Date();
  var dd = 문자열(오늘.getDate()).padStart(2, "0");
  var mm = 문자열(오늘.getMonth() + 1).padStart(2, "0");
  var yyyy = Today.getFullYear() + changeYear;
  formattedDate = yyyy + "-" + mm + "-" + dd;
  형식화된 날짜를 반환합니다.
}

코드 분석

1. 새로운 구문

분석은 위의 예에서 모든 새로운 구문 을 살펴보는 것으로 시작됩니다. 이 기사는 시리즈의 일부이므로 시리즈 의 다른 기사 (Convert 블로그에 게시된 이 기사 포함)에서 구문의 전체 문서를 확인하십시오.

try {} catch(오류) {}는 특정 코드를 시도하고 필요한 경우 오류를 잡는 데 사용할 수 있는 문입니다. 코드가 실행되고 오류가 발생하지 않으면 catch를 건너뜁니다.

오류를 반환하면 잡아냅니다. 스크립트는 이제 catch 본문 사이의 코드를 실행합니다. 함수의 오류를 전달하기 때문에 console.log를 사용하여 특정 문제를 찾을 수 있습니다.

일반적으로 오류가 발생하면 코드 실행이 중지됩니다. 이 명령문을 사용하면 오류가 예상될 때 스크립트를 계속할 수 있습니다.

.type은 DOM에 있는 요소의 속성 값 "유형"을 설정하는 메서드입니다.

.getDate()는 날짜 객체의 날짜를 반환하는 메서드입니다. 날짜를 숫자로 반환합니다.

.padStart(targetLength, padString) 은 문자열을 원하는 만큼 다른 문자로 채울 수 있는 방법입니다. targetLength 인수에서 문자열을 채우려는 횟수를 전달합니다. padString 인수에서 패딩으로 사용되는 문자열을 전달합니다. 패딩할 때 padString 길이를 고려합니다.

.getMonth()는 날짜 객체의 월을 숫자로 반환하는 메서드입니다. 0부터 계산하기 시작하므로 1월이 됩니다. 11번은 12월입니다.

String()은 전달된 인수를 문자열 값으로 변환하려고 시도하는 메서드입니다. 이 방법은 일반적으로 숫자를 문자열로 변환하려는 경우에 사용됩니다.

.getFullYear()는 날짜 개체의 연도를 반환하는 메서드입니다.

return은 함수로 작업할 때 일반적이고 중요한 명령문입니다. 때로는 데이터를 가져와 다른 곳에서 사용하기 위해 함수를 실행해야 합니다. 함수의 반환 상태는 함수 실행을 종료하고 명령문의 오른쪽을 반환합니다.

2. 논리

 var dateInput = document.querySelector("#날짜");

querySelector 메소드로 날짜 입력 필드를 선택하는 것으로 시작합니다. #date를 선택기로 사용하기 위해 id=”date”를 입력 필드에 추가했습니다. 새로 선언된 dateInput 변수에 요소를 할당합니다.

 지원되는 var = true;

그런 다음 지원되는 변수를 선언합니다. 새로 선언된 변수에 부울 true를 할당합니다. 브라우저가 날짜/시간 선택기를 지원하지 않는 경우 나중에 이 값을 변경할 것입니다.

 var 테스트 = document.createElement("입력");

순전히 이 유형이 지원되는지 확인하는 데 사용할 입력 필드를 만들어야 합니다. .createElement 메서드를 사용하여 이 작업을 수행합니다.

"입력"을 문자열로 전달하여 입력 요소를 만듭니다. 이 요소를 새로 선언된 테스트 변수에 저장합니다.

다음 try 문을 사용하여 변경 사항이 지원되는지 확인합니다.

 노력하다 {

try 키워드를 작성하여 시작하십시오. 중괄호로 문을 엽니다.

함수는 이 대괄호 사이의 모든 것을 시도합니다. 코드를 실행하여 오류가 발생하는지 확인합니다.

 test.type = "날짜";

날짜 유형을 테스트 입력 필드로 설정하여 날짜 유형이 지원되는지 테스트할 수 있습니다. 오류가 발생하지 않으면 브라우저에서 지원하는 것입니다.

 } 잡기 (e) {

그런 다음 닫는 괄호 뒤에 catch 문을 작성합니다. 중괄호 사이의 부분은 오류를 잡을 때 실행됩니다.

"e"를 인수로 사용하여 catch 문에서 이를 사용할 수 있습니다. 예를 들어 이를 사용하여 특정 오류를 console.log할 수 있습니다.

 지원됨 = 거짓;

오류를 잡으면 지원되는 변수를 false로 변경해야 합니다. 나중에 이 값을 사용하여 변경을 실행할지 여부를 결정합니다.

 }

그런 다음 닫는 괄호로 catch 문을 닫습니다.

 if (지원) {

if 문을 실행하기 위해 지원되는 변수의 값을 사용할 것입니다. 변수가 참이면 명령문을 실행합니다. 이런 식으로 브라우저가 지원되지 않는지 확인합니다.

 dateInput.setAttribute("유형", "날짜");

datetime 선택기를 추가하려면 date 값이 있는 속성 유형을 dateInput 변수에 추가하기만 하면 됩니다. 브라우저에 따라 이제 클릭하여 날짜를 선택할 수 있는 아이콘이 표시됩니다.

 dateInput.setAttribute("값", getFormattedDate(0));

또한 입력 필드에 기본 날짜를 추가하려고 합니다. 날짜를 문자열로 보유하는 값 속성을 추가하여 날짜 필드의 기본 날짜를 설정할 수 있습니다.

우리가 정의한 getFormattedDate 함수를 사용하여 오늘 날짜를 올바른 형식으로 가져옵니다. 이 함수는 호출할 때 인수로 숫자를 입력하여 연도를 추가하거나 제거할 수 있습니다.

 dateInput.setAttribute("최소", getFormattedDate(-1));

이런 식으로 이 줄을 사용하여 선택기의 최소 날짜를 오늘 1년 전으로 설정할 수 있습니다. 인수로 -1을 전달하여 이를 수행할 수 있습니다. 이것은 사용자가 최소 날짜 이전의 날짜를 선택하는 것을 제한합니다.

 dateInput.setAttribute("최대", getFormattedDate(1));

사용자가 선택할 수 있는 최대 금액에 대해 동일한 작업을 수행합니다. "1"을 인수로 전달하여 지금부터 1년 후의 최대 연도를 설정합니다.

 }

중괄호로 if 문을 닫습니다. 이제 이 변경 사항이 입력 필드에 표시됩니다.

우리는 여전히 if 문에서 사용되는 함수를 정의해야 합니다. 우리는 이 함수가 yyyy-mm-dd 형식으로 날짜를 반환하기를 원합니다.

 함수 getFormattedDate(changeYear) {

이 결과를 얻으려면 먼저 function 키워드를 사용하여 정의하십시오. 함수에 getFormattedDate라는 이름을 지정합니다.

반환되는 날짜의 종류를 약간 제어하려면 changeYear를 인수로 설정하십시오.

이것을 함수 본문의 키워드로 사용하여 함수가 호출될 때 전달되는 내용을 제어할 수 있습니다.

 var 오늘 = new Date();

새 날짜 개체를 만들어 이 함수 본문을 시작합니다. 새 날짜 개체가 생성되는 순간 저장되는 시간입니다. 이는 새로 선언된 오늘 변수에 새 객체를 할당할 수 있음을 의미합니다.

 var dd = 문자열(오늘.getDate()).padStart(2, "0");

getDate 메서드는 날짜의 날짜를 가져옵니다. 요일이 한 자리 숫자이면 padStart 메서드를 사용하여 숫자 앞에 0을 추가합니다.

그렇지 않으면 입력 필드에 잘못된 형식이 됩니다. 또한 나중에 숫자를 연결할 수 있도록 숫자를 문자열로 변환해야 합니다. 그렇지 않으면 프로그램에서 더하기를 사용합니다.

 var mm = 문자열(오늘.getMonth() + 1).padStart(2, "0");

여기에서 getMonth를 사용하여 오늘 날짜의 월을 가져옵니다. 반환된 숫자에 1을 추가하여 약간 수정합니다. 그런 다음 숫자가 한 자리이면 숫자를 0으로 채웠습니다. 이 방법은 월 데이터에 대한 올바른 형식을 갖도록 합니다.

 var yyyy = Today.getFullYear() + changeYear;

다음으로 getFullyear 메소드를 사용하여 오늘의 연도를 얻습니다. 함수에 전달된 숫자를 사용하여 연도를 변경합니다.

 formattedDate = yyyy + "-" + mm + "-" + dd;

그런 다음 문자열 연결을 사용하여 모든 변수를 형식이 지정된 날짜로 결합합니다.

 형식화된 날짜를 반환합니다.

함수 호출자가 사용할 수 있도록 formattedDate 변수를 반환합니다.

 }

마지막으로 중괄호로 함수를 닫고 스크립트를 종료합니다. 함수가 코드의 맨 위로 올라오기 때문에 스크립트는 이 함수를 선언하기 전에 사용할 수 있습니다. 변수도 마찬가지입니다. formattedDate 함수를 if 문 위로 이동하면 코드가 조금 더 빠르게 실행될 수 있습니다.

3. 운동

이제 전체 프로세스가 배치되었으므로 이제 시도해 볼 일만 남았습니다. 그리고 그것을 즐기는 것을 잊지 마십시오!

계속해서 입력 필드를 변경하여 min 필드에 오늘로부터 정확히 2년 후의 날짜가 포함되도록 합니다. 그런 다음 지금부터 2년 후 최대 날짜를 추가합니다. 행운을 빕니다!

알아낼 수 없습니까? LinkedIn에서 저에게 메시지를 보내주시면 도와드리겠습니다!

마지막 기사를 놓친 경우 사이트에 총 할인 섹션을 삽입하는 방법과 기타 고급 전환 최적화 기술을 확인하십시오.