JQuery datepicker ist auf das aktuelle Datum voreingestellt, wenn die Eingabetaste auf ein leeres Textfeld gedrückt wird

Question

Immer wenn die Eingabetaste auf dem Datepicker-Textfeld gedrückt wird, wird das heutige Datum ausgefüllt. Dieses Verhalten ist unter Jquery Datepicker site zu sehen. Wenn ich einen zufälligen Text wie 34123123123 eintippe und Enter drücke, wird das aktuelle Datum aufgelöst. Ich möchte dieses Verhalten vermeiden. Ich habe versucht, es mit dem folgenden Code, aber kein Glück zu behandeln.

$(".datepicker").datepicker().keydown(function (event) { 

    if(event.which === $.ui.keyCode.ENTER) 
    { 
     event.preventDefault();  
     console.log("enter key pressed " + $(this).val());   
     return false; 
    } 
}); 

Haben Sie irgendwelche Vorschläge, um dieses Problem zu beheben?

Answer 1

Während ich in einer früheren Inkarnation davon naiv sagte "benutze die Tools, die du bekommst", musst du sie vielleicht erweitern.

Art von einem "huh" -Moment. Wenn Sie das datePicker-Widget schließen, bestimmen Sie im Grunde, ob das Datum ausgewählt wurde, indem Sie auf ein Datum klicken oder indem Sie etwas in das Feld eingeben. Also hier ist etwas, das dir das sagen wird. Ich habe etwas davon aus here, in Bezug auf die Bestimmung, wo das closepicker Ereignis ausgelöst wurde, aber die onClose-Funktion selbst musste neu geschrieben werden, um Ihren Anwendungsfall zu entsprechen, soweit ich es verstehe.

$(function() { 
 
    var datePicker = $('#datepicker'); 
 
    datePicker.data('closedOn', 'document').datepicker({ 
 
    showButtonPanel: true, 
 
    onClose: function(date, options) { 
 
     // your logic goes here ... 
 
     var dateEl = $(this); 
 
     // so we either clicked out of the date select or we hit enter 
 
     // in the input. In this case we should use the data-oldValue 
 
     // we've been building in the keyup/blur trigger for the input. 
 
     // 
 
     if (dateEl.data('closedOn') == 'document') { 
 
     // if the user has entered MANUALLY a valid format date... 
 
     if(Date.parse(dateEl.data("oldValue"))) { 
 
      console.log("Manually entered a valid date!"); 
 
      dateEl.val(dateEl.data("oldValue")); 
 
     } else { 
 
      console.log("Not a valid date format...") 
 
      dateEl.val(""); 
 
     } 
 
     } else { 
 
     // Here, the user has clicked on a date in the calendar widget. 
 
     // If there were some sort of desired processing, that could 
 
     // happen here. 
 
     } 
 
    } 
 
    }).on("keyup", function(){ 
 
    $(this).data("oldValue", $(this).val()); 
 
}) 
 
    .datepicker('widget').on('mousedown', function(event) { 
 
    /*** 
 
    * Listener to detect if the user 
 
    * has closed the calendar by clicking 
 
    * on a given date, or by any other means. 
 
    * This will tell us if the date was changed 
 
    * by the date picker, or manually. 
 
    ***/ 
 
    var $this = $(this); 
 
    var target = $(event.target); 
 
    // If the button panel is enabled, and the user has 
 
    // clicked there... 
 
    if (target.hasClass('ui-datepicker-close')) { 
 
     datePicker.data('closedOn', 'byButtonPanel'); 
 
    }; 
 
    // Or if the user has clicked on a given date in the 
 
    // calendar widget... 
 
    if (typeof target.parent().data('month') != 'undefined') { 
 
     datePicker.data('closedOn', 'byDateSelect'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 

 
<input type="text" id="datepicker">