在日期选择器中仅显示 5 天答案

【问题标题】：display only 5 days in datepicker在日期选择器中仅显示 5 天
【发布时间】：2018-03-11 13:29:54
【问题描述】：

我在我的代码中使用了一个 jquery datepicker 来进行用户输入。但是我有一个要求，我必须在我的 jquery datepicker 中只显示从特定日期开始的 5 天，不包括周末。请你帮忙，因为我是 jquery 的新手?

问候，米鲁

我已将 dat_eta 中的 5 天提取到隐藏变量中的数组中。现在我需要知道如何在日期选择器中仅启用这些天。

请在下面找到代码。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="JAVASCRIPT_CALENDAR_TESTING.WebForm1" %>
  <!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">

  <head runat="server">
    <link href="../Content/themes/jquery-ui.css" rel="stylesheet" />
    <script src="../Scripts/jquery-1.8.2.js"></script>
    <script src="../Scripts/jquery-ui-1.8.24.js"></script>
    <script>
      $(function() {
        $("#datepicker").datepicker();
      });
    </script>
    <title></title>
  </head>

  <body>
    <form id="form1" runat="server">
      <div>
        <table>
          <tr>
            <td>Request date:</td>
            <td><input type="text" id="datepicker" /></td>
            <% 
            int scm_date;
            scm_date = (9 / 24 + 1);
            DateTime dat_eta = DateTime.Now;
            string result;
            dat_eta = dat_eta.AddDays(scm_date);
            result = dat_eta.ToString("MM:dd:yyyy");
            string[] array = new string[6];
            for (int i = 0; i <= 5; i++) {
              if (i == 0) {} else {
                dat_eta = dat_eta.AddDays(1);
              }
              result = dat_eta.ToString("MM:dd:yyyy");
              array[i] = result;
            }
            hiddenvalue.Value = string.Join(",", array);
            %>
              <td><input type="hidden" id="hiddenvalue" name="hiddenvalue" runat="server" /></td>
          </tr>
        </table>
        <script type="text/javascript">
        </script>
      </div>
    </form>
  </body>

  </html>

【问题讨论】：

标签： c# jquery jquery-ui-datepicker

【解决方案1】：

您可以使用beforeShowDay option。

/*
 * let's assume your array is like the following one
*/
var datValues = ['03:11:2018','03:12:2018','03:13:2018'];


$("#datepicker").datepicker({
    beforeShowDay: function(date) {
        return [datValues.indexOf($.datepicker.formatDate('mm:dd:yy', date)) > -1];
    }
});

<link href="https://code.jquery.com/ui/1.8.24/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.24/jquery-ui.js"></script>


<form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>Request date:</td>
                <td><input type="text" id="datepicker"/></td>
                <td><input type="hidden" id="hiddenvalue" name="hiddenvalue" runat="server"/></td>
            </tr>
        </table>
    </div>
</form>

【讨论】：