html jquery在引导数据选择器上执行选择

ldxq2e6h 于 2023-03-16 发布在 jQuery

关注(0)|答案(2)|浏览(133)

伙计们，我正在使用bootstrap-datepicker，它是一个用户驱动的形式，当降落在datepicker页面，我有不同的选择，用户选择的日期为基础（正如你在数据中看到的）我想要的是让jquery触发点击今天的日期，它应该很简单，但不确定为什么jquery不执行点击今天的日期，但如果用户手动点击日期，一切正常。有人能帮帮忙吗。

$(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/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/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>

Html

来源：https://stackoverflow.com/questions/75707603/jquery-to-perform-select-on-bootstrap-datepicker

2条答案

按热度按时间

bogh5gae1#

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

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

// right after the datepicker initialization

赞(0）回复(0）举报 2023-03-16

polkgigr2#

如果我明白你的意思，这可能行得通。
您可以使用.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');
});

赞(0）回复(0）举报 2023-03-16

我来回答

html jquery在引导数据选择器上执行选择

2条答案

相关问题

热门标签

最新问答