example/demo-1.5.html

<!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>

	<!--[if lte ie 8]>
	<script src="https://rawgit.com/scottjehl/Respond/master/dest/respond.src.js"></script>
	<![endif]-->
	<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>&lt;input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="myDate"&gt;</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>&lt;button ng-click="myDate = new Date">reset&lt;/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>&lt;input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="myDate" min="Jan 1, 2010" max="Dec 31, 2019"&gt;</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>&lt;input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="myDate" required&gt;</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>&lt;input type="text" datetime="medium" datetime-model="yyyy-MM-dd HH:mm:ss" ng-model="myDateString"&gt;</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>&lt;input type="text" datetime="yyyy-MM-dd HH:mm:ssZ" ng-model="myDate" datetime-timezone="+0000"&gt;</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>&lt;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>&lt;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>