主要问题解决但仍然无法使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的一个问题。无论如何,见下文。
答案 0 :(得分:0)
这是我的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);
}
}
})
});