Wijmo 5 - Date and Time Input

by Joel Parks

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/interop/angular/wijmo.angular.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl" class="container">
    
<h1>Date and Time input</h1>

    <p>Edit the date and time using an <b>InputDate</b> and an <b>InputTime</b>:</p>
    <wj-input-date 
        value="theDate" 
        min="2014-8-1"
        format="M/d/yyyy">
    </wj-input-date>
    
    <p></p>
    
    <p>Or pick the date from the <b>Calendar</b>:</p>
    <wj-calendar 
        min="2014-8-1"
        value="theDate">
    </wj-calendar>
    
    <p></p>

    <p>Here is the date and time as seen by the controller:</p>
    <b>{{theDate | date:'M/d/yyyy h:mm a'}}</b>
</div>

CSS

.wj-calendar {
    max-width: 300px;
}

JavaScript

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function ($scope) {

    // the date/time being edited
    $scope.theDate = new Date();
});