如何通过单击按钮设置日期选择器的日期而不丢失 beforeshowDay 属性？

Question

我有一个脚本，可以使用 beforeShowDay 只选择一些日期，当您单击这些日期之一时，将打开部分视图并显示一些数据。使用 "back" 和 "forth" 这两个按钮，部分视图中显示的数据会根据日期发生变化。

但是内联日期选择器没有更新，我第一次选择的日期仍然被选中，但它应该更改为下一个可选择的日期。您知道如何更改脚本来实现吗？

我尝试使用 setDate 设置日期，但没有任何效果。他经常忘记所有应该选择的日期或跳到2021年...可能我用错了...

我的视图看起来像这样：

Date: <div class="datepicker"></div>

<div id="month""></div> // partial view area

<input  id="Back" type="button" value="Back" style ="display:none"/>     
<input  id="Forth" type="button" value="Forth" style ="display:none" />

脚本看起来像这样：

 var dateObject
 var array = @Html.Raw(jsonObject)    

 $(function () {
     $(".datepicker").datepicker({
         numberOfMonths: 3,
         dateFormat: 'dd-m-yy',           
         beforeShowDay: function (date) {
        if ($.inArray($.datepicker.formatDate('yy-m-d', date), array) > -1) {
            return [true, "", " yes"];
        }
        else {
            return [false, "", "no"];
        }
         },
         onSelect: function () {

             var CID = parseInt(@ViewBag.CID);
             var IID = parseInt(@ViewBag.IID);
             var EID = parseInt(@ViewBag.EID);
             dateObject = $.datepicker.formatDate("yy-m-d", $(this).datepicker("getDate"));
             $('#Back').show();
             $('#Forth').show();
             $('#month').load('/History/IndexPartial?id=' + dateObject + '&EID=' + EID + '&CID=' + CID + '&IID=' + IID);
         }
     });

     $("#Back").click(function () {
         arraylenght = array.length;
         for (i = 0; i < arraylenght; i++) {
             if (array[i] == dateObject && i!=0)
             {
                 dateObject = array[i-1];
                 break;            
             }
         }
         var CID = parseInt(@ViewBag.CID);
         var IID = parseInt(@ViewBag.IID);
         var EID = parseInt(@ViewBag.EID);
         $('#month').load('/History/IndexPartial?id=' + dateObject + '&EID=' + EID + '&CID=' + CID + '&IID=' + IID);

     });        

     $("#Forth").click(function () {
         arraylenght = array.length;
         for (i = 0; i < arraylenght; i++) {
             if (array[i] == dateObject && i!= arraylenght-1) {
                 dateObject = array[i + 1];
                 break;
             }
         }
         var CID = parseInt(@ViewBag.CID);
         var IID = parseInt(@ViewBag.IID);
         var EID = parseInt(@ViewBag.EID);
         $('#month').load('/History/IndexPartial?id=' + dateObject + '&EID=' + EID + '&CID=' + CID + '&IID=' + IID);
     });

 });

我的控制器看起来像这样：

    public ActionResult Index(int EID = 0, int CID = 0, int IID= 0)
    {
        ViewBag.CID = CID;
        ViewBag.IID = IID;
        ViewBag.EID = EID;

        var historydates = db.Histories.Where(p => p.ESiteId == EID && p.CId == CID && p.IId == IID).OrderBy(s=> s.Date).Select(p => 
                SqlFunctions.DateName("yy", p.Date) + "-" +
                SqlFunctions.StringConvert((double)
                SqlFunctions.DatePart("mm", p.Date)).Trim() + "-" +
                SqlFunctions.DateName("dd", p.Date)).ToList();

        return View(historydates);
    }

    public PartialViewResult IndexPartial(DateTime? id, int EID, int CID, int IID)
    {
        ViewBag.Date = id;
        ViewBag.CID = CID;
        ViewBag.IID = IID;
        ViewBag.EID = EID;

        var model = db.Histories.Where(p => p.ESiteId == EID && p.CId == CID && p.IId == IID && p.Date == id).First();
        return PartialView("_IndexPartial", model);
    }

Answer 1

您可以使用 "getDate" 方法从日期选择器中获取当前选择的日期。之后，您可以在数组中找到下一个日期（使用 $.inArray）并使用 "setDate" 方法将其分配给日期选择器。

JavaScript:

var dateObject
var array = @Html.Raw(jsonObject)    

$(function () {
    $(".datepicker").datepicker({
        numberOfMonths: 3,
        dateFormat: 'dd-m-yy',           
        beforeShowDay: function (date) {
    if ($.inArray($.datepicker.formatDate('yy-m-d', date), array) > -1) {
        return [true, "", " yes"];
    }
    else {
        return [false, "", "no"];
    }
        },
        onSelect: function () {

            var CID = parseInt(@ViewBag.CID);
            var IID = parseInt(@ViewBag.IID);
            var EID = parseInt(@ViewBag.EID);
            dateObject = $.datepicker.formatDate("yy-m-d", $(this).datepicker("getDate"));
            $('#Back').show();
            $('#Forth').show();
            $('#month').load('/History/IndexPartial?id=' + dateObject + '&EID=' + EID + '&CID=' + CID + '&IID=' + IID);
        }
    });

    $("#Back").click(function () {
        var currDate = $('.datepicker').datepicker("getDate");
        var currDateIndex = $.inArray($.datepicker.formatDate('yy-m-d', currDate), array);

        // Boundary Condition
        if(currDateIndex > 0) 
        {
            var CID = parseInt(@ViewBag.CID);
            var IID = parseInt(@ViewBag.IID);
            var EID = parseInt(@ViewBag.EID);
            $('#month').load('/History/IndexPartial?id=' + array[currDateIndex-1] + '&EID=' + EID + '&CID=' + CID + '&IID=' + IID);
            $(".datepicker").datepicker("setDate",new Date(array[currDateIndex-1]));
        }
    });        

    $("#Forth").click(function () {
        var currDate = $('.datepicker').datepicker("getDate");
        var currDateIndex = $.inArray($.datepicker.formatDate('yy-m-d', currDate), array);

        // Boundary Condition
        if (currDateIndex < array.length - 1)
        {
            var CID = parseInt(@ViewBag.CID);
            var IID = parseInt(@ViewBag.IID);
            var EID = parseInt(@ViewBag.EID);
            $('#month').load('/History/IndexPartial?id=' + array[currDateIndex + 1] + '&EID=' + EID + '&CID=' + CID + '&IID=' + IID);
            $(".datepicker").datepicker("setDate", new Date(array[currDateIndex + 1]));
        }
    });
});

如何通过单击按钮设置日期选择器的日期而不丢失 beforeshowDay 属性？

How to setDate of the datepicker with button click without loosing beforeshowDay propertys?

javascript

jquery

datepicker

asp.net-mvc-4