angular-datetime-input

<!doctype html> <html lang="tw" ng-app="App"> <head> <meta charset="UTF-8"> <title>Angular Datetime</title> <script src="https://code.angularjs.org/1.5.8/angular.js"></script>  <script src="https://unpkg.com/babel-polyfill@6.23.0/dist/polyfill.js"></script> <script src="../dist/datetime.js"></script> <link rel="stylesheet" href="https://rawgit.com/eight04/end2end/master/dist/end2end.css"> <script> angular.module("App", ["datetime"]).controller("myDate", function($scope, datetime, $locale){ $scope.data = { myDate: new Date, myDateString: "2000-01-01 00:00:00", myDateString2: "2000-01-01T00:00:00+08:00", myTimezone: "+0000", min: new Date(2010, 0, 1), max: new Date(2019, 11, 31) }; $scope.formats = function(formats){ var swap = [], format, code; for (format in formats) { code = format.charCodeAt(0) if (97 <= code && code <= 122) { swap.push(format); } } return swap; }($locale.DATETIME_FORMATS); $scope.reset = function(){ $scope.data.myDate = new Date; $scope.data.myDateString = "2000-01-01 00:00:00"; }; $scope.clear = function(){ $scope.data.myDate = null; $scope.data.myDateString = null; }; }); </script> </head> <body class="container-sm" ng-controller="myDate"> <h2>Angular Datetime <small>Demo Page</small></h2> <p>To use the directive, add <code>datetime="date-format"</code> attribute to your input.</p> <input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="data.myDate" class="form-control"> <pre>myDate = {{data.myDate | json}}</pre> <pre class="code"><code><input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="myDate"></code></pre> <p>To set a date, just set your model to a Date object. Set to null to remove it.</p> <p> <button class="btn-default" ng-click="reset()">Reset</button> <button class="btn-default" ng-click="clear()">Clear</button> </p> <pre class="code"><code><button ng-click="myDate = new Date">reset</button></code></pre> <h3>min / max</h3> <p>Validation for min/max date. The min/max attribute will be used to construct the date object.</p> <form name="minmaxForm"> <input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="data.myDate" class="form-control" min="{{data.min.toUTCString()}}" max="{{data.max.toUTCString()}}" name="input"> </form> <pre>input.$error = {{minmaxForm.input.$error | json}}</pre> <pre class="code" ng-non-bindable><code><input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="myDate" min="Jan 1, 2010" max="Dec 31, 2019"></code></pre> <div class="form-group"> <label> Min <input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="data.min" class="form-control"> </label> </div> <div class="form-group"> <label> Max <input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="data.max" class="form-control"> </label> </div> <h3>required</h3> <p><code>ng-invalid-required</code> will be added to the class list when all parts are empty.</p> <form name="requireForm"> <input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="data.myDate" class="form-control" required name="input"> </form> <pre>input.$error = {{requireForm.input.$error | json}}</pre> <pre class="code"><code><input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="myDate" required></code></pre> <p>Use <code>ng-require</code>.</p> <form name="ngRequireForm"> <label class="checkbox"><input type="checkbox" ng-model="isRequired">Required</label> <input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-required="isRequired" class="form-control" ng-model="data.myDate" name="input"> </form> <pre>input.$error = {{ngRequireForm.input.$error | json}}</pre> <h3>model-format</h3> <p>With this attribute, it will convert the model into a date string automatically.</p> <input type="text" class="form-control" datetime="medium" ng-model="data.myDateString" datetime-model="yyyy-MM-dd HH:mm:ss"> <pre class="output">myDateString = {{data.myDateString | json}}</pre> <pre class="code"><code><input type="text" datetime="medium" datetime-model="yyyy-MM-dd HH:mm:ss" ng-model="myDateString"></code></pre> <h3>datetime-timezone</h3> <p>By the default, angular-datetime will format the date in the local timezone. Use <code>datetime-timezone</code> to specify a different timezone.</p> <input type="text" datetime="yyyy-MM-dd HH:mm:ssZ" ng-model="data.myDate" class="form-control" datetime-timezone="+0000"> <pre>myDate = {{data.myDate | json}}</pre> <pre class="code"><code><input type="text" datetime="yyyy-MM-dd HH:mm:ssZ" ng-model="myDate" datetime-timezone="+0000"></code></pre> <p>Also support expression.</p> <input type="text" datetime="yyyy-MM-dd HH:mm:ssZ" ng-model="data.myDate" class="form-control" datetime-timezone="data.myTimezone"> <pre>myDate = {{data.myDate | json}}<br>myTimezone = {{data.myTimezone | json}}</pre> <pre class="code"><code><input type="text" datetime="yyyy-MM-dd HH:mm:ssZ" ng-model="data.myDate" datetime-timezone="myTimezone"></code></pre> <div class="form-group"> <label> Timezone <input type="text" ng-model="data.myTimezone" pattern="[+-]\d{2}:?\d{2}" class="form-control"> </label> </div> <h3>datetime-separator</h3> <p>By the default, you can use left/right keys to navigate between each part of date. With this attribute, you will be able to use different keys to jump to next part.</p> <input type="text" class="form-control" datetime="dd.MM.yyyy" ng-model="data.myDate" datetime-separator=",.-/"> <pre class="code"><code><input type="text" datetime="dd.MM.yyyy" ng-model="myDate" datetime-separator=",.-/"></code></pre> <h3>Localizable formats</h3> <p>The parser supports localizable formats in Angular.</p> <div class="form-group" ng-repeat="format in formats"> <label> {{format}} <input type="text" datetime="{{format}}" class="form-control" ng-model="data.myDate"> </label> </div> <h3>Other tests</h3> <div class="form-group"> <label for="duplicate-name">Duplicate name test</label> <input type="text" datetime=",sss .sss" ng-model="data.myDate" class="form-control" id="duplicate-name"> </div> <div class="form-group"> <label> MySQL date part <input type="text" class="form-control" datetime="yyyy-MM-dd" ng-model="data.myDate"> </label> </div> <div class="form-group"> <label> Default timezone <input type="text" class="form-control" datetime="yyyy-MM-dd HH:mm:ssZ" ng-model="data.myDate"> </label> </div> <div class="form-group"> <label> UTC timezone <input type="text" class="form-control" datetime="yyyy-MM-dd HH:mm:ssZ" ng-model="data.myDate" datetime-timezone="+0000"> </label> </div> <div class="form-group"> <label> Custom Europe/Moscow timezone <input type="text" class="form-control" datetime="yyyy-MM-dd HH:mm:ssZ" ng-model="data.myDate" datetime-timezone="+0300"> </label> </div> <div class="form-group"> <label> datetime-model with min/max <input type="text" class="form-control" datetime="yyyy-MM-dd" datetime-model="yyyy-MM-ddTHH:mm:ssZZ" ng-model="data.myDateString2" min="Jan 1, 2000"> <pre class="code"><code>{{data.myDateString2 | json}}</code></pre> </label> </div> </body> </html>