如何为mm / yyyy创建输入字段?

时间:2018-07-26 11:50:31

标签: html angularjs

我使用的Angular 1.6v在一种情况下被击中。我在一个输入字段中需要输入月份/年份,范围从07/2018到12/2019。用户应输入该范围内的任何月份和年份。我尝试了html type ='month'。 但是在IE中,它不起作用。你们中的任何人都可以建议我该做什么以验证并仅允许用户输入该范围内的值。

 <input type="month" min="07/2018" max="12/2019"
        ng-model="course.plannedMonthYear" value="2018-07"
        error-label="Planned Month/Year" />

2 个答案:

答案 0 :(得分:0)

minmax属性必须是有效的ISO-8601月格式(yyyy-MM):

 ̶<̶i̶n̶p̶u̶t̶ ̶t̶y̶p̶e̶=̶"̶m̶o̶n̶t̶h̶"̶ ̶m̶i̶n̶=̶"̶0̶7̶/̶2̶0̶1̶8̶"̶ ̶m̶a̶x̶=̶"̶1̶2̶/̶2̶0̶1̶9̶"̶
 <input type="month" min="2018-07" max="2019-12"
        ng-model="course.plannedMonthYear" value="2018-07"
        error-label="Planned Month/Year" />

The DEMO

angular.module("app",[])
.controller("ctrl", function($scope){
  $scope.date1=new Date('2018-05');
})
.error {
  color: red;
}
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
    <form name="form1">
       <input type="month" min="2018-06" max="2019-11"
              ng-model="date1"
              name="date1"/>
    </form>
    {{date1 | date : 'MMMM yyyy' }}
    <div class="error" ng-show="form1.date1.$error.min">
      ERROR Date below MIN
    </div>
    <div class="error" ng-show="form1.date1.$error.max">
      ERROR Date above MAX
    </div>
</body>

答案 1 :(得分:-1)

您可以在输入字段上使用HTML模式属性。

https://www.w3schools.com/tags/att_pattern.asp

  

pattern属性指定一个正则表达式,   会检查元素的值。

这将允许您限制日期输入格式以及输入的最小/最大值。