CODEWITHSUNDEEP
datepickerangular-meteor
matt_jay
matt_jay

Reputation: 1271

Date from input field not being stored

I set up my Angular-Meteor application to allow users editing their date of birth. I am using bootstrap3-datepicker on the input field.

The input field in the form is defined like this:

<div class="form-group">
    <label for="dateOfBirth" class="control-label">Date of Birth:</label>
    <input type="date" id="dateOfBirth" class="form-control" ng-model="profileEdit.profile.dateOfBirth"/>
</div>

Picking and displaying the date works fine in the front-end, but the date is not stored when I save my form (all other data is). If a date exists before editing the record with the form, the date gets lost.

This is my controller:

class ProfileEdit {
    constructor($stateParams, $scope, $reactive) {
        'ngInject';

        this.profile = Meteor.user().profile;

        $('#dateOfBirth').datepicker({
            format: "dd.mm.yyyy",
            weekStart: 1,
            startDate: "01.01.1940",
            startView: 2
        });

    }

    save() {

        var profile = {
            firstName: this.profile.firstName,
            lastName: this.profile.lastName,
            gender: this.profile.gender,
            dateOfBirth: this.profile.dateOfBirth,
            level: this.profile.level,
            description: this.profile.description
        }

        Meteor.call('users.profile.update', profile, function(error, result) {
            if(error){
                console.log("error", error);
            }
            if(result) {
                console.log('Changes saved!');
                profile = {}
            }
        });
    }

}

Logging profileEdit.profile.dateOfBirth to the console before saving the form data yields undefined.

It appears to me I am already losing the date between the form and my save() method. Why could this be?

Upvotes: 1

Views: 32

Answers (1)

Jarrod M
Jarrod M

Reputation: 61

I had the same issue with another datepicker, it appears that when a third party plugin updates the DOM, it does not update the modal that is attached to it. What I had to do was use the datepicker's events to catch the change and programatically update the field, IE:

$('.datepicker').datepicker()
    .on('changeDate', function(e) {

        // update your model here, e.date should have what you need

    });

http://bootstrap-datepicker.readthedocs.io/en/latest/events.html

Upvotes: 1

Related Questions