設置一個無效的日期字符串HTML5日期輸入

我想知道是否有可能一些JS檢查後設置一個無效的日期字符串轉換爲HTML5數據輸入，例如「今天」，而不是顯示XXXX-XXXX日期？設置一個無效的日期字符串HTML5日期輸入

請注意，我用角1.6工作使用它內置的指令，使這個黑客更難實現。

<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; 
    }); 
    }; 
}

來源

2017-08-09 Trabelsi Mohamed Hedi

嘗試改變輸入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; 
});

來源

2017-08-09 15:32:42 charlietfl

喜歡我就失去了輸入日期，特別是用戶將要訪問的移動體驗ter date手動... –

好吧，不能有兩種方法...無效的值，並保持'日期'類型。那麼必須考慮另一種方式來做到這一點。也許使用'<標籤=「dateNative」>' – charlietfl

謝謝你，但是這不適合我，在UI團隊不會接受添加標籤，以顯示所選日期：d –

元素可以使用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";

來源

2017-08-09 15:39:26 georgeawg

謝謝，這是有益的，但它只是需要一些工作，使之更加動態:) –

我建議動態類型改變是[自定義內部完成指令]（https://docs.angularjs.org/guide/directive），它附在''元素上。避免在視圖控制器中進行DOM操作。 – georgeawg

關於改變''類型指令的例子，請參見[在angularjs''元件上顯示密碼指令（https://stackoverflow.com/a/39258609/5535245）。 – georgeawg

設置一個無效的日期字符串HTML5日期輸入

回答

相關問題