<!DOCTYPE html>
<html ng-app="app">
<head>
<!-- Latest compiled and minified CSS font awesome -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
</head>
<body>
<div ng-controller="MainController as mainCtrl">
<form name="mainForm" action="" novalidate>
<div>test date {{ mainCtrl.testdate }}</div><br>
<input ng-model="mainCtrl.testdate" type="text"/>
<input-global-date
ng-model="mainCtrl.testdate"
date-value="mainCtrl.testdate"
name="newCatName"
id="newcategory-name"
is-required="true"></input-global-date>
<br>
<br>
<br>
<hr>
<br>
<pre>
mainCtrl.fields = {{ mainCtrl.fields | json }}
</pre>
<hr>
<div ng-repeat="currField in mainCtrl.fields">
<input
ng-if='::currField.type !== "date"'
type='{{ currField.type }}'
ng-model='currField.fieldValue'
name='{{currField.id}}'
id='{{currField.id}}'
ng-required="currField.required" />
<nput-global-date
ng-if='::currField.type === "date"'
ng-model='currField.fieldValue'
date-value='currField.fieldValue'
name='{{currField.id}}'
id='{{currField.id}}'
is-required="currField.required"></nput-global-date>
{{ currField.fieldValue }}
<div class="details-message" ng-messages="mainForm[currField.id].$error">
<p class="ng-message-word-wrap-short" ng-message="required" ng-if="!mainForm[currField.id].$pristine">Required</p>
<p class="ng-message-word-wrap-short" ng-message="date" ng-if='::currField.type === "date"'>Wrong date</p>
</div>
</div>
</form>
<pre>
{{ mainForm | json }}
</pre>
<script src="script.js"></script>
<script src="MainController.js"></script>
<script src="datepicker.directive.js"></script>
</div>
</body>
</html>
(function() {
'use strict';
angular
.module('app',
[
'ngMessages',
'ngAnimate',
'ui.bootstrap',
'app.shared'
]);
})();
/* Styles go here */
.details-message {
font-size: 10px;
text-align: left;
.ng-message-word-wrap-short {
padding: 3px 0 !important;
margin: 0 !important;
font-size: 11px;
font-weight: 300;
}
}
$fontColorMid: grey;
.global-date-picker-class {
input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
outline: none;
}
button{
text-align: right;
cursor: pointer;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
margin: 0 0 0 0;
padding: 5px 10px 4px 11px;
background-color: #242527;
border: 1px solid transparent;
color: #ACACAC;
font-size: 12px;
font-weight: 300;
outline: none;
}
// Hide all native browser input type date calendar component
input.unStyledDateInput::-webkit-inner-spin-button,
input.unStyledDateInput::-webkit-clear-button,
input.unStyledDateInput::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;
}
}
.propertyData-operations-column .form-group .global-date-picker-class {
flex: 0 144px;
width: auto;
}
.uib-datepicker-popup .dropdown-menu {
z-index: 10000;
li div {
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1001;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
background-color: rgba(0,0,0,1);
& .btn-group-sm>.btn, .btn-sm {
border: none;
border-radius: 0;
color: $fontColorMid;
background-color: rgba(0,0,0,1);
}
& table {
background-color: rgba(0,0,0,1);
color: $fontColorMid;
border: 1px solid $fontColorMid;
}
}
}
(function() {
'use strict';
angular
.module('app.shared', [])
.directive('inputGlobalDate', function() {
return {
restrict: 'E',
replace: true,
scope: {},
require: 'ngModel',
bindToController: {
dateValue: '=',
isRequired: '=',
name: '@',
id: '@'
},
controllerAs: 'inputDateCtrl',
template: function(element, attrs) {
var htmlText = `
<span ng-form="customDateInputForm" class="global-date-picker-class">
<input
ng-model="inputDateCtrl.dateValue"
type="date"
id="{{ inputDateCtrl.id }}"
name="{{ inputDateCtrl.name }}"
class="unStyledDateInput"
uib-datepicker-popup=""
is-open="opened"
datepicker-options="dateOptions"
show-weeks="false"
datepicker-append-to-body="true"
show-button-bar="false"
ng-required="{{ inputDateCtrl.isRequired }}" />
<button type="button" class="date-btn-trigger"><i class="fa fa-calendar"></i></button>
</span>
`;
return htmlText;
},
controller: function () {
this.opened = false;
if (this.dateValue === '' || typeof this.dateValue === 'undefined') {
this.dateValue = '';
} else {
this.dateValue = new Date(+(this.dateValue));
}
//this.dateValue = new Date(Number(this.dateValue));
/*if (this.ngModel === '' || typeof this.ngModel === 'undefined') {
this.ngModel = new Date(+(this.dateValue));
this.dateValue = new Date(+(this.dateValue));
}else {
this.dateValue = ''
}*/
console.log('end date ctrl');
},
link: function postLink(scope, element, attrs, ngModel) {
console.log('on link');
// finding input element
//var elem = element.find('input');
//
// disabling native calendar picker
// http://trac.webkit.org/wiki/Styling%20Form%20Controls#Dateinputtype
//angular.element(elem).addClass('unStyledDateInput');
scope.dateOptions = {
formatYear: 'yy',
startingDay: 1,
showButtonBar: false,
closeOnDateSelection: true
};
element.find('button').bind('click', function () {
scope.opened = !scope.opened;
scope.$apply();
});
scope.$watch('inputDateCtrl.dateValue', function() {
console.log('in $watch');
console.log(scope);
console.log(ngModel);
/*if (scope.dateValue !== 'null' && scope.dateValue !== '') {
scope.ngModel = new Date(ngModel.$modelValue).getTime();
}*/
});
ngModel.$formatters.splice(0, ngModel.$formatters.length);
ngModel.$parsers.splice(0, ngModel.$parsers.length);
ngModel.$formatters.push(function (modelValue) {
if (!modelValue) {
return;
}
console.log('in $formatter');
return new Date(modelValue);
});
ngModel.$parsers.push(function (modelValue) {
console.log('in $parser');
return new Date(modelValue).getTime()
//return modelValue;
});
console.log('end link');
}
};
});
})();
(function() {
'use strict';
function MainController () {
var mCtrl = this;
mCtrl.testdate = 1264847720024;
mCtrl.fields = [{
id: 'elem1',
type: 'date',
fieldValue: 1396847720024,
required: true
},{
id: 'elem2',
type: 'text',
fieldValue: 'awesome not required',
required: false
},{
id: 'elem3',
type: 'text',
fieldValue: 'other text required',
required: true
},{
id: 'elem4',
type: 'date',
fieldValue: 1264847720024,
required: false
},{
id: 'elem5',
type: 'date',
fieldValue: '',
required: true
}];
}
angular
.module('app')
.controller('MainController', MainController);
})();