angularjs-date-picker/src/date-picker.directive.html

Yet another Angular Date-picker

<div class="miniCal">
		<div class="month-container">
			<div class="glyphicon glyphicon-menu-left btn otis-color miniCal-month-arrow miniCal-month-arrow-left no-round-bottom" ng-click="changeMonth(-1)"></div>
			<div class="miniCal-current-month">{{moment.format('MMMM - YYYY')}}</div>
			<div class="glyphicon glyphicon-menu-right btn otis-color miniCal-month-arrow miniCal-month-arrow-right no-round-bottom" ng-click="changeMonth(1)"></div>
		</div>
		<table class="miniCal-table">
			<thead class="miniCal-thead">
			<tr class="miniCal-tr-header">
				<td class="miniCal-td" ng-repeat="day in weekdays">
					{{day.abbr}}
				</td>
			</tr>
			</thead>
			<tr ng-repeat="i in [0,1,2,3,4,5]">
				<td class="miniCal-body-td" ng-repeat="j in [0,1,2,3,4,5,6]" ng-class="[arr[pos(i,j)].class]" ng-click="changeDate(pos(i, j)); passDateSelected();"><div>{{arr[pos(i, j)].moment.format('D')}}</div></td>
			</tr>
		</table>
	<style type="text/css">
		.miniCal {
		  text-align: center;
		  padding-top: 10px;
		  width: 100%;
		  font-size: 12px;
		}

		.miniCal-table {
		  width: 100%;
		  border: 1px solid rgb(55, 62, 68);
		}

		.miniCal-thead {
		  border-radius: 4px;
		  background-color: #1b1e24;
		}

		.miniCal-thead .miniCal-td{
		  background-color: #1b1e24;
		  color: white;
		}

		.miniCal-tr-header {
		  border-radius: 4px;
		}

		.miniCal-td{
		  width: 25px;
		  height: 25px;
		  text-align: center;
		  padding-left: 4px;
		  padding-right: 4px;
		  padding-top: 6px;
		  padding-bottom: 6px;
		  border-right: 1px solid #343a45;
		}

		.miniCal-body-td{
		  width: 25px;
		  height: 25px;
		  text-align: center;
		  padding-left: 4px;
		  padding-right: 4px;
		  padding-top: 6px;
		  padding-bottom: 6px;
		}

		.miniCal-month-arrow {
		  display: inline-block; 
		  padding-left: 5px; 
		  padding-right: 5px; 
		  padding-top: 2px; 
		  padding-bottom: 2px;
		  border-bottom: 1px solid #347AB7;
		}

		.miniCal-month-arrow-left {
		  float:left;
		  top: 0;
		}

		.miniCal-month-arrow-right {
		  float:right;
		  top: 0;
		}

		.miniCal-current-month {
		  display: inline;
		  line-height: 26px;
		  background-color: #1b1e24;
		}

		.miniCal .month-container {
		  background-color: #1b1e24;
		  border-bottom: 2px solid #DDD;
		  border-left: 1px solid #373E44;
		  border-right: 1px solid #373E44;
		  border-top-right-radius: 4px;
		  border-top-left-radius: 4px;
		  color: white;
		}

		.miniCal-thead tr:first-child td:first-child { 
		  border-top-left-radius: 0px;
		}
		.miniCal-thead tr:first-child td:last-child { 
		  border-top-right-radius: 0px; 
		}
		.miniCal-thead tr:last-child td:first-child { 
		  border-bottom-left-radius: 0px; 
		}
		.miniCal-thead tr:last-child td:last-child { 
		  border-bottom-right-radius: 0px; 
		}

		.miniCal-no-round-bottom {
		  border-bottom-right-radius: 0px;
		  border-bottom-left-radius: 0px;
		}

		.miniCal-current-day {
		  font-weight: bold;
		  color: white;
		  background-color: #1b1e24 !important;
		}

		.miniCal-regular-day {

		}

		.miniCal-date-out-scope {
		  color: #BBB;
		}
	</style>
</div>