locked
Datepicker and timepicker for one text box RRS feed

  • 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. 

    Thursday, May 28, 2020 3:34 AM

All replies

  • 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.

    Thursday, May 28, 2020 2:12 PM
  • 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

    Thursday, May 28, 2020 2:41 PM