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?
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.
Helping you always. Don't forget to click "Mark as Answer" on the post that helped you.
♠ ASP.NET Core Tutorials → Start from the Beginning and become an Expert in 30 days time ♠
Member
429 Points
1829 Posts
Datepicker and timepicker for one text box
May 28, 2020 03:34 AM|asplearning|LINK
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.
Participant
1253 Points
935 Posts
Re: Datepicker and timepicker for one text box
May 28, 2020 02:12 PM|yogyogi|LINK
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.
♠ ASP.NET Core Tutorials → Start from the Beginning and become an Expert in 30 days time ♠
All-Star
58214 Points
15668 Posts
Re: Datepicker and timepicker for one text box
May 28, 2020 02:41 PM|bruce (sqlwork.com)|LINK
The library does not support this out of the box, but you can change the source
https://github.com/tempusdominus/bootstrap-4