[ JQuery ] datepicker(); 달력

link / script :: 파일도 같이 옮겨서 적용 진행할 것

<!-- ############################## -->
<!-- ##########   CSS   ########## -->
<!-- ############################## -->


<style>
.ui-datepicker{ font-size: 12px; width: 250px; }
.ui-datepicker select.ui-datepicker-month{ width:35%; font-size: 12px; margin-left:10px; }
.ui-datepicker select.ui-datepicker-year{ width:40%; font-size: 12px; }
</style>



<!-- ############################## -->
<!-- ##########   SCRIPT   ########## -->
<!-- ############################## -->


<link rel="stylesheet" href="/share/datepicker/jquery-ui.css">
<script src="/share/datepicker/jquery-ui.min.js"></script>
<SCRIPT language="JavaScript" type="text/JavaScript">
<!--
$(function() {

$( ".formDate" ).datepicker();  
$.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, changeMonth: true, changeYear: true, showButtonPanel: true, yearRange: 'c-999:c+3'};         $.datepicker.setDefaults($.datepicker.regional['ko']); 

});
-->
</SCRIPT>

 

 

최근 적용 : 여주이씨 등재신청서

<SCRIPT language="JavaScript" type="text/JavaScript">
<!--
$(function() {

$( ".formDate" ).datepicker();  
$.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, changeMonth: true, changeYear: true, showButtonPanel: true, yearRange: `c-99:c+3`};         $.datepicker.setDefaults($.datepicker.regional[`ko`]); 

});
-->
</SCRIPT>

 

jQuery UI datepicker 크기 조정
jQuery UI 날짜 선택기 너비
jQuery UI 날짜 선택기 작게

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery.min.js"></script><!-- 위에있으면 없어도 됨 -->
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<!--link rel="stylesheet" href="/share/datepicker/jquery-ui.css"-->파일
<!--script src="/share/datepicker/jquery.min.js"></script-->파일
<!--script src="/share/datepicker/jquery-ui.min.js"></script-->파일

<style>
.ui-datepicker{ font-size: 12px; width: 250px; }
.ui-datepicker select.ui-datepicker-month{ width:35%; font-size: 12px; margin-left:10px; }
.ui-datepicker select.ui-datepicker-year{ width:40%; font-size: 12px; }
</style>
<script>
$(function() {
  $( "#datepicker1" ).datepicker({
    dateFormat: `yy-mm-dd`
  });
});
</script>

<input type="text" id="datepicker1">

 

1. 특정일 및 특정요일 비활성화

/* create an array of days which need to be disabled */
var disabledDays = ["2-21-2010","2-24-2010","2-27-2010","2-28-2010","3-3-2010","3-17-2010","4-2-2010","4-3-2010","4-4-2010","4-5-2010"];

/* utility functions */
function nationalDays(date) {
   var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
   //console.log(`Checking (raw): ` + m + `-` + d + `-` + y);
   for (i = 0; i < disabledDays.length; i++) {
      if($.inArray((m+1) + `-` + d + `-` + y,disabledDays) != -1 || new Date() > date) {
         //console.log(`bad:  ` + (m+1) + `-` + d + `-` + y + ` / ` + disabledDays[i]);
         return [false];
      }
   }
   //console.log(`good:  ` + (m+1) + `-` + d + `-` + y);
   return [true];
}
function noWeekendsOrHolidays(date) {
   var noWeekend = jQuery.datepicker.noWeekends(date);
   return noWeekend[0] ? nationalDays(date) : noWeekend;
}

/* create datepicker */
jQuery(document).ready(function() {
   jQuery(`#date`).datepicker({
      minDate: new Date(2010, 0, 1),
      maxDate: new Date(2010, 5, 31),
      dateFormat: `DD, MM, d, yy`,
      constrainInput: true,
      beforeShowDay: noWeekendsOrHolidays
   });
});

2. 일요일만 선택 막기

function noSundays(date) {
   return [date.getDay() != 0, ``];
}
$(`#datepickerere`).datepicker({..., beforeShowDay: noSundays});

3. 주말 색 바꾸기

.ui-datepicker-week-end { color:red; }
.ui-datepicker-week-end .ui-state-default { color:red; }

 

$( "#txtBirth" ).datepicker();  
$.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월(JAN)`,`2월(FEB)`,`3월(MAR)`,`4월(APR)`,`5월(MAY)`,`6월(JUN)`,`7월(JUL)`,`8월(AUG)`,`9월(SEP)`,`10월(OCT)`,`11월(NOV)`,`12월(DEC)`], dayNames: [`일`,`월`,`화`,`수`,`목`,`금`,`토`], dayNamesShort: [`일`,`월`,`화`,`수`,`목`,`금`,`토`], dayNamesMin: [`일`,`월`,`화`,`수`,`목`,`금`,`토`], weekHeader: `Wk`, dateFormat: `yy-mm-dd`, firstDay: 0, isRTL: false, showMonthAfterYear: true, yearSuffix: `년`, changeMonth: true, changeYear: true, showButtonPanel: true, yearRange: `c-99:c+3`};         $.datepicker.setDefaults($.datepicker.regional[`ko`]); 
});