Datepicker and timepicker for one text box

Question

User2108892867 posted

Hello everyone, I am trying to use this js library called tempusdominus (https://tempusdominus.github.io/bootstrap-4/Installing/). Here is the jsfiddle:

https://jsfiddle.net/zscL7h1n/

The html tag is like below:

<div class="container">
  <div class='col-md-5'>
    <div class="form-group">
      <div class="input-group date" id="datetimepicker7" data-target-input="nearest">
        <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker7" />
        <div class="input-group-append" data-target="#datetimepicker7" data-toggle="datetimepicker">
          <div class="input-group-text"><i class="fa fa-calendar"></i></div>
        </div>
        <div class="input-group-append" data-target="#datetimepicker7" data-toggle="datetimepicker">
          <div class="input-group-text"><i class="fa fa-clock-o"></i></div>
        </div>
      </div>
    </div>
  </div>
</div>

Here is the js script

$(function() {
  $('#datetimepicker7').datetimepicker({
    useCurrent: false,
    buttons: {
      showClose: true
    },
    collapse: true,
    allowInputToggle: true,
    format: "DD/MM/YYYY"
  });
});

As you can see I have two icons at the end of the textbox and I would love to have the date icon to invoke datepicker and the clock icon to invoke clock picker. After each selection, the textbox should have either date or date time information.

The format option is what control whether a datepicker or clock picker will show up. What I need is to somehow change the format option when each icon is clicked.  

How can that be done? Can I achieve this using library?

Thanks. 

Answer 1

User-2054057000 posted

As you can see I have two icons at the end of the textbox and I would love to have the date icon to invoke datepicker and the clock icon to invoke clock picker. After each selection, the textbox should have either date or date time information.

I think you will need to create 2 click events for these 2 icons first and then you then write the code to set format, and other things. Take a view to this Datepicker tutorial to get some ideas.

Answer 2

User-474980206 posted

The library does not support this out of the box, but you can change the source

https://github.com/tempusdominus/bootstrap-4