반응형
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Show week of the year</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      showWeek: true,
      firstDay: 1
    });
  });
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>
</html>

출저 : https://jqueryui.com/datepicker/


호텔 사이트나 스케쥴 관리 사이트에서 필수인 달력..

이번 프로젝트에 달력을 쓰게 되어서 jquery UI에서 제공하는 DATEPICKER라는 기능을 알게 되었다.

input 태그에 아이디 생성한 후 javascript에서 이벤트만 주면 된다. 완전 편하다.

일일이 날짜 계산을 안해줘도 되고 이전달,다음달 버튼과 함께 해당 달력도 보여준다.

커스텀마이징도 되고 클릭 이벤트 등 대부분의 이벤트를 지원 해준다.

정말 편리한 기능인듯.^^



옵션

사용 방법

설명

altField$( ".selector" ).datepicker({
    altField: ".selecter"
});		선택한 날짜가 해당 폼에 입력된다.
altFormat$( ".selector" ).datepicker({
    altFormat: "yyyy-mm-dd"
});		altField의 폼에 입력될 날짜의 형식
beforeShow$( ".selector" ).datepicker({
    beforeShow: function(input, inst) {
        // input은 폼
        // inst는 datepicker의 여러 값이 있던데 
        //          아직 쓸모를 찾지 못했다.
    }
});		달력이 그려지기 전에 처리할 일들을 지정할 수 있다.
buttonImage$( ".selector" ).datepicker({ 
    buttonImage: "/images/datepicker.gif" 
});

　버튼 이미지 추가

buttonImageOnly

$( ".selector" ).datepicker({
    buttonImageOnly: true 
});

　

buttonText

$( ".selector" ).datepicker({ 
    buttonText: "선택" 
});

버튼 텍스트 추가　

changeMonth

$( ".selector" ).datepicker({ 
    changeMonth: true 
});		셀렉트박스로 월 변경 여부
changeYear$( ".selector" ).datepicker({ 
    changeYear: true 
});		셀렉트박스로 연도 변경 여부
closeText

$( ".selector" ).datepicker({ 
    closeText: "닫기" 
});

닫기 버튼 텍스트 추가

constrainInput

$( ".selector" ).datepicker({ 
    constrainInput: false 
});

형식외 텍스트 입력제한. 디폴트 true

currentText

$( ".selector" ).datepicker({ 
    currentText: "Now" 

});

　
dateFormat$( ".selector" ).datepicker({ 
    dateFormat: "yy-mm-dd" 
});		　
dayNames$( ".selector" ).datepicker({ 
    dayNames: 
        [ "일요일", "월요일", "화요일", "수요일", 
        "목요일", "금요일", "토요일" ] 
});

　요일 커스텀 추가

dayNamesMin

$( ".selector" ).datepicker({ 
    dayNamesShort: 
        [ "S", "M", "T", "W", "T", "F", "Sa" ] 
});

　
dayNamesShort$( ".selector" ).datepicker({ 
    dayNamesShort: 
        [ "일", "월", "화", "수", "목", "금", "토" ] 
});		　정렬 순
defaultDate$( ".selector" ).datepicker({ 
    defaultDate: +7 
});		달력 기본 출력될때 기준일. Date타입, 숫자, String 다 가능하다.
duration$( ".selector" ).datepicker({ 
    duration: "slow" 
});		달력 나타나는 속도, "slow", "normal", "fast"
firstDay$( ".selector" ).datepicker({ 
    firstDay: 1 
});		주의 시작일을 일요일로 하려면 0, 월요일은 1
gotoCurrent$( ".selector" ).datepicker({ 
    gotoCurrent: true 
});		　
maxDate$( ".selector" ).datepicker({ 
    maxDate: "+1m +1w" 
});		　
minDate$( ".selector" ).datepicker({ 
    minDate: new Date(2012, 1 - 1, 1) 
});		　
monthNames$( ".selector" ).datepicker({
    monthNames: 
        [ "1월", "2월", "3월", "4월", "5월", "6월", 
        "7월", "8월", "9월", "10월", "11월", "12월" ] 
});		　
monthNamesShort$( ".selector" ).datepicker({ 
    monthNamesShort: 
        [ "Jan", "Feb", "Mar", "Apr", "Maj", "Jun", 
        "Jul", "Aug", "Sep", "Okt", "Nov", "Dec" ] 
});		　
nextText$( ".selector" ).datepicker({ 
    nextText: "차월" 
});		　
numberOfMonths$( ".selector" ).datepicker({ 
    numberOfMonths: [ 2, 3 ] 
});		여러개월 달력을 표시
onChangeMonthYear$( ".selector" ).datepicker({
    onChangeMonthYear: function(year, month, inst) {
        // year 년도 숫자
        // month 월 숫자
        // inst는 datepicker의 여러 값이 있던데 
        //          아직 쓸모를 찾지 못했다.
    }
});		달력에서 연월을 셀렉트 박스로 바꿀 수 있을때 바꿀때 이벤트
onClose$( ".selector" ).datepicker({
    onClose: function(dateText, inst) {
        // dateText는 날짜 스트링
        // inst는 datepicker의 여러 값이 있던데 
        //          아직 쓸모를 찾지 못했다.
    }
});		　
onSelect$( ".selector" ).datepicker({
    onSelect: function(dateText, inst) {
        // dateText는 날짜 스트링
        // inst는 datepicker의 여러 값이 있던데 
        //          아직 쓸모를 찾지 못했다.
    }
});		　
prevText$( ".selector" ).datepicker({ 
    prevText: "전월" 
});

　이전 달 버튼 텍스트

selectOtherMonths$( ".selector" ).datepicker({ 
    selectOtherMonths: true 
});		다른 달도 출력시 선택가능 여부. 디폴트는 false
showAnim$( ".selector" ).datepicker({ 
    showAnim: "fold" 
});		달력 에니메이션 효과. show(디폴트), slideDown, fadeIn etc..
showCurrentAtPos$( ".selector" ).datepicker({ 
    showCurrentAtPos: 3 
});		여러 달의 달력을 한꺼번에 띄울 경우 시작월을 현재를 기준으로 달 수. 
0이 현재월. -5면 5개월 전, 3이면 3개월 후
showOptions$( ".selector" ).datepicker({ 
    showOptions: { direction: "up" } 
});		달력 보여줄때 이벤트 옵션
showOtherMonths$( ".selector" ).datepicker({ 
    showOtherMonths: true 
});		월 1일 이전, 월 말일 이후 빈칸에 이전달, 다음달 날짜 출력 여부
showWeek$( ".selector" ).datepicker({ 
    showWeek: true 
});		주수 출력 여부
stepMonths$( ".selector" ).datepicker({ 
    stepMonths: 3 
});		달력에서 좌우 선택시 이동할 개월 수
weekHeader$( ".selector" ).datepicker({ 
    weekHeader: "주" 
});		　
yearRange$( ".selector" ).datepicker({ 
    yearRange: "2010:2013" 
});		연도 범위
yearSuffix$( ".selector" ).datepicker({ 
    yearSuffix: "년" 
});		　


반응형
저작자표시 (새창열림)

'JAVASCRIPT' 카테고리의 다른 글

user strict를 사용하는 이유  (0) 2015.11.12
javascript 이미지 확대 팝업 창  (2) 2015.10.29
jquery 동적 이벤트 추가!  (0) 2015.05.20
jquery empty()와 detach() 비교  (0) 2015.04.27
jquery timepicker  (0) 2015.04.09

+ Recent posts

티스토리툴바