I have a form where I remade the bootstrap datepicker a little by inserting my fields with inputs, everything works as it should. The only problem is the autocomplete that is used in browsers, and when you click on the field, the values have already been entered appear, for whom it is not clear what I mean

Maybe I can somehow change the input type so that this autocomplete does not exist? Or how can I fix this problem? It is important that at the same time the date selection in the form remains working

// Initialize datepicker
const dp = $("#month").datepicker({ 
    todayHighlight: true
});

// Show datepicker on <input> click  
$('.input-wrapper > input').on('click', (e) => dp.datepicker("show"));

// On date change
const y  = document.getElementById('year');
const m  = document.getElementById('month');
const d  = document.getElementById('day');

dp.on('changeDate',function(ev){
    const date = dp.datepicker('getDate');
    y.value = date.getFullYear();
    d.value = date.getDate();
    dp.datepicker('hide');
    m.value = date.getMonth()   1;
})

dp.on('hide',function(ev){
    const date = dp.datepicker('getDate');
    m.value = date.getMonth()   1;
})

label {
      color: #808694;
      font-family: Montserrat;
      font-size: 10px;
      font-weight: bold;
      letter-spacing: 0;
      line-height: 16px;
      text-transform: uppercase;
}


    
input {
      margin-right: 20px;
      box-sizing: border-box;
      outline: none;
      border: none;
      background-color: #F4F5F8;
      width: 50px;
}

.span-wrapper {
        display: flex;
        align-items: flex-end;
      }
      
span {
        
        color: #808694;
        font-family: Montserrat;
        font-size: 8px;
        font-weight: bold;
        letter-spacing: 0;
        line-height: 16px;
        text-transform: uppercase;
        text-align: center;
        width: 50px;
}

.main-content {
  min-height: 10vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>


<div >
  <p>Main content...</p>
  <p>Main content...</p>
  <p>Main content...</p>
  <p>Main content...</p>
  <p>Main content...</p>
  <p>Main content...</p>
  <p>Main content...</p>
  <p>Main content...</p>
  <p>Main content...</p>
</div>

<div >
    <form  action="{{ route('send-comment') }}">
        <div >
                <div >
                    <label for="name">Name *</label>
                    <div >
                        <input  id="name" type="text" name="name">
                    </div>
                </div>
            </div>
            <div >
                <div >
                    <label for="email">Email *</label>
                    <div >
                        <input  id="email" type="email" name="email">
                    </div>
                </div>
            </div>
        <div >
            <div >
                <label for="date">Select a date *</label>
                <div >
                    <input  id="month" type="text" name="month">
                    <input  id="day" type="text" name="day">
                    <input  id="year" type="text" name="year">
                    <div id="datepicker"  data-date-format="mm-dd-yyyy" style="display: none">
                        <input  type="text" readonly />
                        <span ><i ></i></span>
                    </div>
                </div>
        <div >
          <span for="month">Month</span>
          <span for="day">Day</span>
          <span for="year">Year</span>
        </div>
            </div>
        </div>
    </form>
</div>

CodePudding user response：

You have to set autocomplete to off on your form tag:

<form  action="{{ route('send-comment') }}" autocomplete="off">

Or only on your specific input field.

See: https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

CodePudding user response：

You must specify the autocomplete off input for each input like

<input autocomplete="off" name="myinputname... >

more info here: https://www.w3schools.com/tags/att_input_autocomplete.asp