causeway-standard-theme/causeway/docs/components/form-fields/date-input.html

<div class="container page">
  <div class="content pane single-pane">
    <section>
      <a id="forms-date"></a>
      <header class="content-header">
        <h1 class="title">
          Date
        </h1>
        <ul class="nav nav-pills">
          <li>
            <a href="#forms-date-single">
              Single Date
            </a>
          </li>
          <li>
            <a href="#forms-date-range">
              Date Range
            </a>
          </li>
        </ul>
      </header>
    </section>
    <section>
      <a id="forms-date-single"></a>
      <header class="content-header">
        <h3 class="title">
          Single Date
        </h3>
      </header>
      <p>
        Single date controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to the
        <code>&lt;input&gt;</code> tag, and classes should follow on from the surrounding <code>&lt;div&gt;</code>.
      </p>
      <table class="table table-striped">
        <thead>
          <tr>
            <th>
              Style
            </th>
            <th>
              Attribute
            </th>
            <th>
              Value
            </th>
            <th>
              Standard Example
            </th>
            <th>
              Inline Example
            </th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <td colspan="5">
            </td>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td>
              Standard
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
              <form role="form" class="form-horizontal">
                <div class="form-row">
                  <div class="form-group date">
                    <label for="date-field1a" class="control-label">Date:</label>

                    <div class="control-input">
                      <input type="text" class="form-control date" id="date-field1a" name="date_field1a" placeholder="Enter date" value=""/>
                      <span class="add-on">
                        <span class="fa fa-calendar"></span>
                      </span>
                      <input type="hidden" class="dates-disabled" value="20/11/2013,21/11/2013,22/11/2013,23/11/2013,24/11/2013,25/11/2013,26/11/2013"/>
                    </div>
                  </div>
                </div>
              </form>
            </td>
            <td>
              <form role="form" class="form-inline">
                <div class="form-row">
                  <div class="form-group date">
                    <label class="sr-only control-label" for="inline-date-field1a">Date:</label>

                    <div class="control-input">
                      <input type="text" class="form-control date" id="inline-date-field1a" name="inline_date_field1a" placeholder="Enter date" value="">
                    <span class="add-on">
                      <span class="fa fa-calendar"></span>
                    </span>
                      <input type="hidden" class="dates-disabled" value="20/11/2013,21/11/2013,22/11/2013,23/11/2013,24/11/2013,25/11/2013,26/11/2013"/>
                    </div>
                  </div>
                </div>
              </form>
            </td>
          </tr>
          <tr>
            <td>
              Disabled
            </td>
            <td>
              class
              <br/><br/>
              disabled
            </td>
            <td>
              disabled
              <br/><br/>
              disabled
            </td>
            <td>
              <form role="form" class="form-horizontal">
                <div class="form-row">
                  <div class="form-group date disabled">
                    <label for="date-field1b" class="control-label">Date:</label>

                    <div class="control-input">
                      <input type="text" disabled="disabled" class="form-control date" id="date-field1b" name="date_field1b" placeholder="Enter date" value="">
                    <span class="add-on">
                      <span class="fa fa-calendar"></span>
                    </span>
                      <input type="hidden" class="dates-disabled" value="20/11/2013,21/11/2013,22/11/2013,23/11/2013,24/11/2013,25/11/2013,26/11/2013"/>
                    </div>
                  </div>
                </div>
              </form>
            </td>
            <td>
              <form role="form" class="form-inline">
                <div class="form-row">
                  <div class="form-group date disabled">
                    <label class="sr-only control-label" for="inline-date-field1b">Date:</label>

                    <div class="control-input">
                      <input type="text" disabled="disabled" class="form-control date" id="inline-date-field1b" name="inline_date_field1b" placeholder="Enter date" value="">
                    <span class="add-on">
                      <span class="fa fa-calendar"></span>
                    </span>
                      <input type="hidden" class="dates-disabled" value="20/11/2013,21/11/2013,22/11/2013,23/11/2013,24/11/2013,25/11/2013,26/11/2013"/>
                    </div>
                  </div>
                </div>
              </form>
            </td>
          </tr>
          <tr>
            <td>
              Invalid
            </td>
            <td>
              class
            </td>
            <td>
              invalid
            </td>
            <td>
              <form role="form" class="form-horizontal">
                <div class="form-row">
                  <div class="form-group date invalid">
                    <label for="date-field1c" class="control-label">Date:</label>

                    <div class="control-input">
                      <input type="text" class="form-control date" id="date-field1c" name="date_field1c" placeholder="Enter date" value="">
                    <span class="add-on">
                      <span class="fa fa-calendar"></span>
                    </span>
                      <input type="hidden" class="dates-disabled" value="20/11/2013,21/11/2013,22/11/2013,23/11/2013,24/11/2013,25/11/2013,26/11/2013"/>
                    </div>
                  </div>
                </div>
              </form>
            </td>
            <td>
              <form role="form" class="form-inline">
                <div class="form-row">
                  <div class="form-group date invalid">
                    <label class="sr-only control-label" for="inline-date-field1c">Date:</label>

                    <div class="control-input">
                      <input type="text" class="form-control date" id="inline-date-field1c" name="inline_date_field1c" placeholder="Enter date" value="">
                    <span class="add-on">
                      <span class="fa fa-calendar"></span>
                    </span>
                      <input type="hidden" class="dates-disabled" value="20/11/2013,21/11/2013,22/11/2013,23/11/2013,24/11/2013,25/11/2013,26/11/2013"/>
                    </div>
                  </div>
                </div>
              </form>
            </td>
          </tr>
          <tr>
            <td>
              Read Only
            </td>
            <td>
              class
              <br/><br/>
              readonly
            </td>
            <td>
              readonly
              <br/><br/>
              readonly
            </td>
            <td>
              <form role="form" class="form-horizontal">
                <div class="form-row">
                  <div class="form-group date readonly">
                    <label for="date-field1d" class="control-label">Date:</label>

                    <div class="control-input">
                      <input type="text" class="form-control date" readonly="readonly" id="date-field1d" name="date_field1d" placeholder="Enter date" value="example">
                    <span class="add-on">
                      <span class="fa fa-calendar"></span>
                    </span>
                      <input type="hidden" class="dates-disabled" value="20/11/2013,21/11/2013,22/11/2013,23/11/2013,24/11/2013,25/11/2013,26/11/2013"/>
                    </div>
                  </div>
                </div>
              </form>
            </td>
            <td>
              <form role="form" class="form-inline">
                <div class="form-row">
                  <div class="form-group date readonly">
                    <label class="sr-only control-label" for="inline-date-field1d">Date:</label>

                    <div class="control-input">
                      <input type="text" class="form-control date" readonly="readonly" id="inline-date-field1d" name="inline_date_field1d" placeholder="Enter date" value="example">
                    <span class="add-on">
                      <span class="fa fa-calendar"></span>
                    </span>
                      <input type="hidden" class="dates-disabled" value="20/11/2013,21/11/2013,22/11/2013,23/11/2013,24/11/2013,25/11/2013,26/11/2013"/>
                    </div>
                  </div>
                </div>
              </form>
            </td>
          </tr>
        </tbody>
      </table>
      <h3 class="title">Code:</h3>
      <pre><code>
      &lt;div class=&quot;form-group date&quot;&gt;
        &lt;label class=&quot;control-label&quot; for=&quot;&lt;!-- Start input control ID goes here --&gt;&quot;&gt;&lt;!-- Start label text goes here --&gt;:&lt;/label&gt;
        &lt;div class=&quot;control-input&quot;&gt;
          &lt;input type=&quot;text&quot; class=&quot;form-control date&quot; id=&quot;&lt;!-- Start input control ID goes here --&gt;&quot; name=&quot;inline_date_field1c&quot; placeholder=&quot;Enter date&quot; value=&quot;&quot;&gt;
          &lt;span class=&quot;add-on&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-calendar-icon&quot;&gt;&lt;/span&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      </code></pre>
      <p>
        The date value is required to be in dd/mm/yyyy format to be correctly recognised.
      </p>

      <p>
        There is a hidden input that takes a list of comma separated dd/mm/yyyy values which marks the date as unavailable.
      </p>
    </section>
    <section>
      <a id="forms-date-range"></a>
      <header class="content-header">
        <h3 class="title">
          Date Range
        </h3>
      </header>
      <p>
        Date range controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to both of the
        <code>&lt;input&gt;</code> tags, and classes should follow on from the surrounding <code>&lt;div&gt;</code>.
      </p>
      <table class="table table-striped">
        <thead>
          <tr>
            <th>
              Style
            </th>
            <th>
              Attribute
            </th>
            <th>
              Value
            </th>
            <th>
              Standard Example
            </th>
            <th>
              Inline Example
            </th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <td colspan="5">
            </td>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td>
              Standard
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
              <form role="form" class="form-horizontal">
                <div class="form-row">
                  <div class="form-group date-range">
                    <label for="date-range-field1a-start" class="control-label">Start Date:</label>

                    <div class="control-input">
                      <input type="text" class="form-control date-range-start" id="date-range-field1a-start" name="date_range_field1a_start" placeholder="Enter start date" value="">
                    <span class="add-on">
                      <span class="fa fa-calendar"></span>
                    </span>
                    </div>
                    <div class="form-control-spacer"></div>
                    <label for="date-range-field1a-end" class="control-label">End Date:</label>

                    <div class="control-input">
                      <input type="text" class="form-control date-range-end" id="date-range-field1a-end" name="date_range_field1a_end" placeholder="Enter end date" value="">
                    <span class="add-on">
                      <span class="fa fa-calendar"></span>
                    </span>
                      <input type="hidden" class="dates-disabled" value="20/11/2013,21/11/2013,22/11/2013,23/11/2013,24/11/2013,25/11/2013,26/11/2013"/>
                    </div>
                  </div>
                </div>
              </form>
            </td>
            <td>
              <form role="form" class="form-inline">
                <div class="form-row">
                  <div class="form-group date-range">
                    <label class="sr-only control-label" for="inline-date-range-field1a-start">Start Date:</label>

                    <div class="control-input">
                      <input type="text" class="form-control date-range-start" id="inline-date-range-field1a-start" name="inline_date_range_field1a_start" placeholder="Enter start date" value="">
                    <span class="add-on">
                      <span class="fa fa-calendar"></span>
                    </span>
                    </div>
                    <div class="form-control-spacer"></div>
                    <label class="sr-only control-label" for="inline-date-range-field1a-end">End Date:</label>

                    <div class="control-input">
                      <input type="text" class="form-control date-range-end" id="inline-date-range-field1a-end" name="inline_date_range_field1a_end" placeholder="Enter end date" value="">
                    <span class="add-on">
                      <span class="fa fa-calendar"></span>
                    </span>
                      <input type="hidden" class="dates-disabled" value="20/11/2013,21/11/2013,22/11/2013,23/11/2013,24/11/2013,25/11/2013,26/11/2013"/>
                    </div>
                  </div>
                </div>
              </form>
            </td>
          </tr>
          <tr>
            <td>
              Disabled
            </td>
            <td>
              class
              <br/><br/>
              disabled
            </td>
            <td>
              disabled
              <br/><br/>
              disabled
            </td>
            <td>
              <form role="form" class="form-horizontal">
                <div class="form-row">
                  <div class="form-group date-range disabled">
                    <label for="date-range-field1b-start" class="control-label">Start Date:</label>

                    <div class="control-input">
                      <input type="text" disabled="disabled" class="form-control date-range-start" id="date-range-field1b-start" name="date_range_field1b_start" placeholder="Enter start date" value="">
                    <span class="add-on">
                      <span class="fa fa-calendar"></span>
                    </span>
                    </div>
                    <div class="form-control-spacer"></div>
                    <label for="date-range-field1b-end" class="control-label">End Date:</label>

                    <div class="control-input">
                      <input type="text" disabled="disabled" class="form-control date-range-end" id="date-range-field1b-end" name="date_range_field1b_end" placeholder="Enter end date" value="">
                    <span class="add-on">
                      <span class="fa fa-calendar"></span>
                    </span>
                      <input type="hidden" class="dates-disabled" value="20/11/2013,21/11/2013,22/11/2013,23/11/2013,24/11/2013,25/11/2013,26/11/2013"/>
                    </div>
                  </div>
                </div>
              </form>
            </td>
            <td>
              <form role="form" class="form-inline">
                <div class="form-row">
                  <div class="form-group date-range disabled">
                    <label class="sr-only control-label" for="inline-date-range-field1b-start">Start Date:</label>

                    <div class="control-input">
                      <input type="text" disabled="disabled" class="form-control date-range-start" id="inline-date-range-field1b-start" name="inline_date_range_field1b_start" placeholder="Enter start date" value="">
                    <span class="add-on">
                      <span class="fa fa-calendar"></span>
                    </span>
                    </div>
                    <div class="form-control-spacer"></div>
                    <label class="sr-only control-label" for="inline-date-range-field1b-end">End Date:</label>

                    <div class="control-input">
                      <input type="text" disabled="disabled" class="form-control date-range-end" id="inline-date-range-field1b-end" name="inline_date_range_field1b_end" placeholder="Enter end date" value="">
                    <span class="add-on">
                      <span class="fa fa-calendar"></span>
                    </span>
                      <input type="hidden" class="dates-disabled" value="20/11/2013,21/11/2013,22/11/2013,23/11/2013,24/11/2013,25/11/2013,26/11/2013"/>
                    </div>
                  </div>
                </div>
              </form>
            </td>
          </tr>
          <tr>
            <td>
              Invalid
            </td>
            <td>
              class
            </td>
            <td>
              invalid
            </td>
            <td>
              <form role="form" class="form-horizontal">
                <div class="form-row">
                  <div class="form-group date-range invalid">
                    <label for="date-range-field1c-start" class="control-label">Start Date:</label>

                    <div class="control-input">
                      <input type="text" class="form-control date-range-start" id="date-range-field1c-start" name="date_range_field1c_start" placeholder="Enter start date" value="">
                    <span class="add-on">
                      <span class="fa fa-calendar"></span>
                    </span>
                    </div>
                    <div class="form-control-spacer"></div>
                    <label for="date-range-field1c-end" class="control-label">End Date:</label>

                    <div class="control-input">
                      <input type="text" class="form-control date-range-end" id="date-range-field1c-end" name="date_range_field1c_end" placeholder="Enter end date" value="">
                    <span class="add-on">
                      <span class="fa fa-calendar"></span>
                    </span>
                      <input type="hidden" class="dates-disabled" value="20/11/2013,21/11/2013,22/11/2013,23/11/2013,24/11/2013,25/11/2013,26/11/2013"/>
                    </div>
                  </div>
                </div>
              </form>
            </td>
            <td>
              <form role="form" class="form-inline">
                <div class="form-row">
                  <div class="form-group date-range invalid">
                    <label class="sr-only control-label" for="inline-date-range-field1c-start">Start Date:</label>

                    <div class="control-input">
                      <input type="text" class="form-control date-range-start" id="inline-date-range-field1c-start" name="inline_date_range_field1c_start" placeholder="Enter start date" value="">
                    <span class="add-on">
                      <span class="fa fa-calendar"></span>
                    </span>
                    </div>
                    <div class="form-control-spacer"></div>
                    <div class="control-input">
                      <label class="sr-only control-label" for="inline-date-range-field1c-end">End Date:</label>
                      <input type="text" class="form-control date-range-end" id="inline-date-range-field1c-end" name="inline_date_range_field1c_end" placeholder="Enter end date" value="">
                    <span class="add-on">
                      <span class="fa fa-calendar"></span>
                    </span>
                      <input type="hidden" class="dates-disabled" value="20/11/2013,21/11/2013,22/11/2013,23/11/2013,24/11/2013,25/11/2013,26/11/2013"/>
                    </div>
                  </div>
                </div>
              </form>
            </td>
          </tr>
          <tr>
            <td>
              Read Only
            </td>
            <td>
              class
              <br/><br/>
              readonly
            </td>
            <td>
              readonly
              <br/><br/>
              readonly
            </td>
            <td>
              <form role="form" class="form-horizontal">
                <div class="form-row">
                  <div class="form-group date-range readonly">
                    <label for="date-range-field1d-start" class="control-label">Start Date:</label>

                    <div class="control-input">
                      <input type="text" class="form-control date-range-start" readonly="readonly" id="date-range-field1d-start" name="date_range_field1d_start" placeholder="Enter start date" value="example">
                    <span class="add-on">
                      <span class="fa fa-calendar"></span>
                    </span>
                    </div>
                    <div class="form-control-spacer"></div>
                    <label for="date-range-field1d-end" class="control-label">End Date:</label>

                    <div class="control-input">
                      <input type="text" class="form-control date-range-end" readonly="readonly" id="date-range-field1d-end" name="date_range_field1d_end" placeholder="Enter end date" value="example">
                    <span class="add-on">
                      <span class="fa fa-calendar"></span>
                    </span>
                      <input type="hidden" class="dates-disabled" value="20/11/2013,21/11/2013,22/11/2013,23/11/2013,24/11/2013,25/11/2013,26/11/2013"/>
                    </div>
                  </div>
                </div>
              </form>
            </td>
            <td>
              <form role="form" class="form-inline">
                <div class="form-row">
                  <div class="form-group date-range readonly">
                    <label class="sr-only control-label" for="inline-date-range-field1d-start">Start Date:</label>

                    <div class="control-input">
                      <input type="text" class="form-control date-range-start" readonly="readonly" id="inline-date-range-field1d-start" name="inline_date_range_field1d_start" placeholder="Enter start date" value="example">
                    <span class="add-on">
                      <span class="fa fa-calendar"></span>
                    </span>
                    </div>
                    <div class="form-control-spacer"></div>
                    <label class="sr-only control-label" for="inline-date-range-field1d-end">End Date:</label>

                    <div class="control-input">
                      <input type="text" class="form-control date-range-end" readonly="readonly" id="inline-date-range-field1d-end" name="inline_date_range_field1d_end" placeholder="Enter end date" value="example">
                    <span class="add-on">
                      <span class="fa fa-calendar"></span>
                    </span>
                      <input type="hidden" class="dates-disabled" value="20/11/2013,21/11/2013,22/11/2013,23/11/2013,24/11/2013,25/11/2013,26/11/2013"/>
                    </div>
                  </div>
                </div>
              </form>
            </td>
          </tr>
        </tbody>
      </table>
      <h3 class="title">Code:</h3>
      <pre><code>
      &lt;div class=&quot;form-group date-range&quot;&gt;
        &lt;label for=&quot;&lt;!-- Start input control ID goes here --&gt;&quot; class=&quot;control-label&quot;&gt;&lt;!-- Start label text goes here --&gt;:&lt;/label&gt;
        &lt;div class=&quot;control-input&quot;&gt;
          &lt;input type=&quot;text&quot; class=&quot;form-control date-range-start&quot; id=&quot;&lt;!-- Start input control ID goes here --&gt;&quot; name=&quot;&lt;!-- Start input control name goes here --&gt;&quot; placeholder=&quot;Enter start date&quot; value=&quot;&lt;!-- Start input control value goes here --&gt;&quot;&gt;
          &lt;span class=&quot;add-on&quot;&gt;
            &lt;span class=&quot;glyphicon glyphicon-calendar-icon&quot;&gt;&lt;/span&gt;
          &lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;form-control-spacer&quot;&gt;&lt;/div&gt;
        &lt;label for=&quot;&lt;!-- End input control ID goes here --&gt;&quot; class=&quot;control-label&quot;&gt;&lt;!-- End label text goes here --&gt;:&lt;/label&gt;
        &lt;div class=&quot;control-input&quot;&gt;
          &lt;input type=&quot;text&quot; class=&quot;form-control date-range-end&quot; id=&quot;&lt;!-- End input control ID goes here --&gt;&quot; name=&quot;&lt;!-- End input control name goes here --&gt;&quot; placeholder=&quot;Enter end date&quot; value=&quot;&lt;!-- End input control value goes here --&gt;&quot;&gt;
          &lt;span class=&quot;add-on&quot;&gt;
            &lt;span class=&quot;glyphicon glyphicon-calendar-icon&quot;&gt;&lt;/span&gt;
          &lt;/span&gt;
          &lt;input type=&quot;hidden&quot; class=&quot;dates-disabled&quot; value=&quot;&lt;!-- Input control excluded values go here --&gt;&quot;/&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      </code></pre>
      <p>
        The date value is required to be in dd/mm/yyyy format to be correctly recognized.
      </p>

      <p>
        There is a hidden input that takes a list of comma separated dd/mm/yyyy values which marks the date as unavailable.
      </p>
    </section>
  </div>
</div>