バックスペースは日付ピッカーのクロムの前のページにリダイレクトされます

Question

日付ピッカーを使用して2つの日付の日付を選択しています....バックスペースをクリックしている間にテキストボックス値をクリアしています....クロムでは前のページにリダイレクトされます。

$().ready(function() { 

      var dates = $("#TestDateFrom, #TestDateTo").datepicker({ 
       changeMonth: true, 
       numberOfMonths: 1, 
       onSelect: function(selectedDate) { 
        var option = this.id == "TestDateFrom" ? "minDate" : "maxDate", 
        instance = $(this).data("datepicker"), 
        date = $.datepicker.parseDate(
        instance.settings.dateFormat || 
        $.datepicker._defaults.dateFormat, 
        selectedDate, instance.settings); 
        dates.not(this).datepicker("option", option, date); 
       } 
      }); 

      $("#TestDateFrom").keypress(function(e) { 
       switch (e.keyCode) { 
        case 8: 
         $("#TestDateFrom").val(""); // backspace 
         break; 
        default: 
         e.preventDefault(); 
         break; 
       } 
      }); 

      $("#TestDateTo").keypress(function(e) { 
       switch (e.keyCode) { 
        case 8: 
         $("#TestDateTo").val(""); // backspace 
         break; 
        default: 
         e.preventDefault(); 
         break; 
       } 
      }); 


     }) 

Answer 1

キーを押すとjqueryの内のイベント火災、キーアップダウンキーがブラウザ依存..ですので、安定した結果を得るために、すべての3つの中でイベントを発生さ...

この

$().ready(function() { 

      var dates = $("#TestDateFrom, #TestDateTo").datepicker({ 
       changeMonth: true, 
       numberOfMonths: 1, 
       onSelect: function(selectedDate) { 
        var option = this.id == "TestDateFrom" ? "minDate" : "maxDate", 
        instance = $(this).data("datepicker"), 
        date = $.datepicker.parseDate(
        instance.settings.dateFormat || 
        $.datepicker._defaults.dateFormat, 
        selectedDate, instance.settings); 
        dates.not(this).datepicker("option", option, date); 
       } 
      }); 

      $("#TestDateFrom").keyup(function(e) { 
       switch (e.keyCode) { 
        case 8: 
         $("#TestDateFrom").val(""); 
         e.preventDefault(); // backspace 
         break; 
        default: 
         e.preventDefault(); 
         break; 
       } 
      }); 
      $("#TestDateFrom").keydown(function(e) { 
       switch (e.keyCode) { 
        case 8: 
         $("#TestDateFrom").val(""); // 
         e.preventDefault(); 
         break; 
        default: 
         e.preventDefault(); 
         break; 
       } 
      }); 

      $("#TestDateFrom").keypress(function(e) { 
       switch (e.keyCode) { 
        case 8: 
         $("#TestDateFrom").val(""); // backspace 
         e.preventDefault(); 
         break; 
        default: 
         e.preventDefault(); 
         break; 
       } 
      }); 

      $("#TestDateTo").keypress(function(e) { 
       switch (e.keyCode) { 
        case 8: 
         $("#TestDateTo").val(""); // backspace 
         e.preventDefault(); 
         break; 
        default: 
         e.preventDefault(); 
         break; 
       } 
      }); 

      $("#TestDateTo").keyup(function(e) { 
       switch (e.keyCode) { 
        case 8: 
         $("#TestDateTo").val(""); // backspace 
         e.preventDefault(); 
         break; 
        default: 
         e.preventDefault(); 
         break; 
       } 
      }); 
      $("#TestDateTo").keydown(function(e) { 
       switch (e.keyCode) { 
        case 8: 
         $("#TestDateTo").val(""); // backspace 
         e.preventDefault(); 
         break; 
        default: 
         e.preventDefault(); 
         break; 
       } 
      }); 




     }) 

を試してみてください

Answer 2

これは私のために働いたが、私のdatepickerテキストボックスは読み取り専用に設定されています。ユーザーが日付を入力できるようにしたくありませんでした。私は2つのdatepickerテキストボックスのすべての "キー"イベントを処理する委任イベントリスナを作成しました。

$(document).on('keypress keydown keyup', '#txtDtFrom, #txtDtTo', function (e){ 
    if (e.keyCode == 8) e.preventDefault(); 
}); 

セレクタを単純化したい場合は、すべての日付ピッカーテキストボックスにクラスを追加することもできます。