feat(app\form inputs): add datepicker
							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…
	
		Reference in New Issue