[php] datepicker 사용하기

이전에 리액트에서 해당 기능을 사용한 적이 있는데, 그당시는 너무 어려웠으나 지금은 너무 쉽다.

https://kasumil.tistory.com/67?category=875765 

[위코드] TIL(Today I am Learned) -31(기업협업)(DatePicker 완성)

특히나 jquery용 라이브러리라 자료도 많고 너무 편리하다.

이걸 리액트로 만들다보니 엄청 고생했던 기억이.. ㄟ( ▔, ▔ )ㄏ

다만, 단점으로는 cdn이 잘 안먹혀서 ui css가 안불러와진 문제가 있었다.

 

cdn

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

$(function(){
  $.datepicker.setDefaults({
    showOtherMonths: false, //빈 공간에 현재월의 앞뒤월의 날짜를 표시
    showMonthAfterYear:true, // 월- 년 순서가아닌 년도 - 월 순서
    changeYear: true, //option값 년 선택 가능
    changeMonth: true, //option값  월 선택 가능                
    showOn: "both", //,button:버튼을 표시하고,버튼을 눌러야만 달력 표시 ^ both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시  
    buttonText: "선택", //버튼 호버 텍스트              
    yearSuffix: "년", //달력의 년도 부분 뒤 텍스트
    monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'], //달력의 월 부분 텍스트
    monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'], //달력의 월 부분 Tooltip
    dayNamesMin: ['일','월','화','수','목','금','토'], //달력의 요일 텍스트
    dayNames: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'], //달력의 요일 Tooltip
    minDate: "-5Y", //최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)
    maxDate: "-1D", //최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후) 
  });
})

$("#datepicker").datepicker({ dateFormat: 'yy-mm-dd' });

원래는 dateFormat이 디폴트 세팅에 있어야 하는데, 이상하게 yyyy-mm-dd로 나와야 하는데, mm/dd/yyyy로 출력되서 따로 빼놨다.

 

<form action="특정파일.php" method="post">
  검색 일자 : <input id='datepicker' text='text' name='datepicker' value='<?php echo $date; ?>' style="width: 100px;" />
  <button class="dateSearch">검색</button>
</form>

 

세부 디테일 설정은 이걸로 보면 된다.

https://beautifulhill.tistory.com/12

jQuery 달력 위젯 datepicker 사용하기