Skip to content

Instantly share code, notes, and snippets.

@rfprod

rfprod/angular-form-with-datetimepicker-custom-styling.markdown

Last active April 22, 2017 15:47
Show Gist options
  • Save rfprod/137d3bd9fb6b0fefb8a69e92253839a7 to your computer and use it in GitHub Desktop.
Save rfprod/137d3bd9fb6b0fefb8a69e92253839a7 to your computer and use it in GitHub Desktop.
Download ZIP
Angular Form with DateTimePicker (custom styling)
Raw
angular-form-with-datetimepicker-custom-styling.markdown

Angular Form with DateTimePicker (custom styling)

Default bootstrap styling for form is overridden and extended.

A Pen by V on CodePen.

License.

Raw
index.html
<html ng-app="test">
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-bootstrap-datetimepicker/1.1.3/css/datetimepicker.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-bootstrap-datetimepicker/1.1.3/js/datetimepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-bootstrap-datetimepicker/1.1.3/js/datetimepicker.templates.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-controller="form">
<a id="gist" class="btn" href="https://gist.github.com/rfprod/137d3bd9fb6b0fefb8a69e92253839a7" target=_blank><span class="glyphicon glyphicon-download-alt" ></span> GIST</a>
<form id="form" name="form" novalidate>
<span class="form-title">{{labels.title}}</span>
<div class="form-group" ng-class="{ 'has-error': form.lastName.$invalid }">
<span class="marker green"></span>
<label for="lastName"><span class="text-danger">*</span>{{labels.lastName}}</label>
<input type="text" class="form-control" id="lastName" name="lastName" ng-model="input.lastName" ng-pattern="regX.name" placeholder="{{labels.lastName}}" autofocus novalidate>
<p ng-show="form.lastName.$invalid" class="help-block"><span class="arrow-up"></span>{{error.name}}</p>
</div>
<div class="form-group" ng-class="{ 'has-error': form.firstName.$invalid }">
<span class="marker blue"></span>
<label for="firstName"><span class="text-danger">*</span>{{labels.firstName}}</label>
<input type="text" class="form-control" id="firstName" name="firstName" ng-model="input.firstName" ng-pattern="regX.name" placeholder="{{labels.firstName}}" novalidate>
<p ng-show="form.firstName.$invalid" class="help-block"><span class="arrow-up"></span>{{error.name}}</p>
</div>
<div class="form-group" ng-class="{ 'has-error': form.middleName.$invalid }">
<span class="marker red"></span>
<label for="middleName"><span class="text-danger">*</span>{{labels.middleName}}</label>
<input type="text" class="form-control" id="middleName" name="middleName" ng-model="input.middleName" ng-pattern="regX.name" placeholder="{{labels.middleName}}" novalidate>
<p ng-show="form.middleName.$invalid" class="help-block"><span class="arrow-up"></span>{{error.name}}</p>
</div>
<div class="dropdown form-group form-inline" ng-class="{ 'has-error': form.birthday.$invalid }">
<span class="marker light-blue"></span>
<label for="birthday" class="label-fix"><span class="text-danger">*</span>{{labels.birthday}}</label>
<div class="dropdown-toggle" id="dropdown1" role="button" data-toggle="dropdown" data-target="#">
<div class="input-group">
<input type="text" class="form-control" id="birthday" name="birthday" ng-model="input.birthday" ng-pattern="regX.date" placeholder="{{labels.birthday}}" novalidate>
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
<ul class="dropdown-menu" role="menu">
<datetimepicker data-ng-model="input.dateRangeStart" data-datetimepicker-config="dateTimePickerConfig" data-before-render="beforeRenderStartDate($view, $dates, $leftDate, $upDate, $rightDate)"/>
</ul>
<p ng-show="form.birthday.$invalid" class="help-block"><span class="arrow-up"></span>{{error.date}}</p>
</div>
</form>
</body>
</html>
Raw
script.js
var app = angular.module('test', ['ui.bootstrap.datetimepicker']);
app.filter('convertDate', function() {
return function(inputDate, format) {
var err;
if (inputDate && format === 'dd/mm/yyyy') {
var dateObj = new Date(inputDate);
var month = (dateObj.getMonth() + 1).toString();
var date = dateObj.getDate().toString();
month = (month.length === 1) ? '0' + month : month;
date = (date.length === 1) ? '0' + date : date;
return date + '/' + month + '/' + dateObj.getFullYear();
} else {
if (format && format !== 'dd/mm/yyyy') { err = new TypeError('convertDate filter error: wrong conversion format'); }
else if (!inputDate && !format) { err = new TypeError('convertDate filter error: no date was provided, no format was provided'); }
else if (!inputDate && format) { err = new TypeError('convertDate filter error: no date was provided'); }
else if (inputDate && !format) { err = new TypeError('convertDate filter error: no format was provided'); }
}
return err;
};
});
app.controller('form', ['$scope', '$filter', ($scope, $filter) => {
$scope.labels = {
title: 'Main data',
firstName: 'First Name',
lastName: 'Last Name',
middleName: 'Middle Name',
birthday: 'Birthday'
};
$scope.error = {
name: 'Name must start with a capital letter followed by lower case letters, and be at least 3 characters long',
date: 'Date format must be dd/mm/yyyy'
};
$scope.regX = {
name: /^[A-Z]{1}[a-z]{2,}$/,
date: /^\d{2}\/\d{2}\/\d{4}$/
};
$scope.input = {
firstName: undefined,
lastName: undefined,
middleName: undefined,
birthday: undefined,
dateRangeStart: undefined,
dateRangeEnd: new Date().toISOString()
};
$scope.$watch('input.dateRangeStart', function(newValue) {
if (typeof newValue !== 'undefined') {
$scope.input.birthday = $filter('convertDate')(newValue, 'dd/mm/yyyy');
}
});
$scope.dateTimePickerConfig = {
dropdownSelector: '#dropdown1',
minView: 'day'
};
$scope.beforeRenderStartDate = function($view, $dates, $leftDate, $upDate, $rightDate) {
if ($scope.input.dateRangeEnd) {
var activeDate = moment($scope.input.dateRangeEnd);
for (var i = 0, max = $dates.length; i < max; i++) {
if ($dates[i].localDateValue() > activeDate.valueOf()) {
$dates[i].selectable = false;
}
}
}
};
}]);
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-bootstrap-datetimepicker/1.1.3/js/datetimepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-bootstrap-datetimepicker/1.1.3/js/datetimepicker.templates.js"></script>
Raw
style.scss
$blue: #0097cc;
$margin-vertical: 30vh;
$margin-horyzontal: 20vw;
$input-width: 71%;
$light-red: #fff5f6;
$dark-red: #ff3636;
$light-green: #f2f9fc;
$dark-green: #a5cc5a;
$blue: #0097cd;
$light-blue: #cfebf4;
html {
body {
#gist {
position: absolute;
top: 0;
right: 0;
}
#form {
min-width: 464px;
margin-top: $margin-vertical;
margin-bottom: $margin-vertical;
margin-left: $margin-horyzontal;
margin-right: $margin-horyzontal;
.form-title {
display: block;
color: $blue;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 5px;
}
.dropdown {
max-height: 49px;
}
.form-group {
position: relative;
margin-bottom: 0;
border: 0 solid #ccc;
border-width: 1px 1px 0 1px;
&:last-child {
border: 1px solid #ccc;
}
.help-block {
position: relative;
z-index: 100;
margin: 0;
padding: 10px;
color: #fff;
background-color: $dark-red;
.arrow-up {
position: absolute;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid $dark-red;
top: -5px;
left: 45px;
}
}
.form-control {
position: relative;
z-index: 100;
border-radius: 0;
border: 0px solid #ccc;
border-width: 0 1px 0 1px;
box-shadow: none;
line-height: 2.5;
height: 100%;
}
.marker {
z-index: 10;
position: absolute;
right: 0;
width: 5%;
height: 100%;
&.red {
background-color: $dark-red;
}
&.green {
background-color: $dark-green;
}
&.blue {
background-color: $blue;
}
&.light-blue {
background-color: $light-blue;
}
}
label {
width: 28%;
margin-bottom: 0;
text-transform: uppercase;
vertical-align: middle;
padding-left: 10px;
}
&.has-error {
.form-control {
background-color: $light-red;
box-shadow: none;
}
.dropdown-toggle {
.input-group {
input {
&:focus + .input-group-addon {
background-color: $light-red;
color: #555;
}
}
}
}
}
input {
display: inline-block;
width: $input-width;
&:focus {
background-color: $light-green;
}
}
@media (max-width: 767px) {
.label-fix {
margin-bottom: 36px;
}
.dropdown-menu {
border: none;
padding: 0;
}
.table-responsive {
margin-bottom: 0;
}
}
.dropdown-toggle {
position: relative;
z-index: 100;
display: inline-block;
width: $input-width;
.input-group {
width: 100%;
border: 0px solid #ccc;
border-width: 0 1px 0 1px;
.form-group {
margin-bottom: 0;
border: none;
.form-control {
border-radius: 0;
}
}
.input-group-addon {
border: none;
border-radius: 0;
background-color: #fff;
}
input {
border: none;
width: 100%;
&:focus + .input-group-addon {
background-color: $light-green;
}
}
}
}
}
}
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-bootstrap-datetimepicker/1.1.3/css/datetimepicker.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment