AngularJS Bootstrap make the datetimer picker responsive - angularjs

Question

I am trying to make the datetimepicker responsive for bootstrap but having issues.
I have seen this plugin:
https://github.com/niftylettuce/bootstrap-datepicker-mobile#requirements
which would be great to use in my application, but the problem is my application doesn't use jQuery (nor do I want it to).
I have the datepicker set up like this:
<div class="col-md-4">
<div ng-model="controller.today" datepicker ng-change="controller.getArchive()"></div>
</div>
Does anyone know how I can make the datetimepicker responsive without using jQuery?

Answer 1

Well I managed to fix this myself.
I created my own templates which looked like this:
<script id="template/datepicker/datepicker.html" type="text/ng-template">
<div class="datepicker" ng-switch="datepickerMode" role="application" ng-keydown="keydown($event)">
<daypicker ng-switch-when="day" tabindex="0"></daypicker>
<monthpicker ng-switch-when="month" tabindex="0"></monthpicker>
<yearpicker ng-switch-when="year" tabindex="0"></yearpicker>
</div>
</script>
<script id="template/datepicker/day.html" type="text/ng-template">
<div>
<div class="row">
<div class="col-xs-2">
<button class="btn btn-default btn-block" ng-click="move(-1)" tabindex="-1"><span class="fa fa-chevron-left"></span></button>
</div>
<div class="col-xs-8">
<button class="btn btn-default btn-block" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1">{{ title }}</button>
</div>
<div class="col-xs-2">
<button class="btn btn-default btn-block"><span class="fa fa-chevron-right"></span></button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="flexbox">
<div ng-repeat="label in labels track by $index">
<small aria-label="{{ label.full }}">{{ label.abbr }}</small>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="flexbox" ng-repeat="row in rows track by $index">
<div ng-repeat="dt in row track by dt.date">
<button class="btn btn-default btn-block" ng-class="{'btn-info': 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>
</div>
</div>
</div>
</div>
</div>
</script>
Then I created 2 SASS files, one for the actual datepicker:
.datepicker {
text-align: center;
.row {
> div {
padding-left: 1px;
padding-right: 1px;
&:first-child {
padding-left: 15px;
}
&:last-child {
padding-right: 15px;
}
}
> .col-xs-12,
> .col-sm-12,
> .col-md-12,
> .col-lg-12 {
padding-left: 15px;
padding-right: 15px;
}
}
.flexbox {
margin-top: -1px;
&:first-child {
margin-top: 2px;
}
}
}
and a flexbox one:
.flexbox {
display: flex;
> div {
-ms-flex: 1 auto;
flex: 1 auto;
margin-left: -1px;
&:first-child {
margin-left: 0;
}
}
}
This solved my issue.
I will update this when I have all templates replaced and I will add a jsfiddle.