Question

我在我的应用程序中使用了jquery ui datepicker。它第一次正常工作，但导航到另一个页面后无法刷新页面。当我来到datepicker页面时，Datepicker无法正常工作。

@model FloorPlanner.Models.AuditViewModel
<script src="~/Scripts/jquery.ui.datepicker.js"></script>
<script>

    var startdate;
    var enddate;
    $(document).ready(function () {
        $(function () {
            $("#datepicker").datepicker(
      {
          dateFormat: 'yy, mm , dd',
          onSelect: function () {
              startdate = $(this).datepicker('getDate');
              startdate = (startdate.getFullYear()) + '/' + (startdate.getMonth() + 1) + '/' + (startdate.getDate());
   }
      })
        });
        $(function () {
            $("#datepicker2").datepicker(
          {
              dateFormat: 'yy, mm , dd',
              onSelect: function () {
                  enddate = $(this).datepicker('getDate');
                  enddate = (enddate.getFullYear()) + '/' + (enddate.getMonth() + 1) + '/' + (enddate.getDate() + 1);
              }
          })

        });
        $("#auditfilter").click(function () {
            $.ajax({
                type: 'POST',
                url: 'Floor/AuditFilter',
                data: {
                    startDate: startdate,
                    endDate: enddate
                },
                success: function (data) {
                    $('#divTOPutPartialViewIn').html(data);
                },
                error: function (data)
                {
                    alert("select date");
                },
                complete: function () { }
            });
        });
    });

</script>
<div class="panel panel-default">
    <div class="panel-heading">
        <div class="row">
            <div class="btn-toolbar" role="toolbar">
                <div class="btn-group btn-group-sm fp-btn-group-float-right">
                    <button class="btn btn-default" type="button" id="showTree">
                        <span class="glyphicon glyphicon-sort-by-attributes"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="panel-body fp-container-panel-body">
        <table class="input-group" style="padding-left: 5px;" border="0">
            <tr><td >Start Date
                <input type="text" id="datepicker"style="Height: 30px"/></td>
                <td style="padding-left: 10px">End Date <input type="text" id="datepicker2"style="Height: 30px" /></td>
                <td style="Height: 16px "><input id="auditfilter" type="button" value="Audit Trail" class="btn btn-primary" /></td>
            </tr>
        </table>


        <div id="divTOPutPartialViewIn">
        </div>
    </div>
</div>
@*@Scripts.Render("~/bundles/jqueryui") *@

我已经尝试在文件就绪功能中销毁了datepicker，同样尝试了刷新，没有任何工作，只有按F5我才能刷新整个应用程序。

我在包配置中包含了js，css文件。

由于

Answer 1

试试这个

 $(document).ready(function () {
var startdate;
var enddate;
            $("#DateOfBirth").datepicker({
                changeMonth: true,
                changeYear: true,
                yearRange: "-100:-18Y",
                dateFormat: 'dd-mm-yy',
                minDate: '-100Y',
                maxDate: '-18Y'
            });
         $("#datepicker2").datepicker(
          {
              dateFormat: 'yy, mm , dd',
              onSelect: function () {
                  enddate = $(this).datepicker('getDate');
                  enddate = (enddate.getFullYear()) + '/' + (enddate.getMonth() + 1) + '/' + (enddate.getDate() + 1);
              }
});

你在document.ready（function（）{}）中使用了function（）{$（＆＃34;＃DateOfBirth＆＃34;）。datepicker（）}。所以datepicker函数（）仅适用于文档就绪。我认为这是你的问题。试试吧。可能会工作。

Answer 2

首先，在尝试选择元素或使用jQuery修改之前，将<script>标记移动到页面底部以确保DOM已完全加载。

接下来，在您的$(document).ready(function() { });中，您有以下内容

$(document).ready(function() {
    $(function()) {
        $("#DateOfBirth")
    }

    $(function()) {
        $("#datepicker2")
    }
});

删除包含$(function()) { }个来电的.datepicker()个内容，一切正常。

它应该看起来像

$(document).ready(function() {
    $("#DateOfBirth").datepicker({ 
        //other stuff here
    });


    $("#datepicker2").datepicker({
        //other stuff here
    });
});

Jquery UI Datepicker刷新问题

2 个答案: