DateTimePicker value is not consistent with displayed date

Question

After spending a while trying to figure out the datetimepicker I am hardly any closer to discovering the reason for this problem. The problem is that my datetimepicker submitted form value is never consistence with the displayed date. I have the date in the format DD/MM/YYYY, and wish all date inputs (both written and selected through calendar) to be this value. However, the submitted date is in the format the user writes, or in the format YYYY-MM-DD, but not consistent.

Because of this I can't really use the date submitted because it will format into the wrong date when using strtotime and so on.

I have added datetimepicker the following way:

<input type='text' class="form-control" id='datetimepicker1' name="birthday" ng-model="signUpInfo.birthday" placeholder="Fødselsdato" required="true">

<script type="text/javascript">
    $(function(){
        $("#datetimepicker1").datetimepicker({
            format: 'DD/MM/YYYY',
            minDate: moment().subtract(140,"years"), 
            maxDate: moment()
        });
    });
</script>

If I write: 01.01.17 -> formats into 01/01/2017 correctly -> back-end receives 01.01.17.

If I write: 01/01/2017 -> formats into 01/01/2017 correctly -> back-end receives 01/01/2017.

If I select: 01/01/2017 -> formats into 01/01/2017correctly -> back-end receives nothing.

So the displayed format is correct, but not the value being submitted, how come?

Answer 1

You need to trigger an change-Event after the datetimepicker altered the date format to update your scope variables.

$('#datetimepicker1').trigger('change')

You can bind this to the Bootstrap Datetimepicker Event 'dp.change'

$('#datetimepicker1').on('dp.change', function (ev) {
    $('#datetimepicker1').trigger('change')
});