datepicker 는 쉽게 말해 날짜를 선택할때 사용하는 UI 라이브러리다.
흔히 JQuery UI 를 사용을 한다.
흔히 사용하는 JQuery UI 는 디자인이 너무 별로이다.
그래서 다시 css를 커스텀 해줘야하는 번거러움이 있다.
사이트로 이동하면 datepicker 의 샘플들을 볼 수 있다.
JQuery UI 보다는 깔끔한 편이여서 커스텀 없이도 그냥 쓰기에도 괜찮다.
Github 사이트로 이동하여 readme 를 보면 시작 방법이 써있다.
npm 을 이용해서 설치할 수도 있다.
npm install @chenfengyuan/datepicker
파일을 다운로드 받은 후 include 해서 사용해도 된다.
<script src="/path/to/jquery.js"></script><!-- jQuery is required --> <link href="/path/to/datepicker.css" rel="stylesheet"> <script src="/path/to/datepicker.js"></script>
path/to 는 자신의 경로에 맞게 수정해서 추가해준다.
이후 datepicker로 만들 input을 만들어준다.
<input type="text" id="startDate">
스크립트 단에 datepicker 가 생성되게 해주었고 setDate를 통해 현재 날짜가 들어가도록 설정하였다.
$(document).ready(()=>{ $('#startDate').datepicker(); // 생성 $('#startDate').datepicker('setDate', new Date()); // 초기값 세팅 })
여러가지 옵션들이 많으니 사이트에서 보고 사용해보면 된다.
경주시티투어 이번 여행에 앞서 뚜벅이 여행객들에게 추천하는게 바로 경주시티투어 이다. 경주시티투어 사이트로이동 경주시티투어는 여러가지가 있다.1.…
열린데이터 광장 공공데이터 사이트로 이동 서울 열린데이터 광장에서는 서울에 관한 여러가지 공공 API 를 제공한다.그…
Props props 는 쉽게 생각해서 부모가 자식에게 주는 데이터이다.먼저 부모에게 물려받을 데이터를 자식 컴포넌트에 정의한다.…
유틸 사이트로 이동 웹사이트 개설 나의 블로그의 접속자 수는 처참하지만 내가 블로그를 시작하면서생각했던 계획은 내…
과정 시작하기에 앞서 과정부터 설명해드리겠습니다.master branch에 push 가 되면 GitHub Actions 에서소스를 build 를 하고…