javascript - 通过时间戳日期的数据库 json 列表设置日期选择器的禁用日期
问题描述
我想通过数据库中的列表禁用 flatpicker 插件中的日期。这是从数据库中获取它们的代码
public List<DateTime> DisablingDates()
{
List<DateTime> dates = new List<DateTime>();
var groups = OrderContext.Collection().GroupBy(o => o.DueDate);
foreach (var g in groups)
{
if (g.Count() == 2)
{
var val = g.Key.Date;
val.ToString("dd/MMM/yyyy");
dates.Add(val);
}
}
return dates;
}
我通过 viewbag 将列表传递给 jquery,但插件停止工作.. 浏览器调试器显示带有时间戳日期的 DisabledDates 数组,因此我尝试将它们转换为可读日期,但警报函数不显示值。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.6/flatpickr.min.js"></script>
<script>
$("#datepicker").flatpickr({
enableTime: false,
dateFormat: "d/M/Y",
defaultDate: new Date().fp_incr(2),
minDate: new Date().fp_incr(2),
maxDate: new Date().fp_incr(90),
disable:
function (date) {
var DisabledDates = @Html.Raw(Json.Encode(ViewBag.DisabledDates));
var array = [];
$.each(DisabledDates, function (index, value) {
var date1 = new Date(value * 1000).toDateString();
alert(index + ": " + date1);
array.push(date1);
});
var fulldmy = date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear();
if ($.inArray(fulldmy, array) === -1) {
return false;
} else {
return true;
}
},
});
浏览器调试器中的 DisabledDates 数组
function (date) {
var DisabledDates = ["\/Date(1599166800000)\/","\/Date(1599253200000)\/","\/Date(1599944400000)\/"];
var array = [];
然后我尝试将 JsonResult 操作与 ajax 方法一起使用,插件再次停止工作。
$("#datepicker").flatpickr({
enableTime: false,
dateFormat: "d/M/Y",
defaultDate: new Date().fp_incr(2),
minDate: new Date().fp_incr(2),
maxDate: new Date().fp_incr(90),
disable: function (date) {
$.ajax({
url: '@Url.Action("GetReservedDates", "Basket")',
type: "GET",
success: function (result) {
var fulldate = date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear();
if ($.inArray(fulldate, result) === -1) {
return false;
} else {
return true;
}
}
});
}
});
JsonResult 动作
[HttpGet]
public JsonResult GetReservedDates()
{
var dates = orderService.DisablingDates();
return Json(new { dates }, "text/x-json", JsonRequestBehavior.AllowGet);
}
这是我目前正在尝试的第二个插件。我该怎么办?
提前致谢。
解决方案
我发现是什么让插件停止工作.. disable 选项在数组括号 [] 之间有一个函数。然后为了将时间戳日期转换为可读日期,我将值编辑为仅包含从 /Date(1599166800000)/ 到 1599166800000 的毫秒数。最后,插件按预期禁用了数据库检索的日期。
$("#datepicker").flatpickr({
enableTime: false,
dateFormat: "d/M/Y",
defaultDate: new Date().fp_incr(2),
minDate: new Date().fp_incr(2),
maxDate: new Date().fp_incr(90),
disable: [Ddates],
onMonthChange: [Ddates],
});
function Ddates (date) {
var DisabledDates = @Html.Raw(Json.Encode(ViewBag.DisabledDates));
var array = [];
$.each(DisabledDates, function (index, value) {
value = value.replace("\\", "")
value = value.replace("/Date(", "")
value = value.replace(")\/", "")
var date1 = new Date(parseInt(value, 10)).toLocaleDateString();
array.push(date1);
});
date = date.toLocaleDateString();
return ($.inArray(date, array) != -1);
}
推荐阅读
- javascript - 如何使用 Discord.js 显示 .JSON 文件的内容?
- javascript - 如何将 module.exports 转换为 json 以用于 gulp 任务?
- javascript - 在输入法中输入文字后,搜索图标不可点击
- excel - 如何使用 pastespecial 转换 Application.Transpose 以仅放置值而不放置格式?
- c - 对 int 数组使用置换 (C)
- java - 使用 BroadcastReceiver 下载后打开文件
- objective-c - 等待 NSURLSESSION 数据在 CGRect Graph 中使用
- algorithm - 创建一个检查图是否连接的算法
- excel - VBA:For循环在For块外执行代码
- python - 在python中创建一个带有暂停功能的计时器