Build a DatePicker with AngularUI Widget from Bootstrap and post it to a REST Java server with Jersey and Bean Validation.
Demo
http://localhost:8080/20151018-javaee-angularjs-bootstrap-datepicker/
A responsive layout switching from large to small screen.
A post to Java Server with transformation from Javascript Date to JSON String.
A DatePicker widget.
And back end validation on futur Date.
Source
MyAppCONFIG.java
package com.damienfremont.blog; import java.util.HashSet; import java.util.Set; import javax.ws.rs.core.Application; public class MyAppCONFIG extends Application { @Override public Set<Class<?>> getClasses() { Set<Class<?>> s = new HashSet<Class<?>>(); s.add(ServiceJAXRS.class); return s; } }
ServiceJAXRS.java
package com.damienfremont.blog; import java.io.Serializable; import java.util.Date; import javax.validation.Valid; import javax.validation.constraints.NotNull; import javax.validation.constraints.Past; import javax.validation.executable.ValidateOnExecution; import javax.ws.rs.Consumes; import javax.ws.rs.GET; import javax.ws.rs.POST; import javax.ws.rs.Path; import javax.ws.rs.Produces; import javax.ws.rs.core.MediaType; @Path("/") public class ServiceJAXRS { // READ @GET @Produces(MediaType.APPLICATION_JSON) public Model get() { return data; } // UPDATE @POST @Consumes(MediaType.APPLICATION_JSON) @ValidateOnExecution public void post(@Valid Model data) { this.data = data; } // MODEL static class Model implements Serializable { private static final long serialVersionUID = 9167120287441116359L; @Past public Date testDateInput; @Past public Date testDatePicker; } // MOCK static Model data; static { data = new Model(); data.testDateInput= new Date(); data.testDatePicker= new Date(); } }
web.xml
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1"> <servlet> <servlet-name>REST</servlet-name> <servlet-class>org.glassfish.jersey.servlet.ServletContainer</servlet-class> <init-param> <param-name>javax.ws.rs.Application</param-name> <param-value>com.damienfremont.blog.MyAppCONFIG</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>REST</servlet-name> <url-pattern>/api/*</url-pattern> </servlet-mapping> <servlet> <servlet-name>WEBJARS</servlet-name> <servlet-class>org.webjars.servlet.WebjarsServlet</servlet-class> <init-param> <param-name>disableCache</param-name> <param-value>true</param-value> </init-param> <load-on-startup>2</load-on-startup> </servlet> <servlet-mapping> <servlet-name>WEBJARS</servlet-name> <url-pattern>/webjars/*</url-pattern> </servlet-mapping> </web-app>
app.js
'use strict'; var myApp = angular.module( 'myApp', [ 'ngAnimate', 'ui.bootstrap', 'ngResource']); myApp.controller('AlertCtrl', function($scope) { $scope.alerts = [ ]; $scope.closeAlert = function(index) { $scope.alerts.splice(index, 1); }; }); myApp.factory('Model', function($resource) { return $resource('api', {}, { get: { transformResponse: function(data, headers) { // MAP DATES var data = angular.fromJson(data); data.testDateInput = data.testDateInput === null ? null : new Date(data.testDateInput); data.testDatePicker = data.testDatePicker === null ? null : new Date(data.testDatePicker); return data; } } }); }); myApp.controller('DatepickerCtrl', function($scope, Model, $location) { // READ Model.get(function(obj) { $scope.model = obj; }); // UPDATE $scope.update = function() { Model.save($scope.model, function(obj) { $scope.$parent.alerts.push({type: 'success', msg: 'Updated!'}); }, function(error) { $scope.$parent.alerts.push({type: 'danger', msg: 'Server: '+error.statusText}); }); } // DATEPICKER BUTTON $scope.status = { opened: false }; $scope.open = function($event) { $scope.status.opened = true; }; });
index.jsp
<!DOCTYPE html> <!-- DON'T FORGET DOCTYPE OR THERE WILL BE .btn CLASS HEIGHT BUGS! https://github.com/twbs/bootstrap/issues/10482 --> <html ng-app="myApp"> <head> <!-- LIBS CSS --> <link rel="stylesheet" href="webjars/bootstrap/${bootstrap.version}/css/bootstrap.css"> <!-- LIBS JS --> <script src="webjars/angularjs/${angularjs.version}/angular.js"></script> <script src="webjars/angularjs/${angularjs.version}/angular-resource.js"></script> <script src="webjars/angularjs/${angularjs.version}/angular-animate.js"></script> <script src="webjars/angular-ui-bootstrap/${angular-ui-bootstrap.version}/ui-bootstrap-tpls.js"></script> <!-- YOUR JS --> <script src="app.js"></script> </head> <body> <div class="container" ng-controller="AlertCtrl"> <h1>Date</h1> <!-- ALERT --> <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert> <!-- FORM --> <form class="form-horizontal" ng-controller="DatepickerCtrl"> <!-- DATE INPUT --> <div class="form-group"> <label class="col-sm-3 control-label">Input to Java String</label> <div class="col-sm-6"> <input class="form-control" ng-model="model.testDateInput" type="date"> </div> </div> <!-- DATEPICKER --> <div class="form-group"> <label class="col-sm-3 control-label">Widget to Java String</label> <div class="col-sm-6"> <p class="input-group"> <input class="form-control" ng-model="model.testDatePicker" type="date" uib-datepicker-popup is-open="status.opened" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" close-text="Close" /> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i> </button> </span> </p> </div> </div> <!-- UPDATE --> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <button type="submit" class="btn btn-primary" ng-click="update()">Update</button> </div> </div> </div> </form> </body> </html>
pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.damienfremont.blog</groupId> <artifactId>20151018-javaee-angularjs-bootstrap-datepicker</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>war</packaging> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <java.version>7</java.version> <jersey.version>2.22.1</jersey.version> <angularjs.version>1.4.7</angularjs.version> <angular-ui-bootstrap.version>0.14.0</angular-ui-bootstrap.version> <bootstrap.version>3.3.5</bootstrap.version> </properties> <dependencies> <!-- JAVA --> <dependency> <groupId>javax</groupId> <artifactId>javaee-api</artifactId> <version>7.0</version> <scope>provided</scope> </dependency> <dependency> <groupId>org.glassfish.jersey.containers</groupId> <artifactId>jersey-container-servlet</artifactId> <version>${jersey.version}</version> </dependency> <dependency> <groupId>org.glassfish.jersey.media</groupId> <artifactId>jersey-media-json-jackson</artifactId> <version>${jersey.version}</version> </dependency> <dependency> <groupId>org.glassfish.jersey.ext</groupId> <artifactId>jersey-bean-validation</artifactId> <version>${jersey.version}</version> </dependency> <!-- WEB --> <dependency> <groupId>org.webjars</groupId> <artifactId>webjars-servlet-2.x</artifactId> <version>1.1</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>angularjs</artifactId> <version>${angularjs.version}</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>angular-ui-bootstrap</artifactId> <version>${angular-ui-bootstrap.version}</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>${bootstrap.version}</version> </dependency> </dependencies> <build> <resources> <resource> <directory>src/main/webapp</directory> <filtering>true</filtering> <targetPath>${project.basedir}/target/m2e-wtp/web-resources</targetPath> <includes> <include>*.jsp</include> </includes> </resource> </resources> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-war-plugin</artifactId> <version>2.6</version> <configuration> <webResources> <resource> <directory>src/main/webapp</directory> <filtering>true</filtering> <includes> <include>*.jsp</include> </includes> </resource> </webResources> </configuration> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>3.1</version> <configuration> <source>1.${java.version}</source> <target>1.${java.version}</target> </configuration> </plugin> </plugins> </build> </project>
BUG: DatePicker Button Height
Don’t forget <!DOCTYPE html> or there will be .btn CLass height bugs!
<!DOCTYPE html> <html ng-app="myApp">
https://github.com/twbs/bootstrap/issues/10482
Project
https://github.com/DamienFremont/blog/tree/master/20151018-javaee-angularjs-bootstrap-datepicker
References
https://angular-ui.github.io/bootstrap/
https://docs.angularjs.org/api/ng/filter/date
[…] JavaEE AngularJS Bootstrap: Date Picker […]