Question

主要问题解决但仍然无法使datepicker禁用。帖子底部有更多信息。

我正在使用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获取今天的日期。我读到我应该使用$.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>

-Controller -

    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做什么，但是我正在使用bootstrap datepicker并且在我的代码中执行完全相同的操作不起作用。我得到一个像08/27/19填充这个字段的日期。

编辑2：

当我做一些测试时，我设法修复了我自己的填充问题，而bootrap datepicker没有使用dateFormat:作为参数，那应该是format:。< / p>

但是我仍然无法将日期选择器禁用，因此它不会显示。它不需要显示，以便用户不能使用datepicker一次在readonly字段中编辑日期。

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

编辑3：

好吧，即使没有人回答我正在用我的答案更新这个帖子。我设法通过禁用一周的日期来解决问题。因此，如果有人想要做类似的事情，他们可以看看我的答案，但是我仍然感谢任何其他关于更好的方法来禁用选择器的建议。这只是bootstrap datepicker的一个问题。无论如何，见下文。

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

根据控制器无法正常工作的日期填充Bootstrap日期选择器

1 个答案: