在 Wordpress 后端使用 JQuery DatePicker答案

【问题标题】：Using JQuery DatePicker in Wordpress backend在 Wordpress 后端使用 JQuery DatePicker
【发布时间】：2021-03-12 20:39:43
【问题描述】：

我正在尝试将日期选择器添加到 wordpress 后端。最初尝试使用简单的 input type="date" 并且它在除 safari 之外的所有内容中都运行良好，显然没有实现该输入类型（或者我已经阅读过）所以......我决定使用 JQuery datepicker 但到目前为止它似乎小部件在不同的浏览器中返回不同的格式。

这是我的相关代码：

输入字段

<input type="text" id="new_date" name="new_date"  class="input" defaultValue="<?php echo date("Y-m-d"); ?>" value="<?php echo date("Y-m-d"); ?>" >

使用javascript

jQuery(document).ready(function($) {
    $("#new_date").datepicker({ 
        dateFormat: 'yy-mm-dd'
    });
});

我已经加载了 WP Datepicker 并激活它，并在设置中放置了#new_date，告诉它在后端使用 WP Datepicker，并在底部的日期格式文本框中添加了 yy-mm-dd。

它似乎在 Chrome 和 Edge 中运行良好，从 Datepicker 返回 2020-11-04 按预期点击 2020 年 11 月 4 日，但这里是有趣的地方。在 Firefox 和 Opera 中单击同一日期返回：11/04/2020 我没有 Mac，所以我不确定 Safari。

嗯嗯？

【问题讨论】：

在你的情况下，问题是格式化日期？
是的。似乎日期选择器的返回格式不同，具体取决于它在哪个浏览器上运行。 Chome 和 Edge 相似是有道理的，因为它们现在都使用相同的引擎。购买为什么，使用相同的代码点击日期选择器日历会在文本输入框中返回不同格式的日期？

标签： jquery wordpress datepicker

【解决方案1】：

您可以尝试像这样使用dateFormat 选项：

$( "#datepicker" ).datepicker( 
    "option", "dateFormat", "yy-mm-dd" // You can change yy-mm-dd of you need
);

这个例子 DatePicker 来自 jQuery

 $(function() {
    $( "#datepicker" ).datepicker();
    $( "#format" ).change(function() {
      $( "#datepicker" ).datepicker( 
      "option", "dateFormat",$(this ).val());
    });
 });

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Format date</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">

</head>
<body>
 
<p>Date: <input type="text" id="datepicker" size="30"></p>
 
<p>Format options:<br>
  <select id="format">
    <option value="mm/dd/yy">Default - mm/dd/yy</option>
    <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
    <option value="d M, y">Short - d M, y</option>
    <option value="d MM, y">Medium - d MM, y</option>
    <option value="DD, d MM, yy">Full - DD, d MM, yy</option>
    <option value="&apos;day&apos; d &apos;of&apos; MM &apos;in the year&apos; yy">With text - 'day' d 'of' MM 'in the year' yy</option>
  </select>
</p>
 
 
</body>
</html>

【讨论】：