jQuery를 사용하여 Bootstrap Datepicker에서 특정 날짜를 비활성화하는 방법은 무엇입니까?

8619 단어 phpjavascriptjquerybootstrap
원래 게시된 @https://codeanddeploy.com 방문하여 샘플 코드 다운로드: https://codeanddeploy.com/blog/jquery/how-to-disable-specific-dates-in-bootstrap-datepicker-using-jquery

이 게시물에서는 부트스트랩 datepicker에서 특정 날짜를 비활성화하는 방법을 알려드리겠습니다. 때로는 비활성화된 특정 날짜를 비활성화하여 사용자가 선택할 수 없거나 사용자가 요구 사항을 충족하는 조건이 있는 경우 날짜를 비활성화해야 합니다.

운 좋게도 부트스트랩 datepicker는 이미 dateDisabled라는 옵션을 제공했으며 아래에서 볼 수 있듯이 비활성화 날짜 값을 배열 변수로 입력합니다.

var datesForDisable = ["08-5-2021", "08-10-2021", "08-15-2021", "08-20-2021"]

$('.datepicker').datepicker({
   format: 'mm-dd-yyyy',
   autoclose: true,
   todayHighlight: true,
   datesDisabled: datesForDisable
});


그게 다야. 이제 완전한 소스 코드를 보여드리겠습니다.

<!DOCTYPE html>
<html>
<head>
<title>How to Disable Specific Dates in Bootstrap Datepicker using jQuery?</title>
    <!-- Bootstrap 4 CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- Bootstrap Datepicker CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3 mt-5">
                <div class="card">
                    <div class="card-header">How to Disable Specific Dates in Bootstrap Datepicker using jQuery?</div>
                    <div class="card-body">

                        <form action="" method="post">
                            <div class="form-group">
                                <label for="date">Date</label>
                                <input type="text" class="form-control datepicker" placeholder="Date" name="date">
                            </div>
                          <button type="submit" class="btn btn-primary">Submit</button>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <!-- Bootstrap 4 JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <!-- Bootstrap Datepicker JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript">

        var datesForDisable = ["08-5-2021", "08-10-2021", "08-15-2021", "08-20-2021"]

        $('.datepicker').datepicker({
            format: 'mm-dd-yyyy',
            autoclose: true,
            todayHighlight: true,
            datesDisabled: datesForDisable
        });
    </script>
</body>
</html>


이 튜토리얼이 도움이 되었으면 합니다. 이 코드를 다운로드하려면 여기https://codeanddeploy.com/blog/jquery/how-to-disable-specific-dates-in-bootstrap-datepicker-using-jquery를 방문하십시오.

행복한 코딩 :)
Python에서 CSV를 읽은 후 MySQL 작업 (INSERT) 해보십시오 (mysql-connector-python)
신경망 사용 Pt.3

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage