为何jQuery Date Dropdowns插件提交时返回null值？

Hey there, let's work through why your form is returning null for the dob field while the split date values are showing up under dob_.

First, let's recap your setup to make sure we're on the same page:

• Your HTML: <input type="text" id="dob"/> (the plugin auto-adds name="dob")
• Your JS config:

  $("#dob").dateDropdowns({ 
    submitFormat: "dd-mm-yyyy", 
    daySuffixes: false, 
    submitFieldName: 'dob' 
  });
  

• Submission result: {"dob": null, "dob_": {"day": "17", "month": "11", "year": "1957"}}

What's likely happening here #

It looks like the plugin isn't properly generating or populating the hidden field that should hold your merged dd-mm-yyyy date under the dob name. Instead, it's defaulting to storing the split day/month/year values under the dob_ namespace, while your original text input stays empty (hence the null).

Solutions to try #

1. Force the plugin to generate a hidden merged date field

Many date dropdown plugins require an explicit setting to enable the hidden input that stores the formatted date. Try adding hiddenInput: true to your config:

$("#dob").dateDropdowns({
  submitFormat: "dd-mm-yyyy",
  daySuffixes: false,
  submitFieldName: 'dob',
  hiddenInput: true // Ensures the merged date is stored in a hidden input with name="dob"
});

After updating, check your form in browser dev tools—you should see a hidden input with name="dob" and the value 17-11-1957.

2. Replace your text input with a container element

Sometimes conflicts happen when the plugin tries to work with an existing text input that already has a name attribute. Instead of using an <input>, use a <div> as the target for the plugin:

<div id="dob"></div>

Keep your JS config the same. The plugin will generate all necessary dropdowns and the hidden merged date field from scratch, avoiding any overlap with existing inputs.

3. Manual fallback (if plugin bug persists)

Since you've already filed an issue for the plugin, here's a temporary fix to populate the dob field on form submit:

$('form').on('submit', function(e) {
  // Get the plugin instance to access the formatted date
  const dateDropdown = $("#dob").data('dateDropdowns');
  const formattedDate = dateDropdown.getFormattedDate('dd-mm-yyyy');
  
  // Update the dob field with the merged date
  $(this).find('[name="dob"]').val(formattedDate);
});

This grabs the properly formatted date directly from the plugin instance and assigns it to your dob input right before the form submits.

内容的提问来源于stack exchange，提问作者Yasin Arafat