Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 27 | 28 |
Tags
- 오류
- was
- mybatis
- input
- jQuery
- 정의
- controller
- Ajax
- CSS
- JVM
- json
- sql
- 과정평가형
- 태그
- eGovFramework
- eGov
- select
- javascript
- POI
- html
- Java
- jsp
- 암호화
- array
- Oracle
- 함수
- web.xml
- TO_DATE
- spring
- 개념
Archives
- Today
- Total
web developer
[js] monthpicker 기본 설정, 월 비활성화하는 방법 본문
728x90
728x90
CDN (content delivery network)
<script src="/js/jquery.mtz.monthpicker.js"></script>
monthpicker 설정하기
1. input 태그 한줄 작성
<input type="text" id="monthDate" value="">
2. 현재 시간 ; 2022년 8월
month 값을 통해서 아직 다가오지 않은 9, 10, 11, 12의 값을 fot문을 통해서 months 에 담아줍니다.
function loadMonthPicker() {
var months = [];
var dateObj = new Date();
var selectYear = dateObj.getFullYear();
var month = dateObj.getMonth() + 1;
for(var i = month; j = 0; i <= 12; i++) {
months[j++] = i;
}
$('#monthDate').monthpicker({
pattern: 'yyyy-mm' // input태그에 표시될 형식
,selectedYear: selectYear // 처음 클릭 시 표출되는 연도
,startYear: 2010 // 시작연도
,finalYear: selectYear // 마지막연도
// ,monthNames: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun',
// 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
,monthNames: ['1월', '2월', '3월', '4월', '5월', '6월',
'7월', '8월', '9월', '10월', '11월', '12월']
,openOnFocus: true // focus시에 달력이 보일지 유무
// ,disableMonths : [ ] // 월 비활성화
});
,,,
,,,
3. months에 담겨있는 9월, 10월, 11월, 12월을 비활성화 시킵니다.
/* disableMonths 설정 */
if(months.length > 0) {
$('#monthDate').monthpicker('disableMonths', months);
}
// 연도를 변경하는 경우
$('#monthDate').monthpicker().on('monthpicker-change-year', function(e, year) {
if(year == selectYear.toString()) { // 같은 연도일 경우
$('#monthDate').monthpicker('disableMonths', months);
}else {
$('#monthDate').monthpicker('disableMonths', []);
}
}
4. monthpicker 설정한 id값의 input 태그의 값을 클릭하면, 달력을 보여줍니다.
/* 버튼 클릭 시 show */
$('#btn_monthPicker').bind('click', function () {
$('#monthDate').monthpicker('show');
});
5. 달력의 월을 클릭하면, dateSetting() 함수를 불러옵니다.
* bind() : jQuery 이벤트를 다른 함수로 연결(bind)해주는 함수
/* 월 선택 시 */
$('#monthDate').monthpicker().bind('monthpicker-click-month', function() {
dateSetting(); // 월을 선택한 후에 설정하기 위해
});
dateSetting(); // 월을 선택하기 이전에 설정하기 위해
6. dateSetting() 함수는 달력에서 선택한 값을 가져와서 dateObj에 넣고, 연도와 달을 아래와 같이 처리하여 input 태그의 value값에 넣어줍니다.
function dateSetting() {
var dateObj = $('#monthDate').monthpicker('getDate');
if(dateObj == null) {
dateObj = new Date();
}
var year = dateObj.getFullYear();
year = "" + year;
var month = dateObj.getMonth() + 1;
if(month < 10) {
year += "-0" + month;
}else {
year += "-" + month;
}
$('#monthDate').val(year);
}
});
* 전체 코드
더보기
function loadMonthPicker() {
var months = [];
var dateObj = new Date();
var selectYear = dateObj.getFullYear();
var month = dateObj.getMonth() + 1;
for(var i = month; j = 0; i <= 12; i++) {
months[j++] = i;
}
$('#monthDate').monthpicker({
pattern: 'yyyy-mm' // input태그에 표시될 형식
,selectedYear: selectYear // 처음 클릭 시 표출되는 연도
,startYear: 2010 // 시작연도
,finalYear: selectYear // 마지막연도
// ,monthNames: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun',
// 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
,monthNames: ['1월', '2월', '3월', '4월', '5월', '6월',
'7월', '8월', '9월', '10월', '11월', '12월']
,openOnFocus: true // focus시에 달력이 보일지 유무
// ,disableMonths : [ ] // 월 비활성화
});
/* disableMonths 설정 */
if(months.length > 0) {
$('#monthDate').monthpicker('disableMonths', months);
}
// 연도를 변경하는 경우
$('#monthDate').monthpicker().on('monthpicker-change-year', function(e, year) {
if(year == selectYear.toString()) { // 같은 연도일 경우
$('#monthDate').monthpicker('disableMonths', months);
}else {
$('#monthDate').monthpicker('disableMonths', []);
}
}
// 버튼 클릭 시 show
$('#btn_monthPicker').bind('click', function () {
$('#monthDate').monthpicker('show');
});
// 월 선택 시
$('#monthDate').monthpicker().bind('monthpicker-click-month', function() {
dateSetting(); // 월을 선택한 후에 설정하기 위해
});
dateSetting(); // 월을 선택하기 이전에 설정하기 위해
}
function dateSetting() {
var dateObj = $('#monthDate').monthpicker('getDate');
if(dateObj == null) {
dateObj = new Date();
}
var year = dateObj.getFullYear();
year = "" + year;
var month = dateObj.getMonth() + 1;
if(month < 10) {
year += "-0" + month;
}else {
year += "-" + month;
}
$('#monthDate').val(year);
}
출처 : https://sol-study.tistory.com/7
출처 : https://pej4303.tistory.com/30
출처 : https://aspdotnet.tistory.com/2592
728x90
728x90
'JavaScript' 카테고리의 다른 글
[javaScript] Moment.js / 날짜 및 시간을 조작하는 라이브러리 (2) | 2022.11.27 |
---|---|
[Javascript] Uncaught TypeError: ~ .replace is not a function 오류 (2) | 2022.10.31 |
[jquery] click 이벤트 error, on 함수로 대신 사용하기 (0) | 2022.04.26 |
[ajax] controller에서 ajax로 parameter 값을 String, VO, Map으로 넘기는 경우 (0) | 2022.04.14 |
[jquery] .load() method (0) | 2022.04.14 |