Geek Answers Handbook

UI Bootstrap datepicker calendar does not display date in text box

I have a page in my view and the ability to edit this page. When the "Edit" button is clicked, a child view opens and all editable fields are displayed. One field is a date picker that is tied to a modal.

The text box contains a date, but when I open the calendar, the date in the text box does not stand out in the calendar. Then I select another date and close the child view.

Now, when I open the calendar popup of another item, the selected date is highlighted. (the date in the text box is different) I was stuck with this for a while. Below is my markup

 <div class="col-sm-4 ph-calendar">
                    <div class="input-group">
                        <input type="text"
                               id="duedate"
                               class="form-control"
                               datepicker-popup="{{dateFormat}}"
                               ng-model="milestone.duedate"
                               ph-validator="milestone.duedate"
                               ng-required="true"
                               is-open="datepickerOpenState.dueDateOpened"
                               datepicker-options="dateOptions"
                               ng-disabled="(isrecurring && isseries) || !permissions.canUpdateMilestones"
                               close-text="Close"
                               tooltip="dd/mm/yyyy"
                               tooltip-placement="bottom"
                               ph-datepicker-fix />                            

                        <span class="input-group-btn datepickerbtn">
                            <button type="button" class="btn btn-default" ng-click="openDatepicker($event, 'duedate')" ng-disabled="(isrecurring && isseries)  || !permissions.canUpdateMilestones">
                                <i class="fa fa-calendar"></i>
                            </button>
                        </span>
                    </div>
                </div>

This is my js

$scope.openDatepicker = function ($event, dateType, date) {
            $event.preventDefault();
            $event.stopPropagation();

            switch (dateType) {
                case 'duedate':
                    $scope.datepickerOpenState.dueDateOpened = true;
                    $scope.datepickerOpenState.completionDateOpened = false;
                    $scope.datepickerOpenState.startDateOpened = false;
                    $scope.datepickerOpenState.endDateOpened = false;                        
                    break;

I also do some formatting for datepicker

  ngModelCtrl.$render = function () {

            if (ngModelCtrl.$viewValue) {
            ngModelCtrl.$viewValue = new Date(ngModelCtrl.$viewValue);
            var dateVal = ngModelCtrl.$viewValue ? $filter('date')(ngModelCtrl.$viewValue, 'dd/MM/yyyy') : '';

            $element.val(dateVal);                                                         
            } else {
                $element.val(null);
            }
        };
+4
3

-, ng-model 'ng-model $- . Date Javascript. "", json, , javascript, . Date , , !

EDIT: https://angular-ui.imtqy.com/bootstrap/#/datepicker " uib-datepicker". @Johan Alkstål https://jabbr.net/#/rooms/AngularJS , .

+4

, , datepicker, "", "".

, .

<input type="date" />
0

Just for reference ...

I had the same problem, and thanks to @Daniel's answer, I just change the value of my controller to set the Date type with a .js moment

Before:

vm.popEstime = {
            opened: false,
            value: vm.currentData.DateEstime
        };

After:

vm.popEstime = {
            opened: false,
            value: moment(vm.currentData.DateEstime).toDate()
        };

And my html will not change:

<input ng-model="vm.popEstime.value" uib-datepicker-popup="dd/MM/yyyy" is-open="vm.popEstime.opened" type="text" required />
0
source

More articles:


All Articles