datepicker.js minDate에 대한 질문입니다.
본문
오늘은 7월 20일이고 minDate인 21일이 기본적으로 표시되어 있습니다.
달력이 로딩될 때, 21일의 백그라운드가 표시 안된 상태에서,
클릭하면 클릭한 날짜의 백그라운드 색상을 채우게 하고 싶습니다.
어떤 방법이 있을까요?
답변 2
https://jqueryui.com/datepicker/
https://api.jqueryui.com/datepicker/#option-beforeShow
beforeShow 옵션이 기대하는 기능에 도움이 될지 모르겠습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker({
minDate: '+1D',
// gotoCurrent: false,
beforeShow: function (input, dpobj) {
var widget = $( "#" + input.id ).datepicker( "widget" );
setTimeout(function () {
widget.find('a.ui-state-highlight').removeClass('ui-state-highlight');
widget.find('a.ui-state-hover').removeClass('ui-state-hover');
}, 0);
}
});
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
자바스크립트로 click event 를 처리하면 될것입니다.
addClass 와 removeClass 를 사용해서 하면 가능합니다.
링크를 보내주시면 달력의 클래스 어떤 것을 구성되어 있는지 알 수 있습니다.
없다면 클래스를 하나 만들어서 추가한 후 기준으로 삼으면 됩니다.
hasClass 와 findClass 를 사용하면 찾아서 클래스를 없애 주거나 하면 될 것입니다.
답변을 작성하시기 전에 로그인 해주세요.
