jquery Datepicker(날짜 선택기) UI / css / 디자인
- Web
- 2019. 2. 18.
요 근래에 jQuery Datepicker 쓰게 되었는데...
보통 jquery Datepicker 쓸 때
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Datepicker - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "#datepicker" ).datepicker(); } ); </script></head><body> <p>Date: <input type="text" id="datepicker"></p> </body></html>
이런식으로 쓰면 아래와 같이 나옵니다.
(내 기준에서는 디자인이 영.. ㅋㅅㅋ..)
출처:https://jqueryui.com/datepicker/
그래서 다른 사람이 만든 jquery Datepicker UI를 쓰려고했지만
내가 원하는 대로 되지 않길래 (css 우선순위부터해서 이것 저것 등등)
그냥 마음에 든 디자인을 그대로 따라 만들었습니다.
https://www.jqueryscript.net/demo/Clean-Date-Picker-Plugin-jQuery/ <- 참고 사이트
이것을 본떴고,
일단 //code.jquery.com/ui/1.11.2/jquery-ui.js에서 css를 복사해 새로운 css파일을 만들어 붙여 넣었습니다
그리고 나서 F12(개발자모드)를 이용해 각각 선택자가 무엇인지 보고 복사해온 css안에서 수정을했고
그렇게해서 결과물은
완전히(?)까진 모르겠지만 80%이상 똑같이 수정했습니다
옆에 버튼을 눌러서 뜨게 하고픈 분들은
<script> $( function() { $( "#datepicker" ).datepicker({showOn:'button'
}); } ); </script>
이렇게 하면 옆에 css적용 안된 버튼이 뜹니다
한글로 바꾸고 싶으면 (버튼포함)
<script> $( function() { $( "#datepicker" ).datepicker({showOn:'button',
dateFormat: 'yy.mm.dd',
prevText: '이전 달',
nextText: '다음 달',
monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
dayNames: ['일','월','화','수','목','금','토'],
dayNamesShort: ['일','월','화','수','목','금','토'],
dayNamesMin: ['일','월','화','수','목','금','토'],
showMonthAfterYear: true,
yearSuffix: '년'
}); } ); </script>
이걸 복사해 Go Go
포스팅 끝