var app = angular.module("myApp", []);
function Fiddle($scope) {}
app.directive('input', function() {
return {
restrict: 'E',
require: '?ngModel',
link: function(scope, elm, attr, ctrl) {
if (!ctrl) {
return;
}
elm.bind('keyup', function() {
var matches = /^(\d{2})[-\/](\d{2})[-\/](\d{4})$/.exec(this.value);
if (matches) {
var d = matches[1];
var m = matches[2] - 1;
var y = matches[3];
var composedDate = new Date(y, m, d);
var valid = composedDate.getDate() == d &&
composedDate.getMonth() == m &&
composedDate.getFullYear() == y;
}
if (!matches || !valid)
elm.attr('style', 'border:solid 3px #FE2E2E');
else
elm.removeAttr('style');
});
}
};
});
function validarData() {
var valid = isValidDate(document.getElementById("ipData").value);
document.getElementById("ipData").style.border = (!valid ? 'solid 3px #FE2E2E' : '');
};
function isValidDate(date) {
var matches = /^(\d{2})[-\/](\d{2})[-\/](\d{4})$/.exec(date);
if (matches == null) return false;
var d = matches[2];
var m = matches[1] - 1;
var y = matches[3];
var composedDate = new Date(y, m, d);
return composedDate.getDate() == d &&
composedDate.getMonth() == m &&
composedDate.getFullYear() == y;
}
html,
body {
height: 100%;
}
body,
form {
padding: 1em;
}
input,
input.ng-invalid.has-visited.has-focus,
form {
border: 1px solid #8d8d8d;
}
input,
button {
border-radius: 3px;
padding: .25em;
}
body {
background: #528cc2;
/* Old browsers */
background: -moz-linear-gradient(top, #6dbbff 0%, #528cc2 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6dbbff), color-stop(100%, #528cc2));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6dbbff 0%, #528cc2 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6dbbff 0%, #528cc2 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #6dbbff 0%, #528cc2 100%);
/* IE10+ */
background: linear-gradient(to bottom, #6dbbff 0%, #528cc2 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#6dbbff', endColorstr='#528cc2', GradientType=0);
/* IE6-9 */
font-family: sans-serif;
}
ul,
li {
list-style: none;
}
form {
background: #f7f7f7;
/* Old browsers */
background: -moz-linear-gradient(top, #f7f7f7 0%, #e5e5e5 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #e5e5e5));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f7f7f7 0%, #e5e5e5 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f7f7f7 0%, #e5e5e5 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #f7f7f7 0%, #e5e5e5 100%);
/* IE10+ */
background: linear-gradient(to bottom, #f7f7f7 0%, #e5e5e5 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#e5e5e5', GradientType=0);
/* IE6-9 */
border: 1px solid #8d8d8d;
border-radius: 6px;
box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
min-width: 400px;
margin: auto;
width: 50%;
}
form li {
margin-bottom: .5em;
}
label {
color: #8d8d8d;
display: block;
line-height: 1.5;
}
:focus {
outline: 0;
}
input {
background: rgba(255, 255, 255, .5);
}
input:focus {
background: #FFF;
}
input.ng-invalid.has-visited {
border: 1px solid #E44848;
}
input.ng-valid.has-visited {
border: 1px solid #a3bf57;
}
.error-message {
color: #E44848;
}
button {
background: #528CC2;
color: white;
cursor: pointer;
border: 0;
}
button:disabled {
background: rgba(82, 140, 194, 0.5);
color: rgba(255, 255, 255, .5);
font-weight: 400;
}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><formname="myForm" novalidate ng-app="myApp">
<ul ng-controller="Fiddle">
<li>
<label for="barthirty">Diretiva Angular</label>
<input input-data type="datetime" ng-model="barthirty" required />
</li>
</ul>
<ul>
<li>
<label for="barthirty">Expressao regular</label>
<input type="datetime" id="ipData" required onkeyup="validarData()"/>
</li>
</ul>
<button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>