사용시 주의점 :
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>
// 달력 선택
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'|작성자 푸른인연
<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);});
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>
<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](http://eond.com/files/attach/images/345969/690/357/16652ee028657fbc9903e07db55587fd.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);
});
var pickerOpts = {
showOn: "button",
buttonText: "Show Datepicker"
};
$("#date").datepicker(pickerOpts);
});
![5008330010_e1df31905f[1].jpg](http://eond.com/files/attach/images/345969/690/357/40f750d03feeda0942ef9dffbe8ab9d4.jpg)
$(function(){
var pickerOpts = {
showOn: "button",
buttonImage: "img/datepicker/date.png",
buttonText: "Show Datepicker"
};
$("#date").datepicker(pickerOpts);
});
var pickerOpts = {
showOn: "button",
buttonImage: "img/datepicker/date.png",
buttonText: "Show Datepicker"
};
$("#date").datepicker(pickerOpts);
});
![5007753461_80995f78cb[1].jpg](http://eond.com/files/attach/images/345969/690/357/269c0e1ad36b0f6b3567ede83ae53458.jpg)
