0

Good day, by default I set a date in the format like this YYYY-MM-DD in the ui bootstrap datepicker input field using momentjs. The date shows correctly in the format I want it to be. when I select a different date it show correctly the input field but when I decide to console log the value a day is added to it and with a timezone (T00:00:00.000Z). here is a snippet of my html

<div class="row">
                <div class="col-md-6">
                    <label>Drawdown Ent. Date <span style="color: red;">*</span></label>
                    <input type="text" 
                           class="form-control" 
                           datepicker-popup="yyyy-MM-dd" 
                           ng-model="bookloan.drawdown_ent_date" 
                           is-open="drawdown_ent_date.open" 
                           ng-click="drawdown_ent_date.open = true" 
                           datepicker-options="entDateOptions" 
                           date-disabled="disabled(date, mode)" 
                           close-text="Close" />
                </div>
            </div>

here is a snippit of my JavaScript code:

$scope.bookloan.drawdown_ent_date = moment().format("YYYY-MM-DD");

What could cause this? Thanks in advance..

2
  • I've created a Plunker, not using moment.js (plnkr.co/edit/ZH7SD940lL2TXaUuHdVc?p=preview) and the watcher displays the correct date when the date picker is changed. Commented Mar 6, 2016 at 20:10
  • Also, $scope.dt = moment().format("YYYY-MM-DD"); gives an error. Commented Mar 6, 2016 at 20:19

1 Answer 1

1

I found the solution to my problem by using this directive:

app.directive('datepickerLocalDate', ['$parse', function ($parse) {
    var directive = {
        restrict: 'A',
        require: ['ngModel'],
        link: link
    };
    return directive;

    function link(scope, element, attr, ctrls) {
        var ngModelController = ctrls[0];

        // called with a JavaScript Date object when picked from the datepicker
        ngModelController.$parsers.push(function (viewValue) {
            // undo the timezone adjustment we did during the formatting
            viewValue.setMinutes(viewValue.getMinutes() - viewValue.getTimezoneOffset());
            // we just want a local date in ISO format
            return viewValue.toISOString().substring(0, 10);
        });

        // called with a 'yyyy-mm-dd' string to format
        ngModelController.$formatters.push(function (modelValue) {
            if (!modelValue) {
                return undefined;
            }
            // date constructor will apply timezone deviations from UTC (i.e. if locale is behind UTC 'dt' will be one day behind)
            var dt = new Date(modelValue);
            // 'undo' the timezone offset again (so we end up on the original date again)
            dt.setMinutes(dt.getMinutes() + dt.getTimezoneOffset());
            return dt;
        });
    }
}]);

And place directive name in the input element:

<div class="col-md-6">
                    <label>Drawdown Ent. Date <span style="color: red;">*</span></label>
                    <input type="text" 
                           class="form-control" 
                           datepicker-local-date
                           datepicker-popup="yyyy-MM-dd" 
                           ng-model="bookloan.drawdown_ent_date" 
                           is-open="drawdown_ent_date.open" 
                          ng-click="drawdown_ent_date.open = true" 
                           datepicker-options="entDateOptions" 
                           date-disabled="disabled(date, mode)" 
                           close-text="Close" />
                </div>
            </div>
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.