CODEWITHSUNDEEP
javascriptjquerywordpressdatepicker
ev88
ev88

Reputation: 61

Simulating enter key after selecting date (jquery)

I've got a form field using the jQuery datepicker function on a Wordpress website using a product customizer plugin. The form field by default was never intended to be a date picker, I added that later. While I can get the date picker working fine with the field itself, the only way it'll actually show on the product is if you press enter in the field after selecting the date. I'd like this to happen automatically so it appears after the user selects a date, or when the datepicker box loses focus. I've attempted to simulate the enter key being pressed using this but it didn't do anything (console log worked though):

   jQuery(function () {
  var e = jQuery.Event( "keydown", { keyCode: 13 } );
        jQuery("#ui-datepicker-div").focusout(function() {
 jQuery("#date-of-birth-field").focus();
 jQuery("#date-of-birth-field").trigger( e );
 console.log("test");
});

#ut-datepicker-div is the datpicker calendar element, while #date-of-birth-field is the input ID where the date appears.

Any other way of achieving this? I also tried the 'load' function but that didn't work either.

Upvotes: 0

Views: 758

Answers (1)

Twisty
Twisty

Reputation: 30899

Try this in your definition:

jQuery(function($) {
  $("#date-of-birth-field, #date-of-death-field, #companioin-2-date-of-birth-field, #companioin-2-date-of-death-field").datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange: "c-100:c+0",
    showButtonPanel: true,
    dateFormat: 'M dd yy',
    onSelect: function(dt, obj) {
      $(this).trigger($.Event("keypress", {
        which: 13
      }));
    }
  });

  $("#component-5ed524ac8d83c, #component-5ed671ac50881").click(function() {
    $(this).addClass("maxSize");
  });
});

When a Date is selected, it should trigger an Enter keypress.

Upvotes: 0

Related Questions