Date picker on Service Portal - sideBySide

[Alex Macdonel]

On the Service Portal the date time picker is very nice but our users have told us that when they use the arrows to increase the hours they sometimes don't notice that the date changed and this causes problems.

The Options - Bootstrap 3 Datepicker   tell me we can show both date and times side by side but now the question is, how can I enable this behavior in the Portal?

[Alex Macdonel]

Alternatively, how can I lock the date so when users click up on the time and they go from 23 to 0 they don't advance the date by one?

[Community Alums]

Even I am facing the same issue..How can we achieve this.

Please suggest

[Community Alums]

hmurikinati

[Shahed Shah1]

Hi Alejandro

The docs are quite easy to follow. Rather than modifying a widget, I like to create widgets and put them into a test (playground) page. So I created a widget with the following HTML template to get the side by side behaviour:

<div class="container">
       <div class="row">
               <div class='col-sm-6'>
                       <div class="form-group">
                               <div class='input-group date' id='datetimepicker1'>
                                       <input type='text' class="form-control" />
                                       <span class="input-group-addon">
                                               <span class="glyphicon glyphicon-calendar"></span>
                                       </span>
                               </div>
                       </div>
               </div>
               <script>
                       $(function () {
                               $('#datetimepicker1').datetimepicker({
                                   sideBySide: true
                               });
                       });
               </script>
       </div>
</div>

As you can see, you can create a script block at the bottom of the page to dictate the behaviour of the datetime picker.

Hope this helps

Shahid