본문 바로가기
카테고리 없음

html5 의 date input type

by soLow 2016. 2. 18.
SMALL

image

 

인풋 타입중 date 란 타입이 있다…

과거에는 text 에 자바스크립트를 이용하여 사용하였던 적이 있었는데..

날자 선택이라던지…초기값 세팅등이 복잡하게 되어있었다..

 

하지만 html5에서는

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp">
  Birthday: <input type="date" name="bday">
  <input type="submit">
</form>

</body>
</html>

위처럼 입력하면…

image

 

자동으로 위와같은 날자폼을 만들어준다

여기에 자바스크립트로 초기 날자값을 넣어주려면~!

 

 

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();

if(dd<10) {
    dd='0'+dd
} 

if(mm<10) {
    mm='0'+mm
} 

today = mm+'/'+dd+'/'+yyyy;
위처람 짜서 함수로 넣어줘도되고~
asp 에서는..

<%
        
    FromDate = Date
    ToDate = Date

   %>

 

놀랍게도 위처럼 입력하면된다;;;

너무 간편해서 놀랬다..

그냥 변수에다 Date라고 딸랑 쓰기만하면된다…

 

 

image

 

<input type="date" name="FromDate" value ="<%=FromDate%>">
  ~
  <input type="date" name="ToDate" value ="<%=ToDate %>">

아래와같이 초기값이 세팅이 된다

image

LIST