根据从控制器传递的日期填充 Bootstrap 日期选择器不起作用

Question

主要问题已解决，但仍无法禁用日期选择器。更多信息在帖子底部。

我正在使用 MVC 5 并尝试在我的一个表单上使用 bootstrap datepicker。

我的视图是这样的：我有一个 ID 号字段，当填充来自我的国家的有效 ID（采用 yymmddxxxxxxx 的形式）时，需要禁用 datepicker（或停止显示日期选择器这样用户就无法在输入有效的 ID 号后编辑此字段），将datepicker 字段（DateOfBirth）readonly 并以yyyy-mm-dd. 格式填充出生日期。

目前，我使用 ajax 回调到我的控制器，该控制器调用一个类，该类验证 ID 号并将其返回为 yyyy/mm/dd (12:00:00) 之类的东西，并将从 ID 号中获得的性别传回。然后，在控制器中，我只需获取yyyy/mm/dd 以及性别，然后通过json 将其作为字符串传递回我的视图。

一切正常，但这就是我的问题所在。我现在想将 DOB 传递给datepicker，我尝试了多种不同的方法，但我无法正确格式化因为日期选择器获取今天的日期。我读到我应该使用$.datepicker.parseDate()，但是我无法让它工作，我得到一个类型错误$.datepicker is not defined 或parseDate is not a function，这取决于我如何尝试使用它。

我不知道除了上面我还需要提供什么其他信息。下面是我的代码。

-查看-

            <div class="form-group">
            <label class="col-sm-4 control-label">Date of Birth:</label>
            <div class="col-sm-6">
                @Html.TextBoxFor(model => model.DateOfBirth, "{0:yyyy-MM-dd}", new { @class = "form-control datepicker", @placeholder = "Select Date", @tabindex = "8"})
                @Html.ValidationMessageFor(model => model.DateOfBirth)
            </div>
        </div>

-控制器-

    public ActionResult GetDOBID(string idNo)
    {
        SAIdNumber CheckNumber = new SAIdNumber(idNo);

        if (CheckNumber.IsValid == true)
        {
            string dob = CheckNumber.DateOfBirth.ToString();
            dob = dob.Substring(0, 10);

            return Json(new
            {
                gender = CheckNumber.Gender,
                DOB = dob
            }, JsonRequestBehavior.AllowGet);
        }

        return Json(new { gender = "fail", DOB = "fail" }, JsonRequestBehavior.AllowGet);
    }

-Js-

     $('.datepicker').datepicker({
            dateFormat: "yy-mm-dd"

        });  

  $('#IdNumber').on('focusout', function () {
        var idNum = $(this).val();
        $.ajax({
            type: 'GET',
            url: '@Url.Action("GetDOBID", "Client")',
            data: { idNo: idNum },
            cache: false,
            success: function (data) {
                if (data.gender === "fail" || data.DOB === "fail") {

                        $('#Gender').removeAttr('readonly').val('');
                        $('#DateOfBirth').removeAttr('readonly').val('');
                        $("#DateOfBirth").datepicker('enable');
                }
                else {
                        $("#DateOfBirth").datepicker("disable");
                    var gend = 'F';
                    var date = new Date(data.DOB).toString('yy-mm-dd');

                    if (data.gender.toString() === '1') {
                        gend = 'M';
                    }

                    $('#Gender').val(gend);
                        $('#Gender').attr('readonly', true);

                    $('#DateOfBirth').datepicker('setValue', date);
                    $('#DateOfBirth').attr('readonly', true);

                }
            }
        })
    });

我知道var date = new Date(data.DOB).toString('yy-mm-dd'); 这行至少是错误的，因为 DOB 已经作为字符串传递了，但是我认为我根本不应该使用这行，这是在我得到之前由同事完成的根据他的说法，他显然曾经工作过，但当我不得不在屏幕上工作时就没有了。

我也想让这个日期选择器将今天的日期作为最大日期，但我似乎也无法让它工作。我尝试使用 maxDate: 0 or '0' 对其进行初始化，但没有成功。

在此页面上编辑用户时，我还需要使用数据库中的 DOB 自动填充日期选择器，这也是 yyyy-mm-dd 但是我假设一旦遇到主要问题并且格式问题得到解决就不会了不再是问题了。

提前致谢，如果我需要提供更多信息，请告诉我。

编辑： 我已经完成了一个基本的JsFiddle 来展示它应该使用 jquery UI 做什么，但是我正在使用引导程序 datepicker 并且在我的代码中执行完全相同的操作不起作用。我得到了一个像08/27/19 这样的日期填写该字段。

编辑 2：

好吧，当我在做一些测试时意识到引导程序日期选择器不使用dateFormat:作为参数并且应该是format:时，我设法解决了我自己的填充问题。

但是我仍然无法禁用日期选择器以使其不显示。它不需要显示，这样用户就无法通过使用日期选择器一次来编辑只读字段中的日期。

使用$('#DateOfBirth').datepicker('disable'); 或$('#DateOfBirth').datepicker('options: 'disabled'); 不起作用，我也无法使用preventdefault 获得功能。

编辑 3：

好吧，即使没有人回复，我也会用我的答案更新这个帖子。我设法通过禁用星期几来解决问题。因此，如果有人想做类似的事情，他们可以在下面查看我的答案，但是对于禁用选择器的更好方法，我仍然很感激任何其他建议。这只是引导日期选择器的问题。无论如何，请参见下文。

Answer 1

这是我禁用一周中的几天的 JS，请参阅原始主题了解我的问题是什么以及我如何在下面修复它们：

            $('.datepicker').datepicker({
            format: "yyyy/mm/dd",
            autoclose: true
        });

        $('#IdNumber').on('focusout', function () {
        var idNum = $(this).val();
        $.ajax({
            type: 'GET',
            url: '@Url.Action("GetDOBID", "Client")',
            data: { idNo: idNum },
            cache: false,
            success: function (data) {
                if (data.gender === "fail" || data.DOB === "fail") {

                        $('#Gender').removeAttr('readonly').val('');
                        $('#DateOfBirth').removeAttr('readonly').val('');

                        $('#DateOfBirth').datepicker('setDaysOfWeekDisabled', '');
                }
                else {
                    var gend = 'F';
                    if (data.gender.toString() === '1') {
                        gend = 'M';
                    }
                    pickerEnabled = false;
                    $('#DateOfBirth').datepicker('setDaysOfWeekDisabled', '0,1,2,3,4,5,6');
                    $('#Gender').val(gend);
                    $('#Gender').attr('readonly', true);
                    var date = data.DOB;
                    $("#DateOfBirth").datepicker({ pickTime: false });
                    $('#DateOfBirth').attr('readonly', true);
                    $("#DateOfBirth").datepicker('setDate', date);
                }
            }
        })
    });