datePicker를 사용해 날짜 변경 시 이벤트를 적용해보자.

input date를 활용해 form을 사용하면 submit버튼을 동반하여 서버에 전송해야한다.

이는 웹을 사용하는 사용자의 사용성 측면에서 한 가지 일을 더 해야해 불편함을 초래할 수 있다.

 

대부분의 사용자들은 날짜를 선택하면 바로 그 날짜에 대한 데이터가 송출되길 바랄 것이다.

 

<form action="/todo/getDate" method="get" name="getDate">
   <input type="text" id="datepicker" name="date" value="<%= currentDate %>"/>
</form>

form인데 submit 버튼이 없다. 날짜를 선택할건데 어떻게 제출 할 수 있을까?

 

자바스크립트에는 좋은 메소드가 존재한다.

 

$(function () {
  $('#datepicker').datepicker({
    dateFormat: 'yy-mm-dd',
    onSelect: function () {
      document.getDate.submit();
    },
  });
});

datepicker에서 onSelect를 적용해 바로 document.(form name).submit(); 을 해주면 우리가 원하는 대로 작동하는 걸 알 수 있다.