2016-03-30 10 views
4

以下のスクリプトを使用して過去の日付を無効にしました。しかし、私は過去の日付をインナースピンの矢印で無効にすることはできません。過去の日付を入力タイプの日付とインナースピンの矢印で無効にする

多くの検索結果は、内側の回転矢印のみを非表示にします。私は内側の回転矢印を隠したくない。インナースピンの矢印で過去の日付を無効にすることはできますか?

//disable past dates 
var today = new Date().toISOString().split('T')[0]; 
document.getElementsByName("dateField")[0].setAttribute('min', today); 

//hide inner-spin arrows 
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
-webkit-appearance: none; margin:0; 
} 

答えて

1

ここで問題の1つは、意見に基づく理想となる「最良の行動とは何か」だと思います。そう、今日より前の日付をNEXT年に設定した場合、YEARを今年に変更すると、他の部分はどうすればよいですか?それは意見に基づく部分とあなたが操作したい "行動パターン"です。それはが失われた後手動で日付を操作する必要があるように見えます。 01から2017

  • 変更に<input id="when" type="date" min="2016-04-06" max="2099-12-31" />
  • 変更年月日の両方(2017年1月1日:

    上記を複製する手順の例:日付最小/最大を設定し

    1. 変更は、スピナーを用いて2016年までの年は
    2. 日は2016年1月1日
    として示し

    あなたの設定に従って、無効な日付が設定されました。フォーカスを失うと、これを検出し、その日付の有効性の問題を適切に管理する必要があります。最初の(最小)日付に戻しますか?それが有効な日付である次の年に?その日が有効な次の月に?あなたはここでの挑戦は、これらのいずれかがあなたの望む行動かもしれないが、それは私の希望する行動ではないかもしれないということです(私たちはどちらも意見が異なります)。

    EDIT:入力イベントトリガーであなたの最小値に設定します。

    var inputMyDate = document.querySelector('input#when'); 
    
    inputMyDate.addEventListener('input', function() { 
        var current = this.value; 
        var min = input.getAttribute("min"); 
        if (new Date(current) < new Date(min)) { 
        var setmin = new Date(min).toISOString().split('T')[0]; 
        this.value = setmin; 
        } 
    }); 
    
  • 1

    このコードはあなたを助けることができる:

    <form action="demo_form.asp"> 
    Enter a date before 1980-01-01: 
    <input type="date" name="bday" max="1979-12-31"><br> 
    
    Enter a date after 2000-01-01: 
    <input type="date" name="bday" min="2016-12-25"><br> 
    
    Quantity (between 1 and 5): 
    <input type="number" name="quantity" min="1" max="5"><br> 
    
    <input type="submit"> 
    </form> 
    
    関連する問題