Skip to content

Instantly share code, notes, and snippets.

@rfprod

rfprod/angular-form-with-datetimepicker.markdown

Last active April 22, 2017 15:47
Show Gist options
  • Save rfprod/aa76eeeee7d59447b0c3632adc096d1f to your computer and use it in GitHub Desktop.
Save rfprod/aa76eeeee7d59447b0c3632adc096d1f to your computer and use it in GitHub Desktop.
Download ZIP
Angular Form with DateTimePicker
Raw
angular-form-with-datetimepicker.markdown
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/aa76eeeee7d59447b0c3632adc096d1f" 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 }">
<label for="lastName">{{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">{{error.name}}</p>
</div>
<div class="form-group" ng-class="{ 'has-error': form.firstName.$invalid }">
<label for="firstName">{{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">{{error.name}}</p>
</div>
<div class="form-group" ng-class="{ 'has-error': form.middleName.$invalid }">
<label for="middleName">{{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">{{error.name}}</p>
</div>
<div class="dropdown form-group form-inline" ng-class="{ 'has-error': form.birthday.$invalid }">
<label for="birthday" class="label-fix">{{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">{{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://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>
Raw
style.scss
$blue: #0097cc;
$margin-vertical: 30vh;
$margin-horyzontal: 20vw;
html {
body {
#gist {
position: absolute;
top: 0;
right: 0;
}
#form {
margin-top: $margin-vertical;
margin-bottom: $margin-vertical;
margin-left: $margin-horyzontal;
margin-right: $margin-horyzontal;
.form-title {
color: $blue;
text-transform: uppercase;
font-weight: bold;
}
.form-group {
label {
width: 28%;
text-transform: uppercase;
vertical-align: middle;
}
&.has-error {
.form-control {
background-color: #fff5f6;
}
}
input {
display: inline-block;
width: 68%;
&:focus {
background-color: #f2f9fc;
}
}
@media (max-width: 767px) {
.label-fix {
margin-bottom: 28px;
}
.dropdown-menu {
border: none;
padding: 0;
}
.table-responsive {
margin-bottom: 0;
}
}
.dropdown-toggle {
display: inline-block;
width: 68%;
.input-group {
width: 100%;
input {
width: 100%;
}
}
}
}
}
}
}
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