解决了主要问题,但仍然无法禁用日期选择器。更多信息见文章底部。
我正在使用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 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自动填充日期选择器,该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);
}
}
})
});