// 일반주입(생성)
$("아이디 또는 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");
Pick month and year with this jQuery plugin. The plugin accepts a few options: 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. 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> Some initial styles are added in the css/jquery.monthpicker.css file. You can change them as you please. Run tests at test folder with QUnit. jQuery.monthpicker is
licensed under the terms of the MIT License.jQuery.monthpicker
Usage
Styles
Tests
Licence