본문으로 건너뛰기

"javascript" 태그로 연결된 113개 게시물개의 게시물이 있습니다.

Any application that can be written in JavaScript, will eventually be written in JavaScript

모든 태그 보기

jQuery DateTimePicker와 Moment JS의 연동

· 약 1분
Eunkwang Shin
Eunkwang Shin
Owner

Datetimepicker JS with Moment JS​

개발을 하다보면 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 사용법 - 브라우저 텍스트 복사

· 약 1분
Eunkwang Shin
Eunkwang Shin
Owner

Clipboard JS​

텍스트 복사는 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

· 약 1분
Eunkwang Shin
Eunkwang Shin
Owner

다음 주소검색 API​

소스​

/**
 * [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 를 입맛에 맞게 조금 변경했다.