본문 바로가기
SW 프로그래밍/Web Service

JQuery Datepicker 예제

by N2info 2018. 12. 29.

https://jqueryui.com/datepicker/#show-week

Datepicker

Select a date from a popup or inline calendar

The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <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>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>
</html>
cs


datepicker 기본 셋팅, 달력 아이콘 위치, 달력위치(ㅋㅋ 참조)

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
 $.datepicker.regional['ko'] = {         
    closeText : '닫기',         
    prevText : '이전달',         
    nextText : '다음달',         
    currentText : '오늘',         
    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월'],         
    dayNames : ['일', '월', '화', '수', '목', '금', '토'],         
    dayNamesShort : ['일', '월', '화', '수', '목', '금', '토'],         
    dayNamesMin : ['일', '월', '화', '수', '목', '금', '토'],         
    weekHeader : 'Wk',         
    dateFormat : 'yymmdd',         
    firstDay : 0,         
    isRTL : false,         
    showMonthAfterYear : false,         
    yearSuffix : '년',
    showOn: 'both',
    buttonImage: '/images/main/search/btn_cale.gif',
    buttonImageOnly: true
   }; 
    $.datepicker.setDefaults($.datepicker.regional['ko']);         //default셋팅
   $("#txt_prodStart" ).datepicker();  
   $('img.ui-datepicker-trigger').css({'cursor':'pointer', 'margin-left':'5px'});  //아이콘(icon) 위치
   $('.ui-datepicker ').css({ "margin-left" : "141px", "margin-top": "-223px"});  //달력(calendar) 위치
   $('img.ui-datepicker-trigger').attr('align', 'absmiddle');
cs


저작자표시 비영리 변경금지 (새창열림)

관련글

티스토리툴바