如何在bootstrap-datepicker中添加自定义按钮来设置日期和关闭日历？

Question

我的代码很简单，但我不明白如何在 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>

我试过了 $('.datepicker-days').append('test'); 此按钮用于附加代码但不起作用。

Answer 1

这是因为您试图将对象放入尚未创建的对象中。

所以我为您准备了这个示例，根据您的需要进行编辑。

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

如何在bootstrap-datepicker中添加自定义按钮来设置日期和关闭日历？

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

jquery

bootstrap-datepicker