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?

Are you overriding the submit of the form and getting data yourself somehow? — Alexandru Severin
– Alexandru Severin, Commented Jan 4, 2017 at 14:46
@AlexandruSeverin The form is not being overriden, the only "override" is whenever the user itself types a date into the input field, but then again, datetimepicker formats this properly in display, but not in the value. — Gjert
– Gjert, Commented Jan 4, 2017 at 14:50
I cannot replicate your problem. Try this jsfiddle: jsfiddle.net/0Ltv25o8/4390 . Import your own version of datetimepicker. Maybe you can reproduce the problem or find the answer while trying to. — Alexandru Severin
– Alexandru Severin, Commented Jan 4, 2017 at 14:57
@AlexandruSeverin, this one isnt similar... Because you cant type in a date by hand, and have it reformatted automatically. UPDATE: Or wait... let me try this... — Gjert
– Gjert, Commented Jan 4, 2017 at 15:00

pixelarbeit · Accepted Answer · 2017-01-04 15:53:25Z

2

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')
});

answered Jan 4, 2017 at 15:53

pixelarbeit

4942 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gjert Over a year ago

This worked perfectly! However, why doesnt datetimepicker have this built-inn? Who would want date format for display ONLY?

pixelarbeit Over a year ago

Datetimepicker uses jQuery. The rest ist AngularJS. It would send the data correctly as a pure HTML form input, but not together with AngularJS.

Collectives™ on Stack Overflow

DateTimePicker value is not consistent with displayed date

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related