display only 5 days in datepicker

I have used a jquery datepicker in my code for user input.But i have a requirement where i have to display only 5 days from a specific date in my jquery datepicker excluding weekends.Could you please assist as i am new to jquery?

Regards, Miru

I have fetched the 5 days from dat_eta in to an array in a hidden variable.Now i need to know how to enable only these days in the datepicker.

Please find the code below.

<%@ 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>

1 answer

  • answered 2018-03-11 14:24 gaetanoM

    You can use the 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>