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: 2009-01
.
The model must always be a Date object, otherwise Angular will throw an error.
Invalid Date
objects (dates whose getTime()
is NaN
) 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.
The timezone to be used to read/write the Date
instance in the model can be defined using
ngModelOptions. By default, this is the timezone of the browser.
<input type="month"
ng-model="string"
[name="string"]
[min="string"]
[max="string"]
[ng-min=""]
[ng-max=""]
[required="string"]
[ng-required="string"]
[ng-change="string"]>
Param | Type | Details |
---|---|---|
ngModel | string |
Assignable angular expression to data-bind to. |
name
(optional)
|
string |
Property name of the form under which the control is published. |
min
(optional)
|
string |
Sets the |
max
(optional)
|
string |
Sets the |
ngMin
(optional)
|
datestring |
Sets the |
ngMax
(optional)
|
datestring |
Sets the |
required
(optional)
|
string |
Sets |
ngRequired
(optional)
|
string |
Adds |
ngChange
(optional)
|
string |
Angular expression to be executed when input changes due to user interaction with the input element. |
<script>
angular.module('monthExample', [])
.controller('DateController', ['$scope', function($scope) {
$scope.example = {
value: new Date(2013, 9, 1)
};
}]);
</script>
<form name="myForm" ng-controller="DateController as dateCtrl">
<label for="exampleInput">Pick a month in 2013:</label>
<input id="exampleInput" type="month" name="input" ng-model="example.value"
placeholder="yyyy-MM" min="2013-01" max="2013-12" required />
<div role="alert">
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.month">
Not a valid month!</span>
</div>
<tt>value = {{example.value | date: "yyyy-MM"}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>