사용시 주의점 : 

1. 스크립트 호출 순서를 지켜주세요.

호출 순서가 달라지면 소스가 적용이 되지 않습니다.

2. 스크립트 위치는 상관이 없습니다. 헤더 안 혹은 닫히는 바디 바로 앞에 두어도 동작은 합니다.


참조 사이트 :

1. 조은벗들

<script type="text/javascript">
// 달력 선택
function makeDate(dayDiff )
{


 var curDate = new Date( );
 var diffDate = new Date(curDate.getFullYear(),curDate.getMonth(),curDate.getDate() );
 diffDate.setDate(diffDate.getDate() + dayDiff);
 var strCurDate= curDate.getFullYear() +'-'+ (curDate.getMonth()+101 +"").substring(1,3) +'-'+(curDate.getDate()+100 +"").substring(1,3);
 var strDiffDate= diffDate.getFullYear() +'-'+ (diffDate.getMonth()+101 +"").substring(1,3) +'-'+(diffDate.getDate()+100 +"").substring(1,3);
 frmTest.fldDate2.value=strCurDate;
 frmTest.fldDate1.value=strDiffDate;
}
 $(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: ''};
  $.datepicker.setDefaults($.datepicker.regional['ko']);


  $('#selecter1').datepicker({
   //showOn: 'button',
   buttonImage: '/cal.png', //이미지 url
   buttonImageOnly: true,
   buttonText: "달력",
   changeMonth: true,
   changeYear: true,
   showButtonPanel: true
  });
  $('#selecter2').datepicker({
   //showOn: 'button',
   buttonImage: '/cal.png', //이미지 url
   buttonImageOnly: true,
   buttonText: "달력",
   changeMonth: true,
   changeYear: true,
   showButtonPanel: true
  });
 });

 </script>


1. http://blog.naver.com/qfwh/220018487871


<script src="/js/jquery-1.8.3.min.js"></script>
<link href="/jquery-ui.css" rel="stylesheet" />
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
 $(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: ''};
  $.datepicker.setDefaults($.datepicker.regional['ko']);
 
  $('#selecter').datepicker({ 
   showOn: 'button',
   buttonImage: '/cal.png', //이미지 url
   buttonImageOnly: true,
   buttonText: "달력",
   changeMonth: true,
   changeYear: true,
   showButtonPanel: true
  });
 });
</script>
 
<input type="text" id="selecter" name="selecter" />


[출처] (JQuery) 달력 JQuery 'Datepicker'|작성자 푸른인연


2. jQuery UI: Adding a trigger button for Datepicker

[추천]버튼을 이용한 데이트픽커

http://www.phpeveryday.com/articles/jQuery-UI-Adding-a-trigger-button-for-Datepicker-P1020.html


jQuery UI Adding a trigger button for Datepicker tutorial. By default, user can open datepicker when <input> element receives focus. we can change this very easily. We can make datepicker opens when a button is clicked instead. The most basic type of <button> can be enabled with just the showOn option


$(function(){    var pickerOpts = {
        showOn: "button"
    };  
    $("#date").datepicker(pickerOpts);});

Complete Example Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<link rel="stylesheet" type="text/css" href="development-bundle/themes/ui-lightness/jquery.ui.all.css"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>jQuery UI Datepicker Example 1</title> 
<script type="text/javascript" src="development-bundle/jquery-1.4.2.js"></script> 
<script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script> 
<script type="text/javascript" src="development-bundle/ui/jquery.ui.datepicker.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
        var pickerOpts = { 
            showOn: "button" 
        };   
        $("#date").datepicker(pickerOpts); 
    }); 
</script> 
</head> 
<body> 
<label>Enter a date: </label><input id="date"> 
</body> 
</html>


5008310516_d8f6299cf6[1].jpg


We can change the default text that show on the button. just providing a new string as the value of the buttonText option:


$(function(){ 
    var pickerOpts = { 
        showOn: "button", 
        buttonText: "Show Datepicker" 
    };   
    $("#date").datepicker(pickerOpts); 
});

5008330010_e1df31905f[1].jpg


$(function(){ 
    var pickerOpts = { 
        showOn: "button", 
        buttonImage: "img/datepicker/date.png", 
        buttonText: "Show Datepicker" 
    };   
    $("#date").datepicker(pickerOpts); 
});

5007753461_80995f78cb[1].jpg



 
댓글은 로그인 사용자만 작성 가능합니다. 로그인하기