bootstrap datepicker split into separate fields

Question

I'm trying to add a form to a page that will have a date picker. I connected the bootstrap datepicker, it works, but I have hidden it for now, if you remove display: none it will work

$(function () {
  $("#datepicker").datepicker({ 
        autoclose: true, 
        todayHighlight: true
  }).datepicker('update', new Date());
});

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;
}

<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="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>

What is the question, there are three fields, month, day and year. Is it possible to do something so that when you click on any of these three fields, a calendar opens, and when a date is selected, these fields are filled with the selected date?

See this: https://stackoverflow.com/a/1147768/17175441. I think you could get the height of the document and then subtract from it something like `300px` or so. — aerial, Dec 01 '21 at 15:14

0stone0 · Accepted Answer · 2022-01-21T15:39:31.707

Yes, using hooks like changeDate we can use getDate to get the selected date, then retrieve the day, month and year and insert those in the <input>:

// 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;
}

<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="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>

thank you very much, it works as it should in the snippet, but here the calendar does not open on my page while it is `style="display: none"` — , Jan 21 '22 at 15:43
Not sure what your'e trying to say. The picker is hidden by default, the show() and hide() functions toggle the display state. Maybe you can try to reproduce it in your question? — 0stone0, Jan 21 '22 at 15:44
I understand, but I don’t have a calendar displayed, in the code you can see that `display: block` becomes, but is not displayed — , Jan 21 '22 at 15:49
and if I'm in the `div` where I have the datepicker, I remove `display: none`, then everything works — , Jan 21 '22 at 15:50
You're local DOM is probably slightly different from your example here. It's hard to help you debug if we don't know the setup. Could you try to show the problem in a snippet? As you can see my demo works so not sure what field isn't working properly. — 0stone0, Jan 21 '22 at 15:55
https://imgur.com/a/ReoITtN this is what I get when I click on the field, but the datepicker is not displayed, everything seems to be the same as in the snippet, only z-index: 11, maybe there is a problem with it? — , Jan 21 '22 at 16:04
sorry, I understood what the problem is, I didn’t notice right away, the calendar is displayed, but at the top of the page itself, on the left, can I somehow make it appear after these fields? — , Jan 21 '22 at 17:43
Ahh that explains a lot. Well need to know more details about the Dom. There probably other elemts than in your original question. — 0stone0, Jan 21 '22 at 19:53
https://jsfiddle.net/dLeszxn6/1/ i added some content to your code and it's the same here, the calendar appears in a fixed place at the top of the page — , Jan 21 '22 at 20:16

score 0 · Answer 2 · answered Jan 21 '22 at 16:13

I have created a snippet, which works, let me provide some basic insights:

you need to handle a click event on all the three date parts
that click event can trigger a click event on the datepicker's calendar
the datepicker's change event needs to be handled
so that the three date parts are being filled whenever needed

$(function () {
  $("#datepicker").datepicker({ 
        autoclose: true, 
        todayHighlight: true
  }).datepicker('update', new Date());
    $("#datepicker .form-control").change(function(ev) {
        let parts = this.value.split("-");
        if (parts.length === 3) {
            document.getElementById("month").value = parts[0];
            document.getElementById("day").value = parts[1];
            document.getElementById("year").value = parts[2];
        }
    });
});

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;
}

<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="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" onclick='document.querySelector("#datepicker i").click()' id="month" type="text" name="month">
                    <input class="js-form-day" onclick='document.querySelector("#datepicker i").click()' id="day" type="text" name="day">
                    <input class="js-form-year" onclick='document.querySelector("#datepicker i").click()' 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>

the calendar is displayed, but at the top of the page itself, on the left, can I somehow make it appear after these fields? — , Jan 21 '22 at 18:02
@ch11 do you mean that you would like to show it below the three fields, so you would like both the three fields and the popped up calendar? — Lajos Arpad, Jan 22 '22 at 18:11
@ch11 I have applied a CSS hack, creating a `top: 60px !important;` rule that resolves this. Please test my snippet. — Lajos Arpad, Jan 23 '22 at 13:02

bootstrap datepicker split into separate fields

2 Answers2