2017. 2. 14.

[JavaScript] jquery datepicker, datetimepicker

1. datepicker
: JQuery에서 기본으로 제공하는 달력 UI이다. 보통 달력설정은 공통으로 참조하는 js에 선언하고, 실행할 페이지에서는 아래와 같이 이벤트를 걸어주었다.

This is calendar UI that is JQuery's basic library. I set some default configuration of calendar on js which refers every pages, and event like this :

1
2
3
4
5
6
7
$("#dateInputField").datepicker(datepickerCfg).on("change", function(e) {
    var params = {'nowDate' : $("#dateInputField").val().split("-").join("")}
});
$("#dateBtn").click(function() {
    $("#dateBtn").datepicker("show");
});
cs


이때 datepickerCfg는 아래와 같다.
datepickerCfg is like this :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var datepickerCfg = {
    beforeShow:function(input) {
        $(input).css({
            "position": "relative",
        });
    },
    inline : true,
    dateFormat : "yy-mm-dd",
    prevText : 'prev',
    nextText : 'next',
    changeMonth : true,
    changeYear : true,
    showOtherMonths : true,
    selectOtherMonths : true,
    minDate : '-30y',
    closeText : '닫기',
    currentText : '오늘',
    showMonthAfterYear : true,
    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 : [ '일', '월', '화', '수', '목', '금', '토' ],
    showAnim : 'slideDown'
};
cs


beforeShow 
달력이 뜨기 전에 실행할 함수를 정의했다.
A function that takes an input field and current datepicker instance and returns an options object to update the datepicker with. It is called just before the datepicker is displayed.

dateFormat 
날짜의 형식을 지정할 수 있으며, 디폴트는 yy/mm/dd 이다.
Format a date into a string value with a specified format.
The format can be combinations of the following:
  • d - day of month (no leading zero)
  • dd - day of month (two digit)
  • o - day of the year (no leading zeros)
  • oo - day of the year (three digit)
  • D - day name short
  • DD - day name long
  • m - month of year (no leading zero)
  • mm - month of year (two digit)
  • M - month name short
  • MM - month name long
  • y - year (two digit)
  • yy - year (four digit)
  • @ - Unix timestamp (ms since 01/01/1970)
  • ! - Windows ticks (100ns since 01/01/0001)
  • '...' - literal text
  • '' - single quote
  • anything else - literal text
There are also a number of predefined standard date formats available from $.datepicker:
  • ATOM - 'yy-mm-dd' (Same as RFC 3339/ISO 8601)
  • COOKIE - 'D, dd M yy'
  • ISO_8601 - 'yy-mm-dd'
  • RFC_822 - 'D, d M y' (See RFC 822)
  • RFC_850 - 'DD, dd-M-y' (See RFC 850)
  • RFC_1036 - 'D, d M y' (See RFC 1036)
  • RFC_1123 - 'D, d M yy' (See RFC 1123)
  • RFC_2822 - 'D, d M yy' (See RFC 2822)
  • RSS - 'D, d M y' (Same as RFC 822)
  • TICKS - '!'
  • TIMESTAMP - '@'
  • W3C - 'yy-mm-dd' (Same as ISO 8601)
minDate
달력에서 선택할 수 있는 최소한의 날짜다. '-30y'는 30년 전까지라는 의미.
The minimum selectable date. When set to null, there is no minimum.
Multiple types supported:
  • Date: A date object containing the minimum date.
  • Number: A number of days from today. For example 2 represents two days from today and -1 represents yesterday.
  • String: A string in the format defined by the dateFormat option, or a relative date. Relative dates must contain value and period pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.
* datepicker의 언어변경은 utility function을 이용해 아래와 같이 할 수 있다.
$.datepicker.setDefaults($.datepicker.regional["kr"]);



2. datetimepicker

: xdsoft에서 제공하는 시간까지 표시되는 달력 UI이다. 나는 시간부분을 떼고 달력으로만 이용했다. UI의 색을 바꾸고 스크롤바로 날짜를 이동하는 등 지원하는 기능이 많다. 아래와 같이 사용한다.

This is xdsoft's jquery calendar that supports date with time. I used this without time. it supports many functions such as changing UI ag-color or selecting date with scroll bar. it can be used like this :

1
2
$('#searchEndDate').datetimepicker({format : 'Y-m-d', timepicker : false});
$.datetimepicker.setLocale('kr');
cs

 format
날짜 포맷을 설정할 수 있는데, jquery datepicker와 형식은 같다.
very similar to jquery datepicker.

timepicker
시간 부분을 뗄지 말지 설정한다.
setting UI with time field or without.

* datetimepicker는 아레 공식문서에 엄청 자세히 나와있으므로 보자.
http://xdsoft.net/jqplugins/datetimepicker/

시간:
라벨:

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)