캘린더 기능
일단 부트스트랩 ( https://getbootstrap.kr/ )을 이용해 캘린더를 만들어 볼 수 있지만 나는 daterangepicker라는 라이브러리를 이용했다.
(참고문서 - https://www.daterangepicker.com/ )
작동 하게 되면 이렇게 되며 확실히 좀 더 이쁜 편이다. 다만 외국 개발자가 만든 라이브러리여서 한국어 패치를 하나하나 해줘야 한다.
사용하기전 라이브러리를 집어 넣어야 하는데
<!--달력-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>이 라이브러리를 임포트 하자!
내가 사용한 코드<body>
<input id="calender" class="calender" type="text" name="datefilter" autocomplete="off"/>여기서 autocomplete="off"는 자동완성을 끄는 기능이고 실제로 달력을 입력하는데 자동완성이 나와 날짜를 가리길레 찾아서 적용시켰다.
<javascript>에는 아래 코드를 이용했다.
function calender_select() {
$(function () {
$('#calender').daterangepicker({ //한글로 번역
"locale": {
"format": "YYYY-MM-DD",
"separator": " ~ ",
"fromLabel": "From",
"toLabel": "To",
"customRangeLabel": "Custom",
"weekLabel": "W",
"daysOfWeek": ["월", "화", "수", "목", "금", "토", "일"],
"monthNames": ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
"firstDay": 1,
},
autoUpdateInput: false, // 기본 창에 자동 업데이트
autoApply: true, // 확인 버튼 누르지 않아도 선택 완료되면 자동 창 닫힘
"drops": "down",//창을 아래로 열것
}, function (start, end, label) { // 시작과 끝 라벨을 이용해 표시
});
});input값 제어하기
가격부분을 쓰기 위해 숫자만 제어하고 , 를 사용해 얼마인지 적게 해야 했는데 아래 코드를 이용했다.
<input id="price" class="input is-normal" type="text" onchange="price(this)"
placeholder="가격(1일 기준 대여가격)" style="width: 350px" maxlength="15">bulma를 이용해 CSS처리를 해줬고 onchange() 함수를 이용해 입력값이 변할 때마다 실행하도록 맞춰보았다.
여기서 this는 value값이다.
function price(t) {
// 콤마 빼고
var x = t.value
x = x.replace(/,/gi, '');
// 숫자 정규식 확인
var regexp = /^[0-9]*$/;
if (!regexp.test(x)) {
$(t).val("");
$("#price_warning").removeClass("is-hidden")
} else {
x = x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
$(t).val(x);
$("#price_warning").addClass("is-hidden")
}
}구글링을 이용한 코드로 받은 숫자를 정규식으로 확인해 숫자만 적을 수 있게 제한 하였고 bulma CSS를 이용해 경고 메세지와 함께 input값 초기화를 넣었다.
if else
이 부분은 그 전에도 많이 다뤄 왔으니 간단하게 하자면 내가 사용한 코드는
if (title == "") {
alert("제목,물품명을 입력해주세요")
} else if (date == "") {
alert("대여 기간을 입력해주세요")
} else if (price == "") {
alert("가격을 입력해주세요")
} else if (file == undefined) {
alert("제품 사진을 첨부해주세요")
} else if (file.name.split('.').reverse()[0].indexOf("jpg", "png", "jpeg") == -1) {
alert("jpg,png,jpeg 이미지 파일만 첨부 가능합니다.")
} else if (content == "") {
alert("내용을 적어주세요")
} else if (address == "") {
alert("주소를 입력해주세요")
} else {이렇게 계속해서 if에 else if를 집어 넣어 모든 조건들이 만족 되었을 때 기능이 정상 작동하도록 했다.
이미지 미리보기
이부분은 아직 잘 모르겠어서 코드부터 일단 넣어보자면 <body> 태그는
{#이미지 업로드 부분#}
<div id="file-js-example" class="file has-name is-info">
<label class="file-label " style="margin-top: 10px">
<input class="file-input" type="file" name="resume" id="img" onclick="img_up()"
accept="image/jpeg, image/jpg, image/png"/>
<span class="file-cta">
<span class="file-label">제품 사진</span>
</span>
<span class="file-name"></span>
</label>
</div>
{#이미지 미리보기#}
<div id="image_preview" class="is-hidden">
<img style="width:300px;height: 200px">이렇게 집어 넣었다. bulma를 이용한 파일 업로드 html이며 파일 명을 미리보기 위해
//파일 업로드 시 제목 띄우기
function fileupload() {
const fileInput = document.querySelector('#file-js-example input[type=file]');
fileInput.onchange = () => {
if (fileInput.files.length > 0) {
const fileName = document.querySelector('#file-js-example .file-name');
fileName.textContent = fileInput.files[0].name;
}
}
}이런 코드를 붙여 넣었다. html과 스크립트 둘다 bulma기본 제공 코드이다.
이후 파일 이미지를 미리보기 위해 구글링을 하다 발견한 코드를 사용했는데
function img_up() {
$('#img').on('change', function () {
ext = $(this).val().split('.').pop().toLowerCase(); //확장자
//배열에 추출한 확장자가 존재하는지 체크
if ($.inArray(ext, [ 'png', 'jpg', 'jpeg']) == -1) {
alert("jpg,jpeg,png 이미지만 사용 가능합니다.")
const fileName = document.querySelector('#file-js-example .file-name');
fileName.textContent = "";//스팬 값 초기화
$("#image_preview").toggleClass("is-hidden")
} else {
file = $('#img').prop("files")[0];
blobURL = window.URL.createObjectURL(file);
$('#image_preview img').attr('src', blobURL);
$('#image_preview').slideDown(); //업로드한 이미지 미리보기
$(this).slideUp(); //파일 양식 감춤
$("#image_preview").removeClass("is-hidden")
}
});
}코드 분석이 더 필요하지만 const 선언을 배울 수 있었다.
변수라는 것을 배워보자 ( https://www.howdy-mj.me/javascript/var-let-const/ )
전체적으로 읽어도 좋은 설명 글
반응형
'정리' 카테고리의 다른 글
| 18 TIL 정리 (s3업로드,url가져오기) (0) | 2022.05.13 |
|---|---|
| 17 TIL 정리 (로드뷰,onkeyup) (0) | 2022.05.11 |
| 15 TIL 정리 (카카오 지도api, 400에러,주소자동완성) (0) | 2022.05.10 |
| 12 TIL 정리(해시함수,JWT) (0) | 2022.05.08 |
| 14-TIL 정리(카카오지도, 2주차 타임어택구현테스트) (0) | 2022.05.06 |