causeway-standard-theme
Version:
1,015 lines (975 loc) • 43.4 kB
HTML
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2, minimum-scale=0.25">
<title>Causeway Theme</title>
<!--Favicon-->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../css/causeway-utils.css" rel="stylesheet" media="screen">
<link href="../css/causeway-standard.css" rel="stylesheet" media="screen">
<link href="../docs/css/docs.css" rel="stylesheet" media="screen">
<link href="../css/causeway-print.css" rel="stylesheet" media="print">
</head>
<body>
<div class="container site-header">
<div class="site-header-holder">
<div class="site-heading">
<div class="site-logo"></div>
<h1 class="page-title">Causeway Style</h1>
<div class="account-management dropdown">
<div class="user-avatar">
<img src="../images/image_placeholder.png">
</div>
<div class="user-info">
<a data-toggle="dropdown" href="#">Hello Guest <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a>Logout</a>
</li>
</ul>
</div>
</div>
</div>
<nav class="navbar site-menu" role="navigation">
<div class="resp-back hidden-lg hidden-md">
<a href="#"><span class="fa fa-chevron-left"></span></a>
<span class="title">MENU</span>
</div>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="../docs/index.html#style" data-hover="dropdown"> Style <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/index.html#build"> Build Instructions </a>
</li>
<li>
<a href="../docs/index.html#javascript"> Javascript </a>
</li>
<li>
<a href="../docs/index.html#stylesheets"> Stylesheets </a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="../docs/shells.html#shells" data-hover="dropdown"> Shells <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="../docs/content.html#content"> Content </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/content.html#content-email"> Emails </a>
</li>
<li>
<a href="../docs/content.html#content-link"> Links </a>
</li>
<li>
<a href="../docs/content.html#content-page-header"> Page Header </a>
</li>
</ul>
</li>
<li>
<a href="../docs/shells.html#footer"> Footer </a>
</li>
<li>
<a href="../docs/shells.html#header"> Header </a>
</li>
<li>
<a href="../docs/left-navigation.html#left-navigation"> Left Navigation </a>
</li>
<li>
<a href="../docs/login.html"> Login page </a>
</li>
<li>
<a href="../docs/shells.html#single-pane"> Single Pane </a>
</li>
<li>
<a href="/docs/twopane-horizontal.html#twopane-horizontal"> Two Pane - Horizontal </a>
</li>
<li>
<a href="../docs/left-navigation-rightpane.html#leftnav-twopane"> Two Pane - Horizontal (Left Navigation Shell) </a>
</li>
<li>
<a href="../docs/twopane-vertical.html#twopane-vertical"> Two Pane - Vertical </a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="../docs/components.html#components" data-hover="dropdown"> Components <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/accordion.html#accordion"> Accordion </a>
</li>
<li>
<a href="../docs/breadcrumb.html#breadcrumb"> Breadcrumb </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/buttons.html#buttons"> Buttons </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/buttons.html#buttons-arrow"> Arrow Button </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-icon"> Icon Buttons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-multi-action"> Multi-action Buttons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-standard"> Standard Buttons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-standard-icons"> Standard Buttons with Icons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-text"> Text Button </a>
</li>
</ul>
</li>
<li>
<a href="../docs/components.html#dialog-box"> Dialog Box </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/forms.html#forms"> Forms </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/forms.html#forms-advanced-listbox"> Advanced Listbox </a>
</li>
<li>
<a href="../docs/forms.html#forms-checkbox"> Checkbox </a>
</li>
<li>
<a href="../docs/forms.html#forms-color"> Color </a>
</li>
<li>
<a href="../docs/forms.html#forms-currency"> Currency </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/date.html#forms-date"> Date </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/date.html#forms-date-range"> Date Range </a>
</li>
<li>
<a href="../docs/date.html#forms-date-single"> Single Date </a>
</li>
</ul>
</li>
<li>
<a href="../docs/forms.html#forms-email"> Email </a>
</li>
<li>
<a href="../docs/forms.html#forms-file"> File </a>
</li>
<li>
<a href="../docs/forms.html#forms-hyperlink"> Hyperlink </a>
</li>
<li>
<a href="../docs/forms.html#forms-image"> Image </a>
</li>
<li>
<a href="../docs/forms.html#forms-password"> Password </a>
</li>
<li>
<a href="../docs/forms.html#forms-radio"> Radiobutton </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/select.html#forms-select"> Select </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/select.html#forms-select-multiple"> Multiple Choice </a>
</li>
<li>
<a href="../docs/select.html#forms-select-single"> Single Choice </a>
</li>
</ul>
</li>
<li>
<a href="../docs/forms.html#forms-select-shuttle"> Select Shuttle </a>
</li>
<li>
<a href="../docs/forms.html#spinbox"> Spinbox </a>
</li>
<li>
<a href="../docs/forms.html#forms-telephone"> Telephone </a>
</li>
<li>
<a href="../docs/forms.html#forms-text"> Text </a>
</li>
<li>
<a href="../docs/forms.html#forms-textarea"> Textarea </a>
</li>
<li>
<a href="../docs/forms.html#forms-time"> Time </a>
</li>
<li>
<a href="../docs/forms.html#forms-tristate"> Tristate </a>
</li>
</ul>
</li>
<li>
<a href="../docs/components.html#lightbox"> LightBox </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/menus.html#menus"> Menus </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/menus.html#menus-dropdown"> Dropdown Menu </a>
</li>
<li>
<a href="../docs/menus.html#menus-dropdown-site"> Site Menu </a>
</li>
<li>
<a href="../docs/menus.html#menus-dropdown-page"> Page Menu </a>
</li>
<li>
<a href="../docs/menus.html#menus-three-line"> Three Line Menu </a>
</li>
</ul>
</li>
<li>
<a href="../docs/pagination.html#pagination"> Pagination </a>
</li>
<li>
<a href="../docs/site-notification.html#site-notification"> Site Notification </a>
</li>
<li>
<a href="../docs/status-indicator.html#status-indicator"> Status Indicator </a>
</li>
<li>
<a href="../docs/table.html#table"> Table </a>
</li>
<li>
<a href="../docs/components.html#tabstrip"> Tabstrip </a>
</li>
<li>
<a href="../docs/misc.html#tooltip"> Tooltip </a>
</li>
<li>
<a href="../docs/treegrid.html#treegrid"> Tree Grid </a>
</li>
<li>
<a href="../docs/treelist.html#treelist"> Tree List </a>
</li>
<li>
<a href="../docs/treesearchlist.html#treesearchlist"> Tree Search List </a>
</li>
<li>
<a href="../docs/treeview.html#treeview"> Tree View </a>
</li>
<li>
<a href="../docs/wizard.html#wizard"> Wizard </a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="../docs/icons.html#content-icons" data-hover="dropdown"> Icons <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/icons.html#favicon"> Favicon and App Icons </a>
</li>
<li>
<a href="../docs/icons.html#content-icons-available"> Available Icons </a>
</li>
<li>
<a href="../docs/icons.html#content-icons-use"> How to use </a>
</li>
</ul>
</li>
<li>
<a href="../docs/color-palette.html#color-palette"> Color Palette </a>
</li>
<li>
<a href="../index.html"> Download </a>
</li>
</ul>
<div class="additional-nav-info">
<ol class="breadcrumb">
<li><a href="#">Causeway LTD</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Company Name <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Sub Company A</a></li>
<li><a href="#">Sub Company B</a></li>
<li><a href="#">Sub Company C</a></li>
<li class="link"><a href="#">More</a></li>
</ul>
</li>
</ol>
<span class="cs-badge has-count">
<a href="#">
<span class="fa fa-shopping-cart"></span>
<span class="cs-badge-count">5</span>
</a>
</span>
<span class="site-notification has-notification">
<a href="#">
<span class="fa fa-bell"></span>
<span class="notification-count">5</span>
</a>
</span>
<span class="cs-badge has-count">
<a href="#">
<span class="fa fa-envelope"></span>
<span class="cs-badge-count">5</span>
</a>
</span>
<span class="additional-menu">
<a href="#" data-toggle="dropdown"> <span class="glyphicon glyphicon-threeLine-menu"></span> </a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Site Map</a></li>
<li><a href="#">Application Sample</a></li>
</ul>
</span>
</div>
</nav>
</div>
</div>
<!--Notification block starts here-->
<section class="notification-content-right">
<div class="notification-content-wrapper">
<div class="notification-header">
<h2>Notifications</h2>
</div>
<div class="notification-content">
<ul>
<li>
<strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.
</li>
<li>
<strong>It is a paradisematic country,</strong>in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
<a href="#">Find out more.</a>
</li>
<li>
<strong>It is a paradisematic country,</strong>in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
<a href="#">Find out more.</a>
</li>
<li>
You have <strong>One New</strong> Pending Invitation:
<a href="#">Carillion AMBS Limited</a>.
<a href="#" class="close glyphicon glyphicon-close"></a>
</li>
<li>
You have <strong>One New</strong> Pending Invitation:
<a href="#">Amey Group Services Ltd</a>.
<a href="#" class="close glyphicon glyphicon-close"></a>
</li>
<li>
You have <strong>One New</strong> Pending Invitation:
<a href="#">Amey Group Services Ltd</a>.
<a href="#" class="close glyphicon glyphicon-close"></a>
</li>
</ul>
</div>
</div>
</section>
<!--Notification block ends here-->
<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><input></code> tag, and classes should follow on from the surrounding <code><div></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>
<div class="form-group date">
<label class="control-label" for="<!-- Start input control ID goes here -->"><!-- Start label text goes here -->:</label>
<div class="control-input">
<input type="text" class="form-control date" id="<!-- Start input control ID goes here -->" name="inline_date_field1c" placeholder="Enter date" value="">
<span class="add-on"><span class="glyphicon glyphicon-calendar-icon"></span></span>
</div>
</div>
</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><input></code> tags, and classes should follow on from the surrounding <code><div></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>
<div class="form-group date-range">
<label for="<!-- Start input control ID goes here -->" class="control-label"><!-- Start label text goes here -->:</label>
<div class="control-input">
<input type="text" class="form-control date-range-start" id="<!-- Start input control ID goes here -->" name="<!-- Start input control name goes here -->" placeholder="Enter start date" value="<!-- Start input control value goes here -->">
<span class="add-on">
<span class="glyphicon glyphicon-calendar-icon"></span>
</span>
</div>
<div class="form-control-spacer"></div>
<label for="<!-- End input control ID goes here -->" class="control-label"><!-- End label text goes here -->:</label>
<div class="control-input">
<input type="text" class="form-control date-range-end" id="<!-- End input control ID goes here -->" name="<!-- End input control name goes here -->" placeholder="Enter end date" value="<!-- End input control value goes here -->">
<span class="add-on">
<span class="glyphicon glyphicon-calendar-icon"></span>
</span>
<input type="hidden" class="dates-disabled" value="<!-- Input control excluded values go here -->"/>
</div>
</div>
</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>
<div class="container site-footer">
<div class="status-holder">
<div class="status-message"></div>
</div>
<!--<a href="#" class="site-footer-toggle">-->
<!--<span class="fa fa-chevron-down"></span>-->
<!--</a>-->
</div>
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/causeway-utils.min.js"></script>
<script src="/js/causeway.js"></script>
<script src="/js/responsive.js"></script>
<script src="/docs/js/docs.js"></script>
<script>
(function(window, $){
var statusHolder = $('.status-message'),
date = new Date();
var message = "Copyright © 1998-" + date.getFullYear() + " Causeway Software Solutions Limited.";
statusHolder.html(message);
}(window, jQuery));
</script>
</body>
</html>