feat(app\form inputs): add datepicker

pull/112/merge
tibing 9 years ago committed by Vladimir Lugovsky
parent e2c27bd7ea
commit 37a748cbcc

@ -34,6 +34,12 @@
<div ba-panel ba-panel-title="Old On/Off Switches (Deprecated)" ba-panel-class="with-scroll">
<div ng-include="'app/pages/form/inputs/widgets/oldSwitches/switch.html'"></div>
</div>
<div
ba-panel
ba-panel-title="Datepicker"
ba-panel-class="with-scroll">
<div ng-include="'app/pages/form/inputs/widgets/datepickers/datepickers.html'"></div>
</div>
</div>
<div class="col-md-6">
@ -55,8 +61,6 @@
ba-panel-class="with-scroll">
<div ng-include="'app/pages/form/inputs/widgets/oldSelect/select.html'"></div>
</div>
</div>
</div>

@ -0,0 +1,22 @@
<div class="datepicker row">
<div class="col-sm-6" ng-controller="datepickerCtrl">
<h4>Inline</h4>
<label>Selected date is: <em>{{dt | date:'fullDate' }}</em></label>
<div class="uib-datepicker-wrap">
<uib-datepicker ng-model="dt" datepicker-options="options"></uib-datepicker>
</div>
</div>
<div class="col-sm-6" ng-controller="datepickerpopupCtrl">
<h4>Popup</h4>
<label>Selected date is: <em>{{dt | date:'fullDate' }}</em></label>
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" datepicker-options="options" ng-model="dt" is-open="opened" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" show-button-bar="false" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<label>Format: <span class="muted-text">(manual alternate <em>{{altInputFormats[0]}}</em>)</span></label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select>
</div>
</div>

@ -0,0 +1,20 @@
/**
* Created by n.poltoratsky
* on 23.06.2016.
*/
(function(){
'use strict';
angular.module('BlurAdmin.pages.form')
.controller('datepickerCtrl', datepickerCtrl);
/** @ngInject */
function datepickerCtrl($scope) {
$scope.dt = new Date();
$scope.options = {
showWeeks: false
};
}
})();

@ -0,0 +1,26 @@
/**
* Created by n.poltoratsky
* on 23.06.2016.
*/
(function(){
'use strict';
angular.module('BlurAdmin.pages.form')
.controller('datepickerpopupCtrl', datepickerpopupCtrl);
/** @ngInject */
function datepickerpopupCtrl($scope) {
$scope.open = open;
$scope.opened = false;
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
$scope.options = {
showWeeks: false
};
function open() {
$scope.opened = true;
}
}
})();

@ -0,0 +1,45 @@
.datepicker {
.btn:hover {
transform: scale(1);
}
button.btn.btn-default {
background-color: transparent;
}
button.btn.btn-default.active {
background-color: $info;
color: white;
}
button.btn.active span.ng-binding.text-info {
color: white;
}
}
.uib-datepicker-wrap {
display:inline-block;
min-height:270px;
}
.uib-datepicker span.ng-binding.text-muted {
color: $default-text;
}
.uib-datepicker-popup {
background-color: $bootstrap-panel-bg;
border-width: 0;
color: black;
button.btn {
color: black;
.text-muted {
color: black;
}
}
.glyphicon {
color: rgba($progress-background, 1);
}
}
Loading…
Cancel
Save