jQuery, jQueryUI를 이용한 달력 스크립트, Datepicker

사용시 주의점 :

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

CMS Tips

주간 인기 검색어 상세보기

2024년 11월 18일 ~ 11월 24일