CODEWITHSUNDEEP
jquerybootstrap-datepicker
Saibal Kabir
Saibal Kabir

Reputation: 27

How to add custom button to set the date and close the calender in bootstrap-datepicker?

I have coded simple but I did not understand how to add a custom button here in the bootstrap-datepicker.

<!DOCTYPE html>
<html>
<head>
    <title>JS</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-datepicker.css">
</head>
<body>
    <div class="container">
        <hr>
        <div class="input-group date">
          <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
        </div>
    </div>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
  integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
  crossorigin="anonymous"></script>
<script type="text/javascript" src="js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="locales/bootstrap-datepicker.ja.min.js"></script>
  <script type="text/javascript">
        $('.input-group.date').datepicker({
            format: "yyyy/mm/dd",
            language: "ja",
            daysOfWeekDisabled: "0,6",
            daysOfWeekHighlighted: "0,6",
            datesDisabled: ['2019/08/06', '2019/08/21']
        });
        $('.datepicker-days').append('<tr><th colspan="7" class="custom">test</th></tr>');
  </script>
</body>
</html>

I tried $('.datepicker-days').append('test'); this button to append the code but not worked.

Upvotes: 0

Views: 1273

Answers (1)

Project Mayhem
Project Mayhem

Reputation: 569

It is because you are trying to put an object inside something that hasn't created yet.

So I prepared this sample for you, edit according to your needs.

 $("#FilterEndDate").on("click",function(){
    if($(".datepicker-dropdown").children("button").length == 0)
    {
       $(".datepicker-dropdown").append("<button>Test</button>");
    }
});

Upvotes: 1

Related Questions