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



解决了主要问题,但仍然无法禁用日期选择器。更多信息见文章底部。

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

我的视图是这样的:我有一个ID号字段,当使用来自我所在国家的有效ID(采用yymmddxxxxxxx的形式)填充时,需要禁用datepicker(或停止显示日期选择器,以便用户在输入有效ID号后无法编辑此字段),将datepicker字段(出生日期)设为readonly,并用yyyy-mm-dd. 格式的出生日期填充该字段

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

所有这些都很好,但这就是我的问题所在。我现在想将DOB传递给datepicker,我已经尝试了很多不同的方法,但由于日期选择器获得了今天的日期,我无法将其正确格式化。我读到我应该使用$.datepicker.parseDate(),但我无法做到这一点,要么我会得到一个类型错误$.datepicker is not definedparseDate 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自动填充日期选择器,该DOB也是yyyy-mm-dd,但我认为一旦遇到主要问题并解决了格式问题,就不再是问题了。

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

编辑:我已经做了一个基本的JsFiddle来展示它应该使用jquery UI做什么,但我使用的是引导日期选择器,在我的代码中做完全相同的事情是不起作用的。我得到了一个像08/27/19这样的日期。

编辑2:

好吧,当我在做一些测试时意识到bootsrap日期选择器没有使用dateFormat:作为参数,应该是format:时,我设法解决了填充问题。

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

使用$('#DateOfBirth').datepicker('disable');$('#DateOfBirth').datepicker('options: 'disabled');都不起作用,而且我也无法在节目中使用preventdefault来获得函数。

编辑3:

好吧,尽管没有人回复,但我正在用我的答案更新这个帖子。我设法通过禁用一周的日期来解决这个问题。因此,如果有人想做类似的事情,他们可以看看我下面的答案。然而,我仍然很感激关于禁用选择器的更好方法的任何其他建议。这只是引导程序日期选择器的问题。无论如何,请参阅下文。

这是我的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);
                }
            }
        })
    });

最新更新