Skip to content

Instantly share code, notes, and snippets.

@92arpitgoyal

92arpitgoyal/custom-datepicker.html

Created October 29, 2015 04:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save 92arpitgoyal/c84e99583d9b0e7ec207 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save 92arpitgoyal/c84e99583d9b0e7ec207 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
custom-datepicker.html
<script id="template/datepicker/year.html" type="text/ng-template">
<table role="grid" class="calender" aria-labelledby="{{::uniqueId}}-title" aria-activedescendant="{{activeDateId}}">
<thead>
<tr>
<th><button type="button" class="btn btn-default btn-sm pull-left" ng-click="move(-1)" tabindex="-1"><i class="mdi mdi-chevron-left"></i></button></th>
<th colspan="3"><button id="{{::uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1" style="width:100%;"><strong>{{title}}</strong></button></th>
<th><button type="button" class="btn btn-default btn-sm pull-right" ng-click="move(1)" tabindex="-1"><i class="mdi mdi-chevron-right"></i></button></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows track by $index">
<td ng-repeat="dt in row track by dt.date" class="text-center" role="gridcell" id="{{::dt.uid}}" ng-class="::dt.customClass">
<button type="button" style="min-width:100%;" class="btn btn-default" ng-class="{'btn-info': dt.selected, active: isActive(dt)}" ng-click="select(dt.date)" ng-disabled="dt.disabled" tabindex="-1"><span ng-class="::{'text-info': dt.current}">{{::dt.label}}</span></button>
</td>
</tr>
</tbody>
</table>
</script>
<script id="template/datepicker/month.html" type="text/ng-template">
<table role="grid" class="calender" aria-labelledby="{{::uniqueId}}-title" aria-activedescendant="{{activeDateId}}">
<thead>
<tr>
<th><button type="button" class="btn btn-default btn-sm pull-left" ng-click="move(-1)" tabindex="-1"><i class="mdi mdi-chevron-left"></i></button></th>
<th><button id="{{::uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1" style="width:100%;"><strong>{{title}}</strong></button></th>
<th><button type="button" class="btn btn-default btn-sm pull-right" ng-click="move(1)" tabindex="-1"><i class="mdi mdi-chevron-right"></i></button></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows track by $index">
<td ng-repeat="dt in row track by dt.date" class="text-center" role="gridcell" id="{{::dt.uid}}" ng-class="::dt.customClass">
<button type="button" style="min-width:100%;" class="btn btn-default" ng-class="{'btn-info': dt.selected, active: isActive(dt)}" ng-click="select(dt.date)" ng-disabled="dt.disabled" tabindex="-1"><span ng-class="::{'text-info': dt.current}">{{::dt.label}}</span></button>
</td>
</tr>
</tbody>
</table>
</script>
<script id="template/datepicker/day.html" type="text/ng-template">
<table role="grid" class="calender" aria-labelledby="{{::uniqueId}}-title" aria-activedescendant="{{activeDateId}}">
<thead>
<tr>
<th class="controls" colspan="{{::7 + showWeeks}}"><button type="button" class="btn btn-default btn-sm btn-block" ng-click="move(-1)" tabindex="-1"><i class="mdi mdi-chevron-up"></i></button></th>
</tr>
<tr>
<th class="month-year-heading" colspan="{{::7 + showWeeks}}"><button id="{{::uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1" style="width:100%;"><strong>{{title}}</strong></button></th>
</tr>
<tr>
<th ng-if="showWeeks" class="text-center"></th>
<th ng-repeat="label in ::labels track by $index" class="text-center"><small aria-label="{{::label.full}}">{{::label.abbr}}</small></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows track by $index">
<td ng-if="showWeeks" class="text-center h6"><em>{{ weekNumbers[$index] }}</em></td>
<td ng-repeat="dt in row track by dt.date" class="text-center" role="gridcell" id="{{::dt.uid}}" ng-class="::dt.customClass">
<button type="button" style="min-width:100%;" class="btn btn-default btn-sm" ng-class="{'btn-primary': dt.selected, active: isActive(dt)}" ng-click="select(dt.date)" ng-disabled="dt.disabled" tabindex="-1"><span ng-class="::{'text-muted': dt.secondary, 'text-info': dt.current}">{{::dt.label}}</span></button>
</td>
</tr>
<tr>
<th class="controls" colspan="{{::7 + showWeeks}}"><button type="button" class="btn btn-default btn-sm btn-block" ng-click="move(1)" tabindex="-1"><i class="mdi mdi-chevron-down"></i></button></th>
</tr>
</tbody>
</table>
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment