[jQuery-UI] datepicker 예제(생성, 초기화, 한글)

필수요소

 - UI : https://code.jquery.com/ui/

 - API : https://plugins.jquery.com/ui.datepicker/

 - 라이센스(MIT) : https://jquery.org/license/

 년월일 (YYYY-MM-DD)

 년월(YYYY-MM)

※ jQuery - UI 테마를 다운로드하면 디자인도 변경이 가능합니다

// 일반주입(생성)

$("아이디 또는 CLASS").datepicker();

// 년월일주입

var cal_yyyymmdd = {

dateFormat: 'yy-mm-dd',

    prevText: '이전 달',

    nextText: '다음 달',

    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: ['일','월','화','수','목','금','토'],

    showMonthAfterYear: true,

    changeMonth: true,

    changeYear: true,

    onSelect: function (dateText, inst) {

    },

    onClose: function(dateText, inst) {

    }

};

$("아이디 또는 CLASS").datepicker(cal_yyyymmdd);

// 년월

// 년월

var cal_mmdd = {

    closeText: '선택',

    prevText: '이전달',

    nextText: '다음달',

    currentText: '오늘',

    monthNames: ['1월(JAN)', '2월(FEB)', '3월(MAR)', '4월(APR)', '5월(MAY)', '6월(JUN)',

        '7월(JUL)', '8월(AUG)', '9월(SEP)', '10월(OCT)', '11월(NOV)', '12월(DEC)'

    ],

    monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월',

        '7월', '8월', '9월', '10월', '11월', '12월'

    ],

    dayNames: ['일', '월', '화', '수', '목', '금', '토'],

    dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],

    dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],

    weekHeader: 'Wk',

    dateFormat: 'yy-mm-dd',

    firstDay: 0,

    isRTL: false,

    showMonthAfterYear: true,

    yearSuffix: '',

    // showOn: 'both',

    // buttonText: "달력",

    changeMonth: true,

    changeYear: true,

    showButtonPanel: true,

    yearRange: 'c-99:c+99',

    onClose: function(dateText, inst) {

        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();

        var month = Number($("#ui-datepicker-div .ui-datepicker-month :selected").val()) + 1 + "";

        $(this).val(year + "-" + (month.length == 1 ? "0" + month : month));

    },

    beforeShow: function() {}

};

$("아이디 또는 CLASS").datepicker(cal_mmdd);

// 초기화 : destroy (복합사용시)

$("아이디 또는 CLASS").datepicker("destroy");

PS. 나머지도 있지만 딱히 쓸일이 있을 까 싶네요 추가적으로 사용 하게 될 경우 기입!