Question

我有一个脚本可以只使用beforeShowDay选择一些日期，当你点击其中一个日期时，将打开一个部分视图并显示一些数据。使用“后退”和“后退”两个按钮，在局部视图中显示的数据根据日期而变化。

但是内联日期选择器没有更新，我首先选择的日期仍然被选中，但它应该更改为下一个可选日期。你知道如何改变剧本以达到目的吗？

我尝试使用setDate设置Date，但我尝试过没有尝试过。他经常忘记所有可以选择或跳到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”方法从datepicker获取当前选定的日期。之后，您可以在数组中找到下一个日期（使用$ .inArray）并使用“setDate”方法将其分配给datepicker。

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 propertys？

1 个答案: