비활성화 된 날짜에 대한 jquery 캘린더의 툴팁

jquery UI를 사용하여 캘린더 컨트롤을 만들었습니다. 선택한 날짜에 대한 제한이 있습니다. 나의 요구 사항은 "미안,이 날짜를 선택할 수 없습니다"와 같은 사용 중지 된 날짜에 대한 툴팁을 표시하는 것입니다. . 여기에 어떤 방법이 있습니까? PFB 내 코드 :비활성화 된 날짜에 대한 jquery 캘린더의 툴팁

<!doctype html> 
<html><head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Datepicker </title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"> 
    </script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"> 
    </script> 
<script> 
$(function() { 
    $("#datepicker").datepicker({ 
     minDate: -0, 
     maxDate: "+1M +2D", 
     showOn: "button", 
     buttonImage: "calendar.png", 
     buttonImageOnly: true, 
     dateFormat: 'D dd MM yy', 
     showAnim: "clip" 
    }); 
    $("#datepicker").change(function() { 
     updateDate(); 
    }); 
    $("#addDate").click(function() { 
     addDaysToDate(); 
    }); 
    $("#subtractDate").click(function() { 
     subtractDaysToDate(); 
    }); 
}); 

function updateDate() { 
    var today = new Date(); 
    var tomorrow = new Date(); 
    tomorrow.setDate(today.getDate() + 1); 
    var date2 = $('#datepicker').datepicker('getDate'); 

    date2.setHours(0,0,0,0); 
    today.setHours(0,0,0,0); 
    tomorrow.setHours(0,0,0,0); 

    if (date2.getTime() == today.getTime()) { 
    //document.getElementById('datepicker').value=document.getElementById('datepicker').value+" (TODAY)"; 

     $('#datepicker').val($('#datepicker').val() + " (TODAY)"); 
    } else if (date2.getTime() == tomorrow.getTime()) { 
    //document.getElementById('datepicker').value=document.getElementById('datepicker').value+" (TOMORROW)"; 

     $('#datepicker').val($('#datepicker').val() + " (TOMORROW)"); 
    } else { 
     $('#datepicker').text(""); 

    } 
} 
function addDaysToDate() { 
    var date2 = $('#datepicker').datepicker('getDate'); 
    date2.setDate(date2.getDate() + 1); 
    $('#datepicker').datepicker('setDate', date2); 
    $('#datepicker').change(); 
} 

function subtractDaysToDate() { 
    var date2 = $('#datepicker').datepicker('getDate'); 
    date2.setDate(date2.getDate() - 1); 
    $('#datepicker').datepicker('setDate', date2); 
    $('#datepicker').change(); 
} 


</script> 
</head> 
<body> 

<input type="image" id="subtractDate" src="datedecrementer.png" /> 
<input type="text" id="datepicker" style="width:220px;border:0" /> 
<input type="image" id="addDate" src="dateincrementer.png" /> 



</body></html>

출처

2013-08-14 Aquarius24

당신은 당신의 요구에 맞는의 beforeShowDay 이벤트를 사용할 수 있습니다.

파라미터로서 날짜를 취하고있는 어레이 반환해야하는 함수 : 당신은 반환 할 수

[0]/참이 날짜를 선택할 수 있는지 여부를 나타내는 오류

[1] : 날짜 셀에 추가 할 CSS 클래스 이름 또는 기본 프레젠테이션의 경우 "" "

[2] :이 날짜에 대한 선택적 팝업 툴팁 [2] :이 기능은 이전에 날짜 피커에서 매일 가 표시됩니다. 이 경우

는 jQuery를 UI 툴팁 플러그인하지만 "일반"툴팁을 사용하지 않습니다.

코드 :

var disabledTool = new Date(); 
disabledTool.setDate(disabledTool.getDate() - 2); 
disabledTool.setHours(0, 0, 0, 0); 

$(function() { 
    $("#datepicker").datepicker({ 
     minDate: -0, 
     maxDate: "+1M +2D", 
     showOn: "button", 
     dateFormat: 'D dd MM yy', 
     showAnim: "clip", 
     beforeShowDay: function (date) { 
      var tooltipDate = "I'm DISABLED!!"; 
      if (date.getTime() == disabledTool.getTime()) { 
       return [true, '', tooltipDate]; 
      } else { 
       return [true, '', '']; 
      } 
     } 
    }); 
});

데모 : http://jsfiddle.net/IrvinDominin/cQFKN/

출처

2013-08-14 09:47:47

에드워드 : 나는 의심의 여지가있다. 내 코드는 모든 브라우저에서 정상적으로 작동하지만 IE에서는 날짜 선택 도구가 날짜를 선택한 후 자체를 닫지 않습니다. – Aquarius24

그것은 이상한 IE 버그가 될 수 있습니다, 오늘은 IE에서 확인할 수 없습니다. 내일보세요 (GMT +1) –

버그를 발견했습니다 .. 코드에서 주석 처리 된 부분을 참조하십시오. IE에서 문제를 일으키고 있습니다. 이제는 잘 작동합니다. – Aquarius24

비활성화 된 날짜에 대한 jquery 캘린더의 툴팁

답변

관련 문제