본문으로 건너뛰기

jQuery DateTimePicker와 Moment JS의 연동

· 약 2분

개발을 하다보면 datetime 이 같이 필요한 경우가 생긴다. pickadate 를 사용해 date 와 time picker 를 모두 사용해 만들 수도 있지만 datetimepicker가 편하고 쉽다.

설치

# datetimepicker
$ bower install https://github.com/xdan/datetimepicker.git --save
# moment
$ bower install moment --save

예제

<link
rel="stylesheet"
type="text/css"
href="/bower_components/datetimepicker/build/jquery.datetimepicker.min.css"
/>
<!-- php.date.formatter.js 와 jquery.mousewheeel.js 를 포함하는 full.js-->
<!-- moment는 이미 선언되어있다고 가정합니다 -->
<script src="/bower_components/datetimepicker/build/jquery.datetimepicker.full.min.js"></script>

<script>
// dateTimePicker localization
$.datetimepicker.setLocale("ko");
// dateTimePicker moment.js와 연동
$.datetimepicker.setDateFormatter({
parseDate: function (date, format) {
var d = moment(date, format);
return d.isValid() ? d.toDate() : false;
},

formatDate: function (date, format) {
return moment(date).format(format);
},
});

$(function () {
// datetimepicker init
$(".datetimepicker").datetimepicker({
format: "YYYY-MM-DD HH:mm:ss",
formatTime: "HH:mm",
formatDate: "YYYY-MM-DD",
});
});
</script>

<input type="text" name="startDate" class="datetimepicker" /> ~
<input type="text" name="endDate" class="datetimepicker" />

여담

pickadate 에서 datetime 을 같이 지원해주는 모듈도 만들어주면 얼마나 좋을까?

Clipboard JS 사용법 - 브라우저 텍스트 복사

· 약 2분

텍스트 복사는 zeroclipboard 를 사용하라고 많이 나오는데, flash 를 이용해 복사하는 방법이다. 더 쉽고 간편하게 ClipboardJS 라이브러리를 사용해보자

설치

# npm
$ npm install clipboard --save

$ yarn add clipboard

소스

<script src="/bower_components/clipboard/dist/clipboard.min.js"></script>

<!-- 1. URL copy -->
<a href="#" id="btnCopyUrl" data-clipboard-action="copy">url 복사</a>
<script>
$(function ({
// 복사 버튼을 만들시 data-clipboard-text 안에 복사할 문구를 넣어준다
$('#btnCopyUrl').attr('data-clipboard-text', document.location.href);
// callback 설정
var clipboard = new Clipboard('#btnCopyUrl');
clipboard.on('success', function(e) {
alert('복사되었습니다');
});
clipboard.on('error', function(e) {
console.log(e);
});
});
</script>

<!-- 2. Text copy -->
<textarea id="textBody" cols="30" rows="5"></textarea>
<button
type="button"
id="btnCopyText"
data-clipboard-action="copy"
data-clipboard-target="#textBody"
>
텍스트복사
</button>

설명

html5 attribute 를 사용해 쉽게 제어가 가능하다.

신규 브라우저들은 다 지원하지만 (window.clipboard 객체가 있는 브라우저) iPhone 에선 clipboard 액세스가 모두 막혀있어서 복사를 할 수 없다.

다음 주소 검색 API

· 약 2분

소스

/**
* [searchAddr 다음주소검색 API]
* @return {[JsonArray]} [주소데이터]
* <script src="https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js"> 선행되어야함
*/
const searchAddr = function () {
new daum.Postcode({
oncomplete: function (data) {
let fullAddr = ""; // 최종 주소 변수
let extraAddr = ""; // 조합형 주소 변수
let engAddr = "";
let zipcode = "";

// 사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === "R") {
// 사용자가 도로명 주소를 선택했을 경우
fullAddr = data.roadAddress;
zipcode = data.zonecode;
engAddr = data.roadAddressEnglish;

//법정동명이 있을 경우 추가한다.
if (data.bname !== "") {
extraAddr += data.bname;
}
// 건물명이 있을 경우 추가한다.
if (data.buildingName !== "") {
extraAddr +=
extraAddr !== "" ? ", " + data.buildingName : data.buildingName;
}
// 조합형주소의 유무에 따라 양쪽에 괄호를 추가하여 최종 주소를 만든다.
fullAddr += extraAddr !== "" ? " (" + extraAddr + ")" : "";
} else {
// 사용자가 지번 주소를 선택했을 경우(J)
fullAddr = data.jibunAddress;
zipcode = data.postcode;
engAddr = data.jibunAddressEnglish;
}

// 구버전일 경우 getElementById 로 변경
document.querySelector("#zip").value = zipcode;
document.querySelector("#address").value = fullAddr;
document.querySelector("#address_eng").value = engAddr;

document.querySelector("#address_detail").focus();
},
}).open();
};

설명

다음 주소검색 API 를 입맛에 맞게 조금 변경했다.