Back Space is redirect to previous page on chrome in date picker

Question

I am using date picker to select date for 2 dates....while clicking the backspace i am clearing the text box value....In firefox it working fine but in chrome it redirect to my previous page.

$().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;
                }
            });


        })

score 4 · Accepted Answer · answered Dec 08 '11 at 19:19

the event fire in jquery to key press , key up key down is browser dependent.. so fire the event in all the three to get stable result...

try this

$().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;
                }
            });




        })

Duncan · Answer 2 · 2016-04-20T17:31:50.580

This worked for me, but my datepicker textboxes are set to readonly. Didn't want the user to be able to type in a date. I created a delegated event listener that handles all the "key" events for the two datepicker textboxes.

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

You could also add a class to all datepicker textboxes if you want to simplify your selector a bit.

Back Space is redirect to previous page on chrome in date picker

2 Answers2