'프로그래밍/기타'에 해당하는 글 2건

jQuery 달력 위젯 datepicker 사용하기

프로그래밍/기타 2019. 11. 28. 12:00

datepicker란 jQuery에서 제공하는 위젯 중 하나이다. 

사용법은

 

1. import

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">

 

2. script

<script>
$(document).ready(function() {
    $("#datepicker").datepicker();
});
</script>

 

3. html

<body>
    날짜 선택: <input type="text" id="datepicker">
</body>

 

datepicker 기본

 

가장 기본 형태의 datepicke이다.

 

 

여기서 옵션을 추가할 수 있다. 

 

1. showOn

showOn: "button" ->button 클릭 시 날짜 위젯을 보여준다.

showOn:"both" => button이나 text상자 클릭 시 날짜 위젯을 보여준다.

    $("#datepicker").datepicker({
        showOn:"button"
    });

 

2. buttonImage

버튼 이미지

    $("#datepicker").datepicker({
        showOn:"button"
        , buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
    });

 

3. buttonImageOnly

버튼 이미지만 보이게 하기

    $("#datepicker").datepicker({
        showOn:"button"
        , buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
        ,buttonImageOnly: true
    });

4. changeMonth, changeYear

년, 월을 셀렉트박스로 변경

 $("#datepicker").datepicker({
        showOn:"button"
        , buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
        ,buttonImageOnly: true
        ,changeMonth:true
        ,changeYear:true 
    });

 

5. yearRange

연도의 선택 범위

$("#datepicker").datepicker({
        showOn:"button"
        , buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
        ,buttonImageOnly: true
        ,changeMonth:true
        ,changeYear:true
        ,yearRange:"-10:+100" /*2009 ~ 2119*/
        ,yearRange:"2009:9999" /*2009 ~ 9999*/
         /*위의 방식 아래 방식 둘다 가능*/
    });

 

 

 

 

6. nextText, prevText 

화살표의 툴팁내용

$("#datepicker").datepicker({
        showOn:"button"
        , buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
        ,buttonImageOnly: true
        ,changeMonth:true
        ,changeYear:true
        ,nextText:"다음"
        ,prevText:"이전"
        
    });

 

7. numberOfMonths:[n,m]

n X m 으로 달력을 보여줌

$(document).ready(function() {
    $("#datepicker").datepicker({
        showOn:"button"
        , buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
        ,buttonImageOnly: true
        ,changeMonth:true
        ,changeYear:true
        ,nextText:"다음"
        ,prevText:"이전"
        ,numberOfMonths:[2,3]
    });
});

 

8. dateFormat

날짜 형식

$("#datepicker").datepicker({
        showOn:"button"
        , buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
        ,buttonImageOnly: true
        ,changeMonth:true
        ,changeYear:true
        ,dateFormat:"dd-mm-yy"
    });

 

9. dayNames, dayNamesMin,monthNamesShort

dayNames: 요일 툴팁

dayNamesMin: 표시되는 요일

monthNamesShort : 표시되는 월

 $("#datepicker").datepicker({
        showOn:"button"
        , buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
        ,buttonImageOnly: true
        ,changeMonth:true
        ,changeYear:true
        ,dateFormat:"dd-mm-yy"
        ,dayNames : ['월요일','화요일','수요일','목요일','금요일','토요일','일요일']
        ,dayNamesMin : ['월','화','수','목','금','토','일']
        ,monthNamesShort:  [ "1월", "2월", "3월", "4월", "5월", "6월","7월", "8월", "9월", "10월", "11월", "12월" ]
    });

 

10. showOtherMonths

이전달, 다음달의 날짜 표시여부

$("#datepicker").datepicker({
        showOn:"button"
        , buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
        ,buttonImageOnly: true
        ,changeMonth:true
        ,changeYear:true
        ,dateFormat:"dd-mm-yy"
        ,dayNames : ['월요일','화요일','수요일','목요일','금','토','일']
        ,dayNamesMin : ['월','화','수','목','금','토','일']
        ,monthNamesShort:  [ "1월", "2월", "3월", "4월", "5월", "6월","7월", "8월", "9월", "10월", "11월", "12월" ]
        ,showOtherMonths:true
    });

 

 

이 외에도 여러가지 옵션들이 있으니, 직접 실행해보면 된다. 

'프로그래밍 > 기타' 카테고리의 다른 글

select 박스와 input의 위치가 다를때  (1) 2019.11.28
WRITTEN BY
beautifulhill
,

select 박스와 input의 위치가 다를때

프로그래밍/기타 2019. 11. 28. 11:19

기존의 디자인에 맞춰 새로운 페이지를 만들거나, 수정할 때

select box와 input의 위치가 미묘하게 다를 때가 있다.

 

이렇게 selectbox가 올라가 있는경우, 혹은 그 반대의 경우가 보인다.

 

이럴 때

1. 높이를 확인한다.

아무런 css를 주지 않은 input의 경우 padding:1px 0px, border-with: 2px 이고

selectbox의 경우 padding: 0; border-width: 1px;이다.

그러므로 높이가 같은지 확인하는 것이 우선이다.

input의 디폴트 css값
select 의 디폴트 css값

 

 

2. vertical-align을 확인한다.

대부분의 문제는 vertical-align이 달라서 생기는 일이다.

위의 예시도 input 은 vertical-align: middle

select는 vertical-align: top으로 주어 발생한 문제이다.

 

vertical-align을 같은 값으로 주면 해결!!

input[type="text"]{
  line-height: 16px;
  vertical-align: middle;
}
select{
  height: 20px;
  vertical-align: middle;
}

 

'프로그래밍 > 기타' 카테고리의 다른 글

jQuery 달력 위젯 datepicker 사용하기  (0) 2019.11.28
WRITTEN BY
beautifulhill
,