javascript - 日期时间选择器 - Chrome 和 Firefox 之间的奇怪行为

Question

我昨天在注册表中添加了一个日期时间选择器，并在 Firefox 中对其进行了测试，因为我可以轻松地使用 Firebug，而且它工作得很好。今天，当我在 Chrome(我常用的浏览器)中尝试时，我发现在我的数据库中没有使用任何帐户(尽管它在 Firefox 中仍然有效)。我相信这是由于从日期时间选择器检索值的方式造成的。在 FireFox 中，允许您仅输入 00/00/2016 的格式似乎不起作用，因此它只是一个字符串框，但在 Chrome 中，格式工作正常。我假设我的 Javascript 可以很好地检索值，因为在 Firefox 中它是一个标准输入框，但在 Chrome 中，因为它是一个日期时间选择器框，所以我使用了错误的代码来检索值。

我的问题是，如何才能使其同时在两个浏览器中工作？或者更好的是如何修复 Firefox 中的日期时间选择器？提前致谢。

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

我将尝试使用日期时间选择器插件来回答这个问题，该插件可以很好地使用 Bootstrap 。插件链接 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:

要解决表单组对齐问题:

删除日期选择器input内的pull-right类。请参阅下面的标记:

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