Date Time Picker - Odd behavior between Chrome and Firefox

Question

I added a Date Time Picker to my registration form yesterday and was testing it in Firefox, because I can use Firebug easily with it, and it worked fine. Today when I attempted it in Chrome (my usual browser) I found that no account is made in my database using (though it still works in Firefox). I believe it is something due to the way the value is retrieved from the Date Time Picker. In FireFox the formatting allowing you to only enter in 00/00/2016 doesn't seem to work and it therefore is simply a string box, however in Chrome the formatting works fine. I assume that my Javascript retrieves the value fine as in Firefox it's a standard entry box, but in Chrome as it is a Date Time picker box I'm using the wrong code to retrieve the value.

My question is, how can I make it work in both browsers at the same times? Or even better how can I fix the Date Time Picker in Firefox? Thanks in advance.

http://thomas-smyth.co.uk/register.php

                <div class="form-group">
                    <label>Date of Birth</label>
                    <input class="form-control" type="date" id="dteDoB"/>
                </div>

JS

function Register(){
    var Forename = $("#txtForename" ).val();
    var Surname = $("#txtSurname" ).val();
    var Password = $("#txtPassword").val();
    var PasswordR = $("#txtPasswordR").val();
    var DoB = $("#dteDoB").val();
    var Gender = $("#sltGender option:selected").val();
    var Response = grecaptcha.getResponse();
        $.post('functions/php/fncregister.php', {Forename: Forename, Surname: Surname, Password: Password, PasswordR: PasswordR, DoB: DoB, Gender: Gender, Response: Response}, function(data) {
            var returnValue = JSON.parse(data);
            if (returnValue['data'] == 0){
                $('#mdlInfo').html('<p>Your account has been created under the username: <strong><span id="spnUsername">'+returnValue['username']+'</span></strong>. You <strong>must</strong> remember this as you will require it to log into your account.</p><p>Your account has also been added to a moderation que. <strong>You must wait until a member of staff activates your account!</strong></p>');
                $("#mdlRegister").modal("show");
            }
            else if (returnValue['data'] == 1){
                $('#divError').html('<p class="text-center text-danger bg-danger" id="pUPInc">Passwords did not match!</p>');
            }
            else if (returnValue['data'] == 3){
                $('#divError').html('<p class="text-center text-danger bg-danger" id="pUPInc">An error occured when adding your details to the Database!</p>');
            }
            else if (returnValue['data'] == 4){
                $('#divError').html('<p class="text-center text-danger bg-danger" id="pUPInc">I don\'t like Robots! Make sure you complete the reCaptcha test.</p>');
            }
        });
}

Answer 1

I'll try to answer this using a datetime picker plugin that works well using bootstrap. Plugin link here.

Note that you need to call moment.js before you call the datetimepicker.js script.

$(function () {
   $('#dteDoB').datetimepicker({
     format: 'DD/MM/YYYY'
   });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script>

<div class="container">
  <br>
<div class='col-xs-5'>
  <div class="form-group">
     <div class='input-group date' id='dteDoB'>
        <input type='text' class="form-control" />
        <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
        </span>
     </div>
  </div>
</div>
</div>

New Update:

To fix the issue of your form-group alignment issue:

Remove the class pull-right inside you input for datepicker. See markup below:

<div class="form-group">
    <label>Date of Birth</label>
    <input type="text" class="form-control" id="dteDoB">
</div>