EVOLUTION-MANAGER

Edit File: input[month].html

<a href='https://github.com/angular/angular.js/edit/v1.3.x/src/ng/directive/input.js?message=docs(input[month])%3A%20describe%20your%20change...#L477' 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#L477' 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[month]</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 month validation and transformation. In browsers that do not yet support
the HTML5 month input, a text element will be used. In that case, the text must be entered in a valid ISO-8601
month format (yyyy-MM), for example: <code>2009-01</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.
If the model is not set to the first of the month, the next view to model update will set it
to the first of the month.</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;month&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 month format (yyyy-MM).</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 month format (yyyy-MM).</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-month-input-directive')" class="btn pull-right">
    <i class="glyphicon glyphicon-edit">&nbsp;</i>
    Edit in Plunker</a>

<div class="runnable-example-file" 
      name="index.html"
      language="html"
      type="html">
      <pre><code>&lt;script&gt;&#10; angular.module(&#39;monthExample&#39;, [])&#10;   .controller(&#39;DateController&#39;, [&#39;$scope&#39;, function($scope) {&#10;     $scope.value = new Date(2013, 9, 1);&#10;   }]);&#10;&lt;/script&gt;&#10;&lt;form name=&quot;myForm&quot; ng-controller=&quot;DateController as dateCtrl&quot;&gt;&#10;  Pick a month int 2013:&#10;  &lt;input id=&quot;exampleInput&quot; type=&quot;month&quot; name=&quot;input&quot; ng-model=&quot;value&quot;&#10;     placeholder=&quot;yyyy-MM&quot; min=&quot;2013-01&quot; max=&quot;2013-12&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.month&quot;&gt;&#10;     Not a valid month!&lt;/span&gt;&#10;  &lt;tt&gt;value = {{value | date: &quot;yyyy-MM&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&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;2013-10&#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&#39;);&#10;  expect(value.getText()).toContain(&#39;&#39;);&#10;  expect(valid.getText()).toContain(&#39;myForm.input.$valid = false&#39;);&#10;});</code></pre>
    </div>

</p>

</div>