CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapweb-applicationsangular-ui-bootstrap
turner
turner

Reputation: 1746

Combine ui-bootstrap datepicker and timepicker using angularJS?

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!

Upvotes: 4

Views: 5343

Answers (3)

Sensei_Shoh
Sensei_Shoh

Reputation: 709

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.

Upvotes: 2

toskv
toskv

Reputation: 31600

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>

Upvotes: 0

Alberto Rivera
Alberto Rivera

Reputation: 3752

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?

Upvotes: 1

Related Questions