【问题标题】:Set an invalid date string HTML5 date input设置无效的日期字符串 HTML5 日期输入
【发布时间】:2017-08-09 15:19:47
【问题描述】:

我想知道是否可以在一些 JS 检查后将无效的日期字符串设置为 HTML5 日期输入,例如“今天”而不是显示 XX-XX-XXXX 日期?

请注意,我正在使用 angular-1.6,它使用它的内置指令,这使得这种 hack 更难实现。

<input id="dateNative"
   type="date"
   ng-model="date.selectedDate"
   min="{{minDate | date:'yyyy-MM-dd'}}">


function Controller($scope, $log, $element, $document) {
  $scope.date = {};
  $scope.minDate = new Date();

  this.$postLink = () => {
    this.dateCtrl = angular.element($document[0].getElementById('dateNative')).controller('ngModel');
    this.dateCtrl.$parsers.unshift(date => {
      if (moment(new Date()).isSame(date, 'day')) {
        return 'Immediately';
      }
      return date;
    });
  };
}

【问题讨论】:

    标签: javascript angularjs html date


    【解决方案1】:

    尝试将输入 type 更改为文本

    this.dateCtrl.$parsers.unshift(date => {
      if (moment(new Date()).isSame(date, 'day')) {
        $element[0].type = 'text';
        return 'Immediately';
      }
      $element[0].type = 'date';
      return date;
    });
    

    【讨论】:

    • 这样我会丢失输入日期,特别是用户手动输入日期的移动体验...
    • 好吧,不能同时拥有它...无效值并保留date 类型。到时候就得想别的办法了。也许使用&lt;label for="dateNative"&gt;
    • 谢谢,但这不适合我,UI 团队不接受添加标签以显示所选日期:D
    • 想法只是将标签用于无效值(超过顶部输入)....否则它将不可见
    【解决方案2】:

    元素可以使用interpolation来定义输入类型

    <input id="dateNative"
       type="{{date.type}}"
       ng-model="date.selectedDate"
       min="{{minDate | date:'yyyy-MM-dd'}}" />
    
    $scope.date.type = "text";
    $scope.date.selectedDate = "Immediately";
    

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-11-22
    • 2011-08-19
    • 1970-01-01
    • 1970-01-01
    • 2013-02-19
    • 2023-03-16
    • 1970-01-01
    • 2016-11-04
    相关资源
    最近更新 更多