봄날은 갔다. 이제 그 정신으로 공부하자

node.js로 웹서비스 만들기 (11. DatePicker 사용하기) 본문

학습

node.js로 웹서비스 만들기 (11. DatePicker 사용하기)

길재의 그 정신으로 공부하자 2023. 7. 21. 11:11

이번 글은 날짜를 보여주고 선택하는 DatePicker에 대해 적어보려고 합니다.

이것도 쉽지가 않네요...

한참을 낑낑대다 겨우 해결하고 잊어버리지 않게 이렇게 글로 기록합니다. ㅠ_ㅠ

 

date picker 한글 지원 js 파일 추가

date picker는 한글을 지원하지 않기 때문에 한글을 지원하기 위해 프로젝트의 public 폴더에 js 폴더를 생성하고 bootstrap-datapicker.kr.js 파일을 생성하고 아래와 같이 작성합니다.

;(function($){
   $.fn.datepicker.dates['kr'] = {
      days: ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일", "일요일"],
      daysShort: ["일", "월", "화", "수", "목", "금", "토", "일"],
      daysMin: ["일", "월", "화", "수", "목", "금", "토", "일"],
      months: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
      monthsShort: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"]
   };
}(jQuery));

 

ejs에 date picker 관련 정보 추가

우선 create_date.ejs 파일의 헤더에 아래와 같이 date picker 관련 링크와 스크립트를 추가합니다.

이때 방금 전 추가한 스크립트도 아래와 같이 추가해 줍니다.

  <script src="/js/bootstrap-datepicker.kr.js" charset="UTF-8"></script>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="//code.jquery.com/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.min.css">
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
    <script src="/js/bootstrap-datepicker.kr.js" charset="UTF-8"></script>
    <title>날짜별 퀴즈 등록하기</title>
  </head>

 

body에 date picker를 사용할 <input> 태그를 아래와 같이 작성해줍니다.

<div class="input-group date mt-2">
    <span class="input-group-text" style="width: 90px">노출 날짜</span>
    <input type="text" id="datePicker" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>

 

마지막으로 <input> 태그 선택 시 date picker가 보여지고 날짜 선택 시 다시 <input> 태그에 값이 반영되도록 아래와 같이 jQuery 코드를 작성합니다.

<script>
    $(function(){
        $('.input-group.date').datepicker({
            calendarWeeks: false, // 캘린더 옆에 몇 주차인지 보여주는 옵션 기본값 false 보여주려면 true
            todayHighlight: true, //오늘 날짜에 하이라이팅 기능 기본값 :false
            autoclose: true, // 날짜 선택 시 자동 닫힘
            startDate: '-10d', //오늘 기준으로 캘린더에서 선택 할 수 있는 이전 날짜. 이전으로는 선택 불가능 ( d : 일 m : 달 y : 년 w : 주)
            endDate: '+30d', //오늘 기준으로 캘린더에서 선택 할 수 있는 이후 날짜. 이후로 선택 불가 ( d : 일 m : 달 y : 년 w : 주)
            format: "yyyy-mm-dd", // 내보내는 데이터 포맷 형식
            language: "kr" //캘린더 언어 선택, 그에 맞는 js로 교체해야 함.
        }).on('changeDate', function (e) {
            // 사용자기 캘린더의 날짜를 선택했을 때 호출되는 이벤트로 필요한 경우, 여기에 코드 추가
            ...
        });
</script>

 

저는 우선 이렇게만 추가했는데 date picker에는 이거 외에 더욱 다양한 옵션이 존재합니다.

자세한 정보는 아래 링크를 참고해주세요.

https://programmer93.tistory.com/5

 

이렇게 작성 후 실행하면 아래와 같이 보여집니다.

클릭 시 date picker가 잘 보여지는 것을 확인할 수 있습니다.

 

'학습' 카테고리의 다른 글

node.js로 웹서비스 만들기 (13. localStorage)  (0) 2023.07.27
node.js로 웹서비스 만들기 (12. 부트스트랩 pagination)  (0) 2023.07.24
node.js로 웹서비스 만들기 (10. Table row 동적 추가, 삭제, 순서 변경하기)  (0) 2023.07.18
node.js로 웹서비스 만들기 (9. ejs에서 node.js로 데이터 전달)  (0) 2023.07.15
node.js로 웹서비스 만들기 (7. 로컬 경로에 있는 이미지 보여주기)  (0) 2023.07.09
'학습' Related Articles more
Comments