jquery datepicker 달력에서 년도와 월만 선택 가능하게 하기

jquery datepicker 를 이용하여 인터페이스를 제공하다 보면 가끔 년과 월만 선택하게 하도록 하고 싶을 때가 있습니다. 이럴경우 이용하기에 좋은 방법 입니다. 아래 소스를 참고 하세요. 예제는 여기를 확인하세요. $(document).ready(function () { $.datepicker.regional[‘ko’] = { 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’ }; $.datepicker.setDefaults($.datepicker.regional[‘ko’]); var datepicker_default = { showOn: ‘both’, buttonText: “달력”, currentText: “이번달”, changeMonth: true, changeYear: true, showButtonPanel: true, yearRange: ‘c-99:c+99’, showOtherMonths: true, Continue reading jquery datepicker 달력에서 년도와 월만 선택 가능하게 하기

datepicker 시작일과 종료일 설정시 사용하기 좋은 팁

웹프로그래밍을 하다보면 가끔 시작일과 종료일을 입력 받는 프로그램을 제작 하곤 한다. 사용자에게 날짜를 입력 받아야 하는데 텍스트박스만 떡하니 나두면 사용자가 제대로 된 데이터를 입력하지 않아 에러가 발생 될수 있다. 이럴 경우를 대비하여 보통 달력을 띄우거나 셀렉트박스로 만들게 되는데 셀렉트박스 보다는 jquery ui에서 지원하는 datepicker를 이용하는게 훨씬 쉬울것이다. datepicker 를 이용하면 사용자에게 날짜를 입력 받는 것이 너무나도 쉽다. 하지만 시작일과 종료일을 받아야 하는 상황에서 사용자가 시작일을 종료일보다 뒤의 날짜를 선택하거나 종요일을 시작일 보다 앞의 날짜를 선택한다면 원하는 결과를 가져올수 없을 것이다. 그럼 datepicker 로 시작일을 선택할때 종료일보다 나중의 날은 선택 할수 없게 하고, 종료일을 선택할때는 시작일 이후로만 선택 할수 있게 한다면? Continue reading datepicker 시작일과 종료일 설정시 사용하기 좋은 팁

jquery ui datepicker 에서 공휴일 지정해서 선택 불가능하게 만들기

jquery ui 에 있는 datepicker 이용해서 달력을 생성할때 공휴일에는 선택을 불가능하게 하도록 하는 소스 입니다. 인터넷에서 찾은 소스에다가 약간의 추가를 더해서 매년 반복되는 공휴일과 한해에만 적용되는 공휴일을 구분할수 있게 해놧습니다. 소스를 보면 대충 알꺼고 리턴하는 값을 설명하면 result = [false, “date-holiday”, holiday.title]; []안에 첫번째 값은 해당일자를 사용자가 선택 가능하게 할지 못하게 할지 여부 (true 는 가능, false는 불가능) 두번째 인자는 추가적인 css 클래스이름 .date-holiday 클래스로 글자 색이나 이런거 주면 반영됨 마지막 세번째 인자는 마우스 올렸을때의 타이틀값 jquery ui 적용해서 해당 소스 확인해보면 금방 알수 있습니다. var holidays = { “0101”:{type:0, title:”신정”, year:””}, “0301”:{type:0, title:”삼일절”, year:””}, “0505”:{type:0, title:”어린이날”, year:””}, “0606”:{type:0, title:”현충일”, Continue reading jquery ui datepicker 에서 공휴일 지정해서 선택 불가능하게 만들기