datepicker 특정요일 색 및 선택금지 시키기

JQUERY/플러그인 2015. 7. 28. 13:09

728x90

1.특정일 및 특정요일 비활성화

        http://davidwalsh.name/jquery-datepicker-disable-days

2.일요일만 선택 막기
        function noSundays(date) {
                 return [date.getDay() != 0, ''];
        }
        $('#datepickere').datepicker({..., beforeShowDay: noSundays});

<!doctype html>
<html lang="ko">
<head>
<script src="/js/jquery.js"></script>
<script src="/js/jquery-ui.js"></script>
</head>
<body>
<input type="text" id="calendar" name="calendar"/>
</body>
<script>
$("#calendar").datepicker({
     changeMonth: true, //콤보 박스에 월 보이기
     changeYear: true, // 콤보 박스에 년도 보이기
     showOn: 'button', // 우측에 달력 icon 을 보인다.
     buttonImage: '/images/btn_cal.png', // 우측 달력 icon 의 이미지 경로
     buttonImageOnly: true //달력에 icon 사용하기
});
//마우스를 손가락 손가락 모양으로 하고 여백주기
$('img.ui-datepicker-trigger').css({'cursor':'pointer', 'margin-left':'5px', 'margin-top':'3px'});

//날짜 형식을 0000-00-00으로 지정하기
$.datepicker.setDefaults({dateFormat:'yy-mm-dd'});
</script>
</html>

//예약을 위한 달력 출력
$( "#datepicker" ).datepicker({
showMonthAfterYear: true ,
minDate: '-0d',
yearSuffix: '년',
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월'],
dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
xxonSelect: function(dateText, datePicker) {
var mm = (datePicker.selectedMonth + 1);
var dd = datePicker.selectedDay;<br />
if(mm < 10) mm = "0" + mm;
if(dd < 10) dd = "0" + dd;
$("#currentDate").val(datePicker.selectedYear + "년 " + mm + "월 " + dd + "일");       }
});

/** datepicker 변경 관련 */

.ui-datepicker{font-size:12px;width:270px;background:#ddebf7;border:0px solid #555;color:#333}
div.ui-datepicker-header {margin-top:5px;text-align:center;background:#ddebf7;border:0px;color:#708af8;font-size:14px;}

/** e: datepicker 변경 관련 */

728x90

저작자표시

'JQUERY > 플러그인' 카테고리의 다른 글

Jquery 갤러리 플러그인 모음 (0)	2015.10.06
bpopup 팝업 플러그인 예제 (0)	2015.08.06
Layer Popup 레이어팝업 bPopup (0)	2015.08.06
jQuery: 참 편리한 날짜선택 위젯- datepicker (0)	2015.07.28
[Jquery]datepicker UI를 통한 달력생성 (0)	2015.07.28
jQuery plug-in 개발 참고 (0)	2015.05.29
input 창 클릭시 클씨사라짐 (0)	2014.09.03
FLOTCHART (0)	2014.08.13

nineDeveloper

안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!

160x600