Combine ui-bootstrap datepicker and timepicker using angularJS?

Question

I'm working on a web app which makes use of UI-Bootstrap's datepicker and timepicker directives. For the datepicker I am using a simple popup dialog, and for the timepicker I simply have the dialog on the page next to the datepicker.

Unfortunately I am having difficulty getting these two directives to work together. When the user selects a date, everything works correctly, but when the timepicker is updated, I'm not sure how to get it to consequently update the datepicker as well.

I considered two options for getting around this, the first one was to have the timepicker simply update the ng-model of the datepicker whenever it is changed, but unfortunately this does not also retroactively change what is displayed on the datepicker, so does not work for me. The second option I thought about was having the directives interact with each other, but unfortunately I am a novice at looking at and editing directives, so would need some help with this solution.

If anyone knows of a way to achieve what I want with the dynamic updates, please give me any advice you can offer.

Here is the HTML of my schedule view from the Plunker, which is attache below:

<div class="col-md-12 container-fluid" style="padding-bottom:20px">
  <div class="container-fluid" ng-style="vm.contentStyle">
    <h2>Schedule</h2>
    <!-- DatePickers -->
    <div class="col-md-11" style="padding-bottom:20px">

      <div class="col-md-6">

        <p><label class="control-label" style="color:#AAB4BE" for="startDate">{{ vm.displayName }}</label></p>
        <p class="input-group">
          <input type="text" class="form-control" ng-change="vm.datePick()" datepicker-popup="yyyy-MM-dd HH:mm" id="startDate" ng-model="vm.date" is-open="vm.opened.start" datepicker-options="vm.dateOptions" ng-required="true" close-text="Close" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="vm.open($event, 'start')"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>

      </div>

      <div class="col-md-6" style="padding-top:2px">

        <timepicker ng-show="vm.date" ng-model="vm.time" ng-change="vm.timePick()" show-meridian="false"></timepicker>

      </div>
    </div>
  </div>
</div>

Here is a plunker with an example of what I am trying to do. If there is anything further I can provide that would help with answering this question, please let me know!

Sensei_Shoh · Accepted Answer · 2016-07-14 21:17:45Z

2

Unfortunately you can't just update the model so you have to break the reference by reassigning the model with the new value. I forked the plunker above and fixed it in this version.

vm.pickTime = function(dateTimestamp) {
  var newDate = new Date(dateTimestamp);
  newDate.setHours(vm.time.getHours());
  newDate.setMinutes(vm.time.getMinutes());
  vm.date = newDate;
};

I also introduced a form element to make things a little more clean.

answered Jul 14, 2016 at 21:17

Sensei_Shoh

7547 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alberto Rivera · Accepted Answer · 2015-08-30 20:52:27Z

1

I found a Plunker that may help you.

http://plnkr.co/edit/QujX5A?p=preview

<datetimepicker min-date="minDate" show-weeks="showWeeks" hour-step="hourStep" 
  minute-step="minuteStep" ng-model="date" show-meridian="showMeridian" 
  date-format="dd-MMM-yyyy" date-options="dateOptions"
  date-disabled="disabled(date, mode)" 
  readonly-date="false"
  readonly-time="false"></datetimepicker>

Is this what you were looking for?

answered Aug 30, 2015 at 20:52

Alberto Rivera

3,7623 gold badges23 silver badges33 bronze badges

1 Comment

turner Over a year ago

That could be helpful ultimately if I decide not to go the route I have been trying. If I display the date/time in another location, this solution will be good for me, but currently I am trying to get the actual information in the datepicker itself to update.

toskv · Accepted Answer · 2015-08-30 20:58:37Z

0

Your plunker has typos in it. You defined vm.pickTime and vm.pickDate in the controller and called vm.timePick and vm.datePick in html.

I fixed them in this plunker.

<timepicker ng-show="vm.date" ng-model="vm.time" ng-change="vm.pickTime()" show-meridian="false"></timepicker>

answered Aug 30, 2015 at 20:58

toskv

31.8k7 gold badges77 silver badges77 bronze badges

1 Comment

turner Over a year ago

Okay thanks, I updated them in my plunker as well! Although this does not solve my problem.

Collectives™ on Stack Overflow

Combine ui-bootstrap datepicker and timepicker using angularJS?

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related