archive
22
2019-03-13 19:28:11 작성 2019-03-13 20:03:23 수정됨
1
691

bootstrap datepicker 달력에 특정 날짜들을 강조 표시하는 것을 도와주세요


다음 사이트에서 제공하는 달력에

https://bootstrap-datepicker.readthedocs.io/en/latest/


Database 에 저장된 날짜 목록 데이터가져와

날짜 목록과 일치하는 날짜에

강조 표시(하이라이트 등)을 표기하여야 합니다.


구현하고자 하는 환경은

Spring 프로젝트에서 MVC 모델과

Java, JSP, JSTL, Javascript, HTML, CSS 들을 사용중입니다.


JQuery 를 전혀 익히지 않은 상태에서 단시간내에 해결하여야 하여

자체적인 문제 해결에 어려움을 겪고 있습니다. 도움을 구합니다.

1
0
  • 답변 1

  • 29kkh
    74
    2019-03-14 07:02:36 작성 2019-03-14 07:04:50 수정됨

    예시입니다.


    Database 에 저장된 날짜 목록 데이터

    var dateList = ['2018-02-13', 
    		'2019-01-01',
    		'2019-02-14', 
    		'2019-03-15', 
    		'2019-04-01', '2019-04-20'];


    날짜 계산 함수

    //월별 마지막 일자
    function lastDay(year, month){
    	var m = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    	m[1] = isLeapYear(year) ? 29 : 28;
    	
    	return m[parseInt(month) - 1];	
    }
    
    //윤년 여부
    function isLeapYear(year){
    	var boolean;
    	boolean = year % 4 == 0 && year % 100 != 0 || year % 400 == 0;
    	return boolean;
    }


    $(document).ready(function(){});에 적용한 소스

    $(document).ready(function(){
        $('.datepicker').datepicker({
            format: "yyyy-mm-dd",
            language: "ko"
        });
    	
    		
        $('.datepicker').datepicker().on("show", function(e) {
    	const fixDate = new Date("2019", "03", "14"), fixDateData = '1552521600000', fixMarchLastDay = '31', fixDayData = '86400000';
    	var split, date, dayGap, result, temp;
    
    	for(var index = 0; index < dateList.length; index++){
    	    split = dateList[index].split("-");
    	    date = new Date(split[0], split[1], split[2]);
    	    dayGap = fixDayData * (parseInt(fixMarchLastDay) - lastDay(split[0], split[1]));
    
    	    result = date - fixDate + dayGap;
    			
    	    temp = parseInt(fixDateData) + parseInt(result);
    			
    	    $(".day[data-date='" + temp + "']").addClass("highlighted");
    	}
        });
    });


    소스 만들었는데 됩니다.

    참고하시고 소스 문제 있을 시 답변 달아주시면 감사하겠습니다.


    datepicker 열어서 f12로 일자(날짜) 찍으면

    <td class="day" data-date="1521158400000">16</td> 이렇게 나옵니다.

    여기서 data-date 이용해서 소스 만들었습니다.


    강조 표시하는데 있어서

    월별 마지막 일자가 다른 것끼리 일자를 구하고 계산한 식으로 처리하면 맞지가 않습니다.

    소스에서 고정한 3월이 31일까지여서

    (31일 - 월별 마지막 일자) * 86400000

    대충 이런식으로 하니깐 강조 표시가 맞게 되더라구요.

    86400000은 자바스크립트 날짜 계산 인터넷 검색해보니까 (24*60*60*1000)

    대충 이런식으로 나오네요.

    1
  • 로그인을 하시면 답변을 등록할 수 있습니다.