如何删除显示引导程序上最后使用日期的工具提示？

Question

我用 bootstrap 创建了一个日期选择器。它主要按照我的意愿工作，但每次我单击该字段时，它都会显示我选择的最后几年。这会阻止日历视图并且也不是很有用..

到目前为止，这是我的脚本的一部分。另请参阅我所看到的图片。

<div class="bootstrap-iso">
        <div class="container-fluid">
          <div class="row"> 
            <div class="col-md-2"> <!-- Datepicker column -->
              <form method="post" id="date-form">
                <div class="form-group"> <!-- Date input 1-->
                  <label class="control-label" for="date">Start Date</label>
                  <input type="text" class="form-control" name="startDateN" id="startDate" placeholder="From" />
                </div>
                <div class="form-group"> <!-- Date input 2-->
                  <label class="control-label" for="date">End Date</label>
                  <input type="text" class="form-control" name="endDateN" id="endDate" placeholder="To" />
                </div>
                <div class="form-group"> <!-- Submit button -->
                  <button class="btn btn-primary " name="submit" type="submit">Submit</button>
                </div>
              </form>
            </div>

<div class="col-md-10"> <!-- Here comes the graph and the xAxis chooser -->
              <div id="plot-wrapper" style="position: relative; overflow: visible; margin: 10px;">
                <svg id="plotSVG" width="100%" height=400px></svg>
                <select id="select-x-var" style="position: absolute; bottom:0px; left: 670px;">
                  <option value="jastimmen" selected>% Ja-Stimmen</option>
                  <option value="thema">Thema</option>
                  <option value="unterthema">Unterthema</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>

<!-- Datapicker -->
      <script>
          $(document).ready(function(){
              var date_input=$('input[name="startDateN"]'); //our date input has the name "startDateN"
              var date_input1=$('input[name="endDateN"]'); //our date input has the name "endDateN"
              var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
              var from={
                  format: "yyyy",
                  viewMode: "years", 
                  minViewMode: "years",
                  autoclose:true,
                  showTooltip: false,
                  startView: 2,
                  defaultViewDate: {
                      year: '2000'
                  },
                  startDate: '-148y', //2023-1875
                  endDate: '+0y', //2023
                  todayBtn: false  
              };
  
              var to={
              format: "yyyy",
              viewMode: "years", 
              minViewMode: "years",
              autoclose:true,
              startView: 2,
              defaultViewDate: {
                  year: '2000'
              },
              startDate: date_input.val(), // Set the start date of "to" datepicker to the selected year from "from" datepicker
              endDate: '+0y' //2023
              };
  
              date_input.datepicker(from).on('changeDate', function(selected){
                  // Update the start date of the "to" datepicker when a new year is selected in the "from" datepicker
                  to.startDate = new Date(selected.date.getFullYear(), 0, 1);
                  date_input1.datepicker('setStartDate', to.startDate); // Update the "to" datepicker with the new start date
              });
              date_input1.datepicker(to);
          })
  
          // Get the submit button element
          const submitBtn = document.querySelector('button[type="submit"]');
  
          // Add an event listener to the submit button
          submitBtn.addEventListener('click', function(e) {
          e.preventDefault(); // Prevent the default form submission
  
          // Get the values of the datepickers
          const startDate = document.querySelector('input[name="startDateN"]').value;
          const endDate = document.querySelector('input[name="endDateN"]').value;
  
          // Do something with the startDate and endDate variables
          testing(startDate, endDate);
          });
      </script>
      </div>

我试着添加

showTooltip: false,

还有

beforeShowDay: function(date){
      return {
        tooltip: false
      }
    }

但两者都没有用。 （第二个我也看不懂，无奈之下求助chatgpt，结果是这样）

Answer 1

Adriaan，我相信出现在您面前的这个工具提示只是您输入的浏览器建议列表。

尝试在您的输入字段上设置此参数autocomplete="off":

<input type="text" class="form-control" name="startDateN" id="startDate" placeholder="From" autocomplete="off" />

你也可以尝试在 JS 中设置：

date_input.autocomplete = 'off';