栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

简单的angularjs日期输入

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

简单的angularjs日期输入

如果您想使用初始值填充字段,则可以执行以下操作

//Controller:$scope.myDate = new Date('2014-03-08T00:00:00');//HTML:<input type="date" ng-init="model=(myDate | date:'yyyy-MM-dd')" ng-model="model" />

但是,我强烈建议创建自定义日期字段指令。

定制输入字段指令具有以下优点:

  1. 模型与视图之间的双向绑定。例如,当您在输入字段中输入有效日期时,它将自动为模型分配一个javascript日期;当您指定有效的javascript日期作为模型时,它将自动在文本字段中设置其格式。
  2. 表单验证支持。输入无效日期时,可以设置$ error标志,该标志可以在视图绑定中使用(即显示错误消息)。设置错误标志还将设置
    form.$valid
    为false,以便您可以有条件地将表单提交到服务器。

实施自定义日期指令时,需要考虑三个基本事项:

  1. 一个解析器,将解析输入文本并返回模型(在这种情况下为javascript日期)。
  2. 用于格式化模型并将其显示在文本字段中的格式化程序。
  3. 设置一个可选的验证标志,该标志可以在UI中用于自定义表单验证。

日期指令:

myApp.directive('dateField', function($filter) {  return {      require: 'ngModel',      link: function(scope, element, attrs, ngModelController) {ngModelController.$parsers.push(function(data) {   //View -> Model   var date = Date.parseExact(data,'yyyy-MM-dd');   // if the date field is not a valid date    // then set a 'date' error flag by calling $setValidity   ngModelController.$setValidity('date', date!=null);   return date == null ? undefined : date;});ngModelController.$formatters.push(function(data) {   //Model -> View   return $filter('date')(data, "yyyy-MM-dd");});}    }});

注意:对于解析日期,此指令使用Date.js(外部库)。

CSS:

.error {  color:red;}.error-border {  border: solid 2px red;}

HTML:

<form name="myForm">     <input ng- type="date" name="myDate" ng-model="myDate" date-field />   <span ng-show="myForm.myDate.$error.date" >       Please enter a valid date!!!   </span><br /> Raw Date: {{myDate}}          <br /> Formatted Nicely: {{ myDate | date:'yyyy, MMMM dd'}}  <br /> Is Valid Date? {{ !myForm.myDate.$error.date}}         <br /> Is Form Valid? {{ myForm.$valid }}</form>

控制器:

myApp.controller('ctrl', function($scope) {    $scope.myDate = new Date('2014-03-08T00:00:00');});

演示JS小提琴与Date.js
演示JS提琴与Moment.js



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/386662.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号