EVOLUTION-MANAGER

Edit File: input[datetime-local].html

<a href='https://github.com/angular/angular.js/edit/v1.3.x/src/ng/directive/input.js?message=docs(input[datetime-local])%3A%20describe%20your%20change...#L205' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a> <a href='https://github.com/angular/angular.js/tree/v1.3.9/src/ng/directive/input.js#L205' class='view-source pull-right btn btn-primary'> <i class="glyphicon glyphicon-zoom-in">&nbsp;</i>View Source </a> <header class="api-profile-header"> <h1 class="api-profile-header-heading">input[datetime-local]</h1> <ol class="api-profile-header-structure naked-list step-list"> <li> - input in module <a href="api/ng">ng</a> </li> </ol> </header> <div class="api-profile-description"> <p>Input with datetime validation and transformation. In browsers that do not yet support the HTML5 date input, a text element will be used. In that case, the text must be entered in a valid ISO-8601 local datetime format (yyyy-MM-ddTHH:mm:ss), for example: <code>2010-12-28T14:57:00</code>.</p> <p>The model must always be a Date object, otherwise Angular will throw an error. Invalid <code>Date</code> objects (dates whose <code>getTime()</code> is <code>NaN</code>) will be rendered as an empty string.</p> <p>The timezone to be used to read/write the <code>Date</code> instance in the model can be defined using <a href="api/ng/directive/ngModelOptions">ngModelOptions</a>. By default, this is the timezone of the browser.</p> </div> <div> <h2>Directive Info</h2> <ul> <li>This directive executes at priority level 0.</li> </ul> <h2>Usage</h2> <pre><code>&lt;input type=&quot;datetime-local&quot;&#10; ng-model=&quot;&quot;&#10; [name=&quot;&quot;]&#10; [min=&quot;&quot;]&#10; [max=&quot;&quot;]&#10; [required=&quot;&quot;]&#10; [ng-required=&quot;&quot;]&#10; [ng-change=&quot;&quot;]&gt;</code></pre> <section class="api-section"> <h3>Arguments</h3> <table class="variables-matrix input-arguments"> <thead> <tr> <th>Param</th> <th>Type</th> <th>Details</th> </tr> </thead> <tbody> <tr> <td> ngModel </td> <td> <a href="" class="label type-hint type-hint-string">string</a> </td> <td> <p>Assignable angular expression to data-bind to.</p> </td> </tr> <tr> <td> name <div><em>(optional)</em></div> </td> <td> <a href="" class="label type-hint type-hint-string">string</a> </td> <td> <p>Property name of the form under which the control is published.</p> </td> </tr> <tr> <td> min <div><em>(optional)</em></div> </td> <td> <a href="" class="label type-hint type-hint-string">string</a> </td> <td> <p>Sets the <code>min</code> validation error key if the value entered is less than <code>min</code>. This must be a valid ISO datetime format (yyyy-MM-ddTHH:mm:ss).</p> </td> </tr> <tr> <td> max <div><em>(optional)</em></div> </td> <td> <a href="" class="label type-hint type-hint-string">string</a> </td> <td> <p>Sets the <code>max</code> validation error key if the value entered is greater than <code>max</code>. This must be a valid ISO datetime format (yyyy-MM-ddTHH:mm:ss).</p> </td> </tr> <tr> <td> required <div><em>(optional)</em></div> </td> <td> <a href="" class="label type-hint type-hint-string">string</a> </td> <td> <p>Sets <code>required</code> validation error key if the value is not entered.</p> </td> </tr> <tr> <td> ngRequired <div><em>(optional)</em></div> </td> <td> <a href="" class="label type-hint type-hint-string">string</a> </td> <td> <p>Adds <code>required</code> attribute and <code>required</code> validation constraint to the element when the ngRequired expression evaluates to true. Use <code>ngRequired</code> instead of <code>required</code> when you want to data-bind to the <code>required</code> attribute.</p> </td> </tr> <tr> <td> ngChange <div><em>(optional)</em></div> </td> <td> <a href="" class="label type-hint type-hint-string">string</a> </td> <td> <p>Angular expression to be executed when input changes due to user interaction with the input element.</p> </td> </tr> </tbody> </table> </section> <h2 id="example">Example</h2><p> <div> <a ng-click="openPlunkr('examples/example-datetimelocal-input-directive')" class="btn pull-right"> <i class="glyphicon glyphicon-edit">&nbsp;</i> Edit in Plunker</a> <div class="runnable-example" path="examples/example-datetimelocal-input-directive" name="datetimelocal-input-directive" module="dateExample"> <div class="runnable-example-file" name="index.html" language="html" type="html"> <pre><code>&lt;script&gt;&#10; angular.module(&#39;dateExample&#39;, [])&#10; .controller(&#39;DateController&#39;, [&#39;$scope&#39;, function($scope) {&#10; $scope.value = new Date(2010, 11, 28, 14, 57);&#10; }]);&#10;&lt;/script&gt;&#10;&lt;form name=&quot;myForm&quot; ng-controller=&quot;DateController as dateCtrl&quot;&gt;&#10; Pick a date between in 2013:&#10; &lt;input type=&quot;datetime-local&quot; id=&quot;exampleInput&quot; name=&quot;input&quot; ng-model=&quot;value&quot;&#10; placeholder=&quot;yyyy-MM-ddTHH:mm:ss&quot; min=&quot;2001-01-01T00:00:00&quot; max=&quot;2013-12-31T00:00:00&quot; required /&gt;&#10; &lt;span class=&quot;error&quot; ng-show=&quot;myForm.input.$error.required&quot;&gt;&#10; Required!&lt;/span&gt;&#10; &lt;span class=&quot;error&quot; ng-show=&quot;myForm.input.$error.datetimelocal&quot;&gt;&#10; Not a valid date!&lt;/span&gt;&#10; &lt;tt&gt;value = {{value | date: &quot;yyyy-MM-ddTHH:mm:ss&quot;}}&lt;/tt&gt;&lt;br/&gt;&#10; &lt;tt&gt;myForm.input.$valid = {{myForm.input.$valid}}&lt;/tt&gt;&lt;br/&gt;&#10; &lt;tt&gt;myForm.input.$error = {{myForm.input.$error}}&lt;/tt&gt;&lt;br/&gt;&#10; &lt;tt&gt;myForm.$valid = {{myForm.$valid}}&lt;/tt&gt;&lt;br/&gt;&#10; &lt;tt&gt;myForm.$error.required = {{!!myForm.$error.required}}&lt;/tt&gt;&lt;br/&gt;&#10;&lt;/form&gt;</code></pre> </div> <div class="runnable-example-file" name="protractor.js" type="protractor" language="js"> <pre><code>var value = element(by.binding(&#39;value | date: &quot;yyyy-MM-ddTHH:mm:ss&quot;&#39;));&#10;var valid = element(by.binding(&#39;myForm.input.$valid&#39;));&#10;var input = element(by.model(&#39;value&#39;));&#10;&#10;// currently protractor/webdriver does not support&#10;// sending keys to all known HTML5 input controls&#10;// for various browsers (https://github.com/angular/protractor/issues/562).&#10;function setInput(val) {&#10; // set the value of the element and force validation.&#10; var scr = &quot;var ipt = document.getElementById(&#39;exampleInput&#39;); &quot; +&#10; &quot;ipt.value = &#39;&quot; + val + &quot;&#39;;&quot; +&#10; &quot;angular.element(ipt).scope().$apply(function(s) { s.myForm[ipt.name].$setViewValue(&#39;&quot; + val + &quot;&#39;); });&quot;;&#10; browser.executeScript(scr);&#10;}&#10;&#10;it(&#39;should initialize to model&#39;, function() {&#10; expect(value.getText()).toContain(&#39;2010-12-28T14:57:00&#39;);&#10; expect(valid.getText()).toContain(&#39;myForm.input.$valid = true&#39;);&#10;});&#10;&#10;it(&#39;should be invalid if empty&#39;, function() {&#10; setInput(&#39;&#39;);&#10; expect(value.getText()).toEqual(&#39;value =&#39;);&#10; expect(valid.getText()).toContain(&#39;myForm.input.$valid = false&#39;);&#10;});&#10;&#10;it(&#39;should be invalid if over max&#39;, function() {&#10; setInput(&#39;2015-01-01T23:59:00&#39;);&#10; expect(value.getText()).toContain(&#39;&#39;);&#10; expect(valid.getText()).toContain(&#39;myForm.input.$valid = false&#39;);&#10;});</code></pre> </div> <iframe class="runnable-example-frame" src="examples/example-datetimelocal-input-directive/index.html" name="example-datetimelocal-input-directive"></iframe> </div> </div> </p> </div>