[HTML] 날짜 입력 항목에 현재 시간을 기본값으로 세팅하기

날짜 시간 입력 항목에 기본값으로 현재 날짜, 시간을 지정하는 방법을 알아보도록 하겠습니다.

날짜 입력 항목에  현재 시간을 기본값으로 세팅하기

지난번에는 HTML의 <input> 태그를 이용하여

날짜, 시간, 년도 등 시간 관련 정보를 입력 받는 방법을 알아보았습니다.

그리고 이 항목들에 기본값을 지정하는 방법도 알아보았습니다.

[IT/HTML] - [HTML] 날짜, 시간, 년도 입력받기

[IT/HTML] - [HTML] 날짜, 시간 입력 항목 기본값으로 세팅하기

이번에는 이 <input> 태그의 기본값으로 현재 날짜, 시간을 지정하는 방법을 알아보도록 하겠습니다.

현재 일자, 시간을 default값으로 지정하기 위해서는

Javascript를 사용해야 합니다.

month 타입에 현재월 세팅하기

See the Pen 20181201 by anna (@hianna) on CodePen.

document.getElementById('input 태그의 ID').value 라는 구문을 이용해서 선택한 input 항목에 값을 지정해 줍니다.

document.getElementById를 사용하면 html의 ID로 dom객체에 접근할 수 있습니다.

이 때, 현재 일자는 javascript의 Date라는 javascript를 사용하여 가져옵니다.

new Date()로 클래스로 객체를 생성하면, 현재 시간을 가진 객체를 리턴합니다.

이 객체의 toISOString() 메소드를 호출하여 현재일자를 ISO Standard 형식으로 변환합니다.

ISO Standard 형식은 시간을 'yyyy-MM-ddThh:mm:ss.sssZ'로 표현합니다.

month 타입의 경우 값을 'yyyy-MM' 포맷으로 입력 받는것을 지난 포스팅에서 알아보았습니다.

[IT/HTML] - [HTML] 날짜, 시간 입력 항목 기본값으로 세팅하기

그렇다면 ISO Standard 포맷으로 받아온 날짜를 'yyyy-MM' 포맷에 맞춰주어야 합니다.

그래서 slice() 메소드를 이용하여 toISOString() 메소드로 받아온 현재 날짜 문자열의 7자리(앞에서부터)를 잘라옵니다.

slice(0, 7)에서 0과 7은 각각 시작과 끝(미포함) 인덱스를 가리킵니다.

0번째 인덱스에서 7번째 인덱스 이전까지 문자열을 잘라오라는 것입니다.

이렇게 문자열을 자르면 'YYYY-MM'형식의 문자열을 잘라오게 되고,

이 값을 value값에 넣어주면 됩니다.

date 타입에 현재 일자 세팅하기

See the Pen 20181201 by anna (@hianna) on CodePen.

date 타입의 경우 'yyyy-MM-dd' 포맷의 입력값을 받습니다.

그러므로, 여기서는 위의 예제와 같이 0부터 10이전의 인덱스값을 잘라서,

value에 값을 넣어주면 됩니다.

time 타입에 현재 시간 세팅하기

See the Pen 20181201 by anna (@hianna) on CodePen.

time 타입은 'hh:mm' 포맷의 입력값을 받습니다.

그러므로, 여기서는 11번째 인덱스에서 16이전의 인덱스까지의 값을 잘라서

value에 값을 넣어주었습니다.

datetime-local 타입에 현재 날짜, 시간 세팅하기

See the Pen 20181201 by anna (@hianna) on CodePen.

datetime-local 타입은 'yyyy-MM-ddThh:mm' 포맷의 입력을 받습니다.

여기서는 toISOString()에서 리턴하는 'yyyy-MM-ddThh:mm:ss.sssZ'의 마지막 'Z'값을 제외하고 나머지 값을 잘라서

value값에 넣어주었습니다.

그러면 여기서는 '초' 단위까지 표시 되는데,

'분' 단위까지만 보여주고 싶으면 slice(0, 16) 을 해주면 됩니다.

날짜, 시간 입력 항목에 현재 시간을 세팅하는 방법을 알아보았습니다.