mirror of
https://github.com/ExactTarget/fuelux.git
synced 2026-04-26 03:00:10 -04:00
101 lines
4.2 KiB
HTML
101 lines
4.2 KiB
HTML
<div id="MyDatepickerContainer">
|
|
|
|
<div class="form-group">
|
|
<label class="control-label" for="MyDatepickerInput">Choose a date (default) </label>
|
|
<div>
|
|
|
|
<div id="MyDatepicker" class="datepicker" data-initialize="datepicker">
|
|
<div class="input-group">
|
|
<input id="MyDatepickerInput" class="form-control" type="text"/>
|
|
<div class="input-group-btn">
|
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
<span class="glyphicon glyphicon-calendar"></span>
|
|
<span class="sr-only">Toggle Calendar</span>
|
|
</button>
|
|
<div class="dropdown-menu dropdown-menu-right datepicker-calendar-wrapper" role="menu">
|
|
<div class="datepicker-calendar">
|
|
<div class="datepicker-calendar-header">
|
|
<button class="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous Month</span></button>
|
|
<button class="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next Month</span></button>
|
|
<button class="title">
|
|
<span class="month">
|
|
<span data-month="0">January</span>
|
|
<span data-month="1">February</span>
|
|
<span data-month="2">March</span>
|
|
<span data-month="3">April</span>
|
|
<span data-month="4">May</span>
|
|
<span data-month="5">June</span>
|
|
<span data-month="6">July</span>
|
|
<span data-month="7">August</span>
|
|
<span data-month="8">September</span>
|
|
<span data-month="9">October</span>
|
|
<span data-month="10">November</span>
|
|
<span data-month="11">December</span>
|
|
</span> <span class="year"></span>
|
|
</button>
|
|
</div>
|
|
<table class="datepicker-calendar-days">
|
|
<thead>
|
|
<tr>
|
|
<th>Su</th>
|
|
<th>Mo</th>
|
|
<th>Tu</th>
|
|
<th>We</th>
|
|
<th>Th</th>
|
|
<th>Fr</th>
|
|
<th>Sa</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
<div class="datepicker-calendar-footer">
|
|
<button class="datepicker-today">Today</button>
|
|
</div>
|
|
</div>
|
|
<div class="datepicker-wheels" aria-hidden="true">
|
|
<div class="datepicker-wheels-month">
|
|
<h2 class="header">Month</h2>
|
|
<ul>
|
|
<li data-month="0"><button>Jan</button></li>
|
|
<li data-month="1"><button>Feb</button></li>
|
|
<li data-month="2"><button>Mar</button></li>
|
|
<li data-month="3"><button>Apr</button></li>
|
|
<li data-month="4"><button>May</button></li>
|
|
<li data-month="5"><button>Jun</button></li>
|
|
<li data-month="6"><button>Jul</button></li>
|
|
<li data-month="7"><button>Aug</button></li>
|
|
<li data-month="8"><button>Sep</button></li>
|
|
<li data-month="9"><button>Oct</button></li>
|
|
<li data-month="10"><button>Nov</button></li>
|
|
<li data-month="11"><button>Dec</button></li>
|
|
</ul>
|
|
</div>
|
|
<div class="datepicker-wheels-year">
|
|
<h2 class="header">Year</h2>
|
|
<ul></ul>
|
|
</div>
|
|
<div class="datepicker-wheels-footer clearfix">
|
|
<button class="btn datepicker-wheels-back"><span class="glyphicon glyphicon-arrow-left"></span><span class="sr-only">Return to Calendar</span></button>
|
|
<button type="button" class="btn datepicker-wheels-select">Select <span class="sr-only">Month and Year</span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<br/>
|
|
<h5>Sample Methods</h5>
|
|
<div class="btn-group">
|
|
<button class="btn btn-default" id="btnDatepickerEnable">enable</button>
|
|
<button class="btn btn-default" id="btnDatepickerDisable">disable</button>
|
|
<button class="btn btn-default" id="btnDatepickerLogFormattedDate">log formatted date</button>
|
|
<button class="btn btn-default" id="btnDatepickerLogDateObj">log date object</button>
|
|
<button class="btn btn-default" id="btnDatepickerSetDate">set date 7 days ahead (will log new value)</button>
|
|
<button class="btn btn-default" id="btnDatepickerDestroy">destroy and append</button>
|
|
</div> |