CODEWITHSUNDEEP
javascriptangularjsdatepickercalendar
Pradeep
Pradeep

Reputation: 67

UI Bootstrap datepicker calendar doesn't show the date in the textbox

I have a page on my view and an option to edit that page. When the "edit" option is clicked, a child view comes up and shows all the editable field. One field is a datepicker which is binding to a modal.

The textbox contains the date, but when I open the calendar pop up, The date in the textbox is not highlighted in the calendar. I then select a different date and close the child view.

Now, when I open the calendar popup of another item, the date previously selected is highlighted. (the date in the textbox is different) I am stuck with this for a while now. 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 the 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);
            }
        };

Upvotes: 4

Views: 2656

Answers (3)

lolo
lolo

Reputation: 101

Just for help...

I had the same issue and, thanks to @Daniel answer, I just change my controller value to force Date type with moment.js

Before : 

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

After : 

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

And my html not change : 

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

Upvotes: 0

knaos
knaos

Reputation: 850

For me, the problem was that the input element I used for the datepicker was of type "text" and not "date".

So changing your code to this should do the trick.

<input type="date" />

Upvotes: 0

Daniel
Daniel

Reputation: 81

Apparently the ng-model 'ng-model $ - The date object. Needs to be a Javascript Date object.' when you click edit it comes from your server as a json and it's a string not a javascript date object thats why this is happening. Create a Date Object from that string and you should be fine, it worked for me!

EDIT: Found it on the docs https://angular-ui.github.io/bootstrap/#/datepicker under "uib-datepicker settings". Thanks @Johan Alkstål in https://jabbr.net/#/rooms/AngularJS for helping me figure this out.

Upvotes: 4

Related Questions