求助：将jQuery UI Datepicker日期格式从MM/DD/YYYY改为DD/MM/YYYY

Got it, let's get that date format switched over for you! The core issue was how you were constructing the final date strings—we just need to swap the order of day and month, plus make sure single-digit days get leading zeros (like you already did for months). I also added a few small improvements to make the code cleaner and avoid common pitfalls.

Key Changes Made #

1. Adjust date string structure: Rearrange day to come before month when building the formatted dates, and add leading zero logic for single-digit days.
2. Align Datepicker input format: Set the jQuery UI Datepicker to use DD/MM/YYYY so user input matches your output format (and avoids parsing errors for dates like 13/01/2024).
3. Small quality-of-life fixes: Prevent form reload on submit, fix a button typo, and rename variables for better readability.

Updated Full Code #

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
  // Set datepicker to display and accept DD/MM/YYYY format
  $("#datepicker").datepicker({ dateFormat: 'dd/mm/yy' });
});
</script>
<script>
function myfunction(e) {
  // Stop form from reloading the page when submitted
  e.preventDefault();
  
  const orderDate = new Date(document.getElementById("datepicker").value);
  
  // Calculate print date (7 days after order)
  const printDate = new Date(orderDate);
  printDate.setDate(printDate.getDate() + 7);
  
  // Format print date to DD/MM/YYYY
  const formattedPrintDate = 
    (printDate.getDate() < 10 ? '0' : '') + printDate.getDate() + '/' +
    ((printDate.getMonth() + 1) < 10 ? '0' : '') + (printDate.getMonth() + 1) + '/' +
    printDate.getFullYear();
  
  // Calculate delivery date (10 days after order)
  const deliveryDate = new Date(orderDate);
  deliveryDate.setDate(deliveryDate.getDate() + 10);
  
  // Format delivery date to DD/MM/YYYY
  const formattedDeliveryDate = 
    (deliveryDate.getDate() < 10 ? '0' : '') + deliveryDate.getDate() + '/' +
    ((deliveryDate.getMonth() + 1) < 10 ? '0' : '') + (deliveryDate.getMonth() + 1) + '/' +
    deliveryDate.getFullYear();
  
  alert('Your order will be printed on ' + formattedPrintDate + '\nYou should receive your order ' + formattedDeliveryDate);
}
</script>
</head>
<body>
<form onSubmit="myfunction(event)">
<p>Date: <input type="text" id="datepicker" name="date"></p>
<input type="submit" value="Submit"> <!-- Fixed typo: "lable" → "value" -->
<p id="demo"></p>
</form>
</body>
</html>

Now when you select a date and submit, the alert will show dates in DD/MM/YYYY format, and the date picker will also use this format for consistent user experience.

内容的提问来源于stack exchange，提问作者Chris James Fewster