如何实现HTML日期输入框以dd/mm/yyyy格式展示且限制手动输入？

我完全懂你碰到的这个棘手问题！原生HTML的date输入框格式被浏览器死死限制住，没法直接改成dd/mm/yyyy；好不容易用上jQuery Datepicker，结果输入框变成了能随便敲数字的空白框，完全失去了原生那种“只能点击选择”的便捷交互。结合你说的限制——只能用jQuery、自定义JS/CSS，不能加moment.js这类额外库，还是WordPress主题里的自定义代码——我给你整了一套完美贴合需求的方案：

核心思路 #

既然原生date控件没法自定义格式，咱们就用jQuery Datepicker替代它，同时通过JS阻止手动输入、用CSS模拟原生外观，实现“只能点击选择+dd/mm/yyyy格式”的效果。

完整代码实现 #

1. HTML调整（替换原date输入框）

把原有的type="date"改成type="text"，避免原生控件和jQuery插件冲突，还能解决空白框问题：

<input type="text" name="dto" id="date_timepicker_end" placeholder="dd/mm/yyyy">

2. jQuery代码（WordPress环境适配）

因为WordPress默认用jQuery的noConflict模式，咱们用自执行函数包裹代码，确保$符号正常使用：

jQuery(document).ready(function($) {
  // 初始化Datepicker，设置目标格式
  $('#date_timepicker_end').datepicker({
    dateFormat: 'dd/mm/yy', // 对应dd/mm/yyyy格式
    showOn: 'both', // 点击输入框或右侧按钮都能打开选择器
    buttonText: '选择日期', // 按钮自定义文本，可按需修改
    onSelect: function(selectedDate) {
      // 确保选中日期后格式正确填充
      $(this).val(selectedDate);
    }
  });

  // 禁止手动输入/粘贴，只能通过选择器修改日期
  $('#date_timepicker_end').on('keydown paste', function(e) {
    e.preventDefault();
    return false;
  });

  // 点击输入框直接唤起日期选择器，和原生交互一致
  $('#date_timepicker_end').on('click', function() {
    $(this).datepicker('show');
  });
});

3. CSS样式（模拟原生date输入框外观）

让输入框看起来和原生控件差不多，提升用户体验：

#date_timepicker_end {
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer; /* 鼠标悬停显示指针，提示可点击 */
  width: auto; /* 按需调整宽度 */
}

/* 调整Datepicker触发按钮的样式，贴近原生 */
.ui-datepicker-trigger {
  margin-left: 0.5rem;
  padding: 0.4rem 0.8rem;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.ui-datepicker-trigger:hover {
  background-color: #eee;
}

关键细节说明 #

• 替换input类型：把type="date"改成text是关键，不然原生控件和jQuery插件会冲突，导致输入框变成空白。
• 阻止手动输入：通过监听keydown和paste事件，彻底禁止用户手动输入或粘贴内容，确保只能通过选择器修改日期，和原生控件交互逻辑一致。
• WordPress适配：用jQuery(document).ready(function($) { ... })包裹代码，避免WordPress里的jQuery冲突问题。
• 样式模拟：通过CSS调整输入框和按钮的样式，让用户感觉和原生date控件没区别。

额外注意事项 #

如果你的WordPress主题没有加载jQuery UI Datepicker的资源，需要在主题的functions.php里添加以下代码，确保脚本和样式正常加载：

function enqueue_jquery_ui_datepicker() {
  // 加载jQuery UI Datepicker脚本
  wp_enqueue_script('jquery-ui-datepicker');
  // 加载jQuery UI基础样式（可替换成你喜欢的主题样式）
  wp_enqueue_style('jquery-ui-css', 'https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css');
}
add_action('wp_enqueue_scripts', 'enqueue_jquery_ui_datepicker');

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