달력 datepicker , 한글화 및 특정일 선택

먼저 jquery ui 사이트에서 관련 api 를 받아와야 한다.https://jqueryui.com/

jquery-ui-1.12.1.zip

다운로드

 

이글을 올리는 시점의 안정화 버전을 올려놨다.

 

  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

 

<link rel="stylesheet" type="text/css" href="../js/jquery-ui.css">
<script type="text/javaScript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javaScript" src="../js/jquery-ui.js"></script>

$(function() {
 $("#datepicker").datepicker({
     showMonthAfterYear:true,
     monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
     dayNamesMin: ['일','월','화','수','목','금','토'],
     showAnimation: 'slider',
     dateFormat: 'yy-mm-dd',
     showOtherMonths: true,
     selectOtherMonths: true,
     changeMonth: true,
     changeYear: true
 });
});

 

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

 

원래 사이트는 https://jqueryui.com/ 가면 다운로드와 API 및 설명 내용을 볼수 있다.

 

 

1. Jquery UI DatePicker 주말 선택 안하기 :

$(function() {
  $('#datepicker').datepicker({
   dateFormat: "yy-mm-dd",
   regional: "ko",
   beforeShowDay: function(date){
    var day = date.getDay();
    return [(day != 0 && day != 6)];
   }   
  }); 

});

2. 특정요일만 선택하기 :

0 : 일요일
6 : 토요일

//아래 코드는 매주 화요일과 금요일만 선택가능
$(function() {
  $('#datepicker').datepicker({

   dateFormat: "yy-mm-dd",
   regional: "ko",
   beforeShowDay: function(date){
    var day = date.getDay();
    return [(day != 0 && day != 1 && day != 3 && day != 4 && day != 6)];
   }   
  }); 
});

3. 특정일만 선택하기
$(function() {
  //선택가능 날짜
  var availableDates = ["2015-01-01", "2015-01-13"];

  function available(date) {
   var thismonth = date.getMonth()+1;
   var thisday = date.getDate();

   if(thismonth<10){
    thismonth = "0"+thismonth;
   }

   if(thisday<10){
    thisday = "0"+thisday;
   }

   ymd = date.getFullYear() + "-" + thismonth + "-" + thisday;

      if ($.inArray(ymd, availableDates) >= 0) {
          return [true,"",""];
      } else {
          return [false,"",""];
      }
  }

  $('#datepicker').datepicker({

   dateFormat: "yy-mm-dd",
   regional: "ko",
   beforeShowDay: available

  });

 

});

참고 : https://ellordnet.tistory.com/12

 

 

 

4. 한달이내만 선택하기

 

     $("#start_date").datepicker({

         showMonthAfterYear:true,

         monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],

         dayNamesMin: ['일','월','화','수','목','금','토'],

         showAnimation: 'slider',

         dateFormat: 'yy-mm-dd',

         showOtherMonths: true,

         selectOtherMonths: true,

         changeMonth: true,

         changeYear: true,

         maxDate: 30,

         minDate: 0

     });

 

 

5. 원하는 특정일만 선택배제하고 또 일요일만 선택가능하도록

	$(function() {
	     $("#apply_date").datepicker({
		 showMonthAfterYear:true,
		 monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
		 dayNamesMin: ['일','월','화','수','목','금','토'],
		 showAnimation: 'slider',
		 dateFormat: 'yy-mm-dd',
		 showOtherMonths: true,
		 selectOtherMonths: true,
		 changeMonth: true,
		 changeYear: true,
		 maxDate: 30,
		 minDate: 0,
/*
		 // 일요일만 선택되게끔
		 beforeShowDay: function(date){
		    var day = date.getDay();
		    return [(day != 1 && day != 2 && day != 3 && day != 4 && day != 5 && day != 6)];
		 }   
*/
		 beforeShowDay: disableAllTheseDays	
	     });
	});

	// 선택배제할 날짜
	var disabledDays = ["2022-6-5","2022-6-12"];

	// 특정일 선택막기
	function disableAllTheseDays(date) {
		var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
		for (i = 0; i < disabledDays.length; i++) {
			if($.inArray(y + '-' +(m+1) + '-' + d,disabledDays) != -1) {
				return [false];
			}
		}
		
		// 나머지는 현재일의 요일을 판단해서 일요일만 선택하도록
		var day = date.getDay();
		return [(day != 1 && day != 2 && day != 3 && day != 4 && day != 5 && day != 6)];
		//return [true];
	}

참고 : https://www.wrapuppro.com/programing/view/WYd9dP7Po9b9ByH

 

 

[ 년도 기간설정시 ]

 

yearRange: "-100:+0", // last hundred years

yearRange: '1950:2013', // specifying a hard coded year range

var dateToday = new Date();
var yrRange = dateToday.getFullYear() + ":" + (dateToday.getFullYear() + 50);
and then
yearRange : yrRange

yearRange: "c-100:c+0", // last hundred years and current years
yearRange: "c-100:c+100", // last hundred years and future hundred years
yearRange: "c-10:c+10", // last ten years and future ten years

 

7. 최초 설정

$('#cal1').datepicker('setDate', '-1D');
(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후)

$('#cal2').datepicker('setDate', 'today');
(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후)년전), (+1D:하루후, -1M:한달후, -1Y:일년후)

 

참고 : https://www.wake-up-neo.com/ko/jquery/jquery-ui-datepicker%EA%B0%80-%EC%97%B0%EB%8F%84-%EB%B2%94%EC%9C%84%EB%A5%BC-100-%EB%85%84%EC%9C%BC%EB%A1%9C-%EC%84%A4%EC%A0%95/1070092586/

참고 : https://cloud0477.tistory.com/124

참고 : https://itmoon82.tistory.com/15