JQuery monthpicker 예제 - jQuery monthpicker yeje

// 일반주입(생성)

$("아이디 또는 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");

jQuery.monthpicker

Pick month and year with this jQuery plugin.

Usage

The plugin accepts a few options:

years array of years to select from
topOffset distance in pixels from the element offset
onMonthSelect event triggered when selecting a month

Example:

$('#monthpicker').monthpicker({
    years:          [2015, 2014, 2013, 2012, 2011],
    topOffset:      6,
    onMonthSelect:  function(m, y) {
      console.log('Month: ' + m + ', year: ' + y);
    }
});

See more at examples folder.

Styles

The HTML generated for the popup is shown below:

<div class="monthpicker">
  <div class="years">
    <select>
      <option>2015</option>
      <option>2014</option>
      <option>2013</option>
      <option>2012</option>
      <option>2011</option>
    </select>
  </div>
  <table>
    <tr>
      <td><button data-value="0">January</button></td>
      <td><button data-value="1">February</button></td>
      <td><button data-value="2">March</button></td>
      <td><button data-value="3">April</button></td>
    </tr>
    <tr>
      <td><button data-value="4">May</button></td>
      <td><button data-value="5">June</button></td>
      <td><button data-value="6">July</button></td>
      <td><button data-value="7">August</button></td>
    </tr>
    <tr>
      <td><button data-value="8">September</button></td>
      <td><button data-value="9">October</button></td>
      <td><button data-value="10">November</button></td>
      <td><button data-value="11">December</button></td>
    </tr>
  </table>
</div>