이게 대체 뭐라고 데이트타임피커 하나 때문에
지난주에 3일을 날려 먹었었네요. ㅡㅡ;;
datepicker만 필요하다면 그냥 쓰던 jquery-ui꺼 갖다 쓰면 쉬운데,
우리 프로젝트는 time도 필요함..ㅠ
여기저기 예제 소스들을 복사해다가 붙여 봐도..
당최 내꺼에선 캘린더가 안나오네 ㅋㅋㅋㅋㅋ
이 프레임워크가 다른것에 비해서 사용하기가 까탈스런 조건들이 많더군요.
내가 썼던것들은 부트스트랩 3, 4용을 갖다 쓰면서 삽질..
그러니 소스가 안돌아가면 가장먼저 파악할것은 본인의 부트스트랩 버전입니다.
그리고 제가 사용한 Tempus Dominus는 6.0베타버전입니다.
자 이다음부터는 복붙과 약간의 설명을 따라 오시면 됩니다..
1. cdn 갖다붙이기
<head>
<!— Popperjs —>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.2/dist/umd/popper.min.js"
crossorigin="anonymous"></script>
<!— Tempus Dominus JavaScript —>
<script src="https://cdn.jsdelivr.net/gh/Eonasdan/tempus-dominus@master/dist/js/tempus-dominus.js"
crossorigin="anonymous"></script>
<!— Tempus Dominus Styles —>
<link href="https://cdn.jsdelivr.net/gh/Eonasdan/tempus-dominus@master/dist/css/tempus-dominus.css"
rel="stylesheet" crossorigin="anonymous">
</head>(권장사항)위 cdn이 잘 돌아가는걸 확인하셨다면 그대로 놔두기 보다는,
주소를 그대로 복사해서 웹브라우저에 입력하셔서
해당 소스코드를 복사해다가 자신의 프로젝트 폴더에 직접 가져와서 적용해줍니다.
2. html 붙이기
<div
class='input-group'
id='datetimepicker1'
data-td-target-input='nearest'
data-td-target-toggle='nearest'
>
<input
id='datetimepicker1Input'
type='text'
class='form-control'
data-td-target='#datetimepicker1'
/>
<span
class='input-group-text'
data-td-target='#datetimepicker1'
data-td-toggle='datetimepicker'
>
<span class='fa-solid fa-calendar'></span>
</span>
</div>여기서 여러분들이 바꿔서 쓸수 있는 부분은
div의 id='datetimepicker1', input의 id='datetimepicker1Input' 입니다.
data-td-target의 nearest, data-td-toggle의 datetimepicker는 프레임워크 내부의 약속이지
유저가 커스터마이징 하는 부분이 아니므로 건들지 맙시다.
그리고 확실한진 잘 모르겠는데 id도 의존성을 띄는듯 합니다.
가능한한, datetimepicker +n / datetimepicker +n+ Input 의 양식을 벗어나지 않는걸 권장합니다.
3. Javascript 적용하기
new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'), {
display: {
components: {
seconds: false,
useTwentyfourHour: false,
},
icons: {
type: 'icons',
time: 'fa fa-solid fa-clock',
date: 'fa fa-solid fa-calendar',
up: 'fa fa-solid fa-arrow-up',
down: 'fa fa-solid fa-arrow-down',
previous: 'fa fa-solid fa-chevron-left',
next: 'fa fa-solid fa-chevron-right',
today: 'fa fa-solid fa-calendar-check',
clear: 'fa fa-solid fa-trash',
close: 'fas fa-solid fa-xmark'
},
},
});여기까지 하시면 일단 공식웹사이트에서 필요로 하는 도구들은 다 가져다 썼습니다.
본래 자바스크립트 예제의 아이콘은 제가 코드를 덮어씌운건데요,(fa부분)
처음 이대로 구동하면 아이콘 다 X모양으로 깨져서 나옵니다.
그리고 2번의 html코드에 class가 fa-solid라고 써져있는 부분이 있는데요,
fa fa-solid로 바꿔주세요. fontawesome을 쓰기위해선 fa class를 꼭 같이 써야 합니다.
문제는... fontawesome이 없다는거..ㅋ
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
rel="stylesheet">아까 cdn붙였던 head안에다가 요것도 추가해 줘야 합니다.
그러면 아마도 기본적인 심플datetimepicker는 완성이 됩니다.
-여담..
아직까지는 프로그램 자체의 완성도가 떨어집니다 -_-;;
공식문서에 나와있는 옵션들을 추가하면 undefined가 되어버리는 등..
24hours옵션을 써야 ISO8601방식으로 저장할수 있는데 고것도 에러 투성이 ㅠㅠ
(3일뒤인 현재 24hours버그는 해결됨. 개발은 활발히 진행 중..)
이전 버전에서는 moment.js도 의존해서 사용하던데..
jquery, moment, fontawesome, bootstrap, popper..
벌써 의존하는 프레임워크가 너무 많기 때문에.. 각자 버전도 잘 맞춰 줘야 합니다.
하지만 부트스트랩5를 선택해 플젝을 진행하셨다면
부트스트랩5버전 을 엎기엔 변수가 너무 많아지기도 하고,
time을 date와 함께 써야 한다면 별다른 대안이 없습니다..
아래는 공식문서 사이트입니다.
구글에 Tempus-dominus라고 검색하시면 됩니다.
좌측상단에서 버전을 선택할수 있지만 부트스트랩5에서는 6버전이 베타더라도 쓸수밖에 없네요.ㅠ
'개발관련' 카테고리의 다른 글
| Error: listen EACCES: permission denied 0.0.0.0:80 정리 (0) | 2022.06.01 |
|---|---|
| mongodb admin/db별 계정설정 (0) | 2022.05.13 |
| rest API 무식하게 따라하기(node&express, mongodb 활용 구현) (0) | 2021.11.13 |
| C언어 이진탐색 알고리즘 (0) | 2021.06.17 |
| mac vim image not found 에러 (0) | 2021.06.16 |
댓글