bootstrap datepicker fixed at the top of the page

I’m making a form that has a date picker, I’m using bootstrap datepicker

In addition, the main bootstrap field should be hidden, I have three of my own fields, when you click on any of them, the calendar should open, now everything works, the calendar opens, but is fixed at the top of the page. Can I make it open near the fields?

// Initialize datepicker
const dp = $("#datepicker").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();
    m.value = date.getMonth() + 1;
    dp.datepicker('hide')
})

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: 150vh;
}

.call-form-item-date {
  margin-top: 150px;
  margin-bottom: 150px;
}

<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 class="main-content">
  <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>
  <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 class="contacts-call-form">
    <form class="js-form" action="{{ route('send-comment') }}">
        <div class="col-md-6">
            <div class="call-form-item-date">
                <label for="date">Select a date *</label>
                <div class="input-wrapper">
                    <input class="js-form-month" id="month" type="text" name="month">
                    <input class="js-form-day" id="day" type="text" name="day">
                    <input class="js-form-year" id="year" type="text" name="year">
                    <div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy" style="display: none">
                        <input class="form-control" type="text" readonly />
                        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                    </div>
                </div>
        <div class="span-wrapper">
          <span for="month">Month</span>
          <span for="day">Day</span>
          <span for="year">Year</span>
        </div>
            </div>
        </div>
    </form>
</div>

Answer

If you want to display date picker near the inputs you should initialize it with id of date inputs like month.

// 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: 150vh;
}

.call-form-item-date {
  margin-top: 150px;
  margin-bottom: 150px;
}


.input-wrapper{
  position: relative;
}

<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 class="main-content">
  <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>
  <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 class="contacts-call-form">
    <form class="js-form" action="{{ route('send-comment') }}">
        <div class="col-md-6">
            <div class="call-form-item-date">
                <label for="date">Select a date *</label>
                <div class="input-wrapper">
                    <div id="datepickerContainer"></div>
                    <input class="js-form-month" id="month" type="text" name="month">
                    <input class="js-form-day" id="day" type="text" name="day">
                    <input class="js-form-year" id="year" type="text" name="year">
                    <div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy" style="display: none">
                        <input class="form-control" type="text" readonly />
                        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                    </div>
                </div>
        <div class="span-wrapper">
          <span for="month">Month</span>
          <span for="day">Day</span>
          <span for="year">Year</span>
        </div>
            </div>
        </div>
    </form>
</div>

Advertisement

Answer