jquery 在 bootstrap-datepicker 上执行选择

Question

伙计们， 我正在使用 bootstrap-datepicker， 它是一个用户驱动的表单，当登陆日期选择器页面时，我有不同的选择供用户根据所选日期进行选择（如您在数据中所见） 我想要的是让 jquery 触发点击今天的日期。它应该很简单，但不确定为什么 jquery 在今天的日期不执行 .click。但是，如果用户确实手动单击日期，则一切正常。有人可以帮忙吗？

  $(document).ready(function() {
    $('#datepicker').datepicker();
 });
    
var data = {
"2023-03-11":[
{
"choice":"Apples",
},
{
"choice":"Cherry",
}
],
"2023-03-12":[
{
"choice":"Bananas",
},
{
"choice":"Oranges",
}
],
"2023-03-13":[
{
"choice":"Pineapple",
},
{
"choice":"Grapes",
}
],
"2023-03-14":[
{
"choice":"Plum",
},
{
"choice":"Pear",
}
]
}
      $('#datepicker').datepicker().on('changeDate', function(e) {
      
      $('#radioChoices').empty();
      
                var dateClick = e.format(0, "yyyy-mm-dd");
                var selected_data = data[dateClick];
                
      html = "";         
      for (let i = 0; i < selected_data.length; i++) {
      var d = selected_data[i]
      html = html + get_timeslot_div(d);


    }
    $('#radioChoices').append(html);
        });
      
      function get_timeslot_div(d) {
        return `<div>${d['choice']}</div>`
      }
      
      

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ==" crossorigin="anonymous"
    referrerpolicy="no-referrer"></script>
    
    
    
<div class="row">
  <div class="col-md-4 ">
    <div class="card-body shadow">
      <div id="datepicker" data-date="2023-03-11" data-date-start-date="2023-03-11" data-date-end-date="2023-03-14" data-date-format="yyyy-mm-dd">
      </div>
      <input type="text" id="radio_time_slot" hidden>
    </div>
  </div>

  <div class="col-md-8 ">
    <div id="radioChoices">

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

Answer 1

我不太确定你想要什么，但如果你想在创建日期选择器后立即执行点击事件，你可以使用：

$('td.active.day').trigger('click');

// right after the datepicker initialization

Answer 2

如果我理解你，这可能有用。

您可以使用

.datepicker('setDate', 'today')

方法，将日期设置为今天的日期并触发

changeDate

事件，从而使收音机选择相应地更新

$(document).ready(function() {
  $('#datepicker').datepicker().on('changeDate', function(e) {
    $('#radioChoices').empty();
    var dateClick = e.format(0, "yyyy-mm-dd");
    var selected_data = data[dateClick];
    html = "";         
    for (let i = 0; i < selected_data.length; i++) {
      var d = selected_data[i];
      html = html + get_timeslot_div(d);
    }
    $('#radioChoices').append(html);
  });

  // set the date to today and trigger the changeDate event
  $('#datepicker').datepicker('setDate', 'today');
});