代码之家 › 专栏 › 技术社区 › noMan

使用引导日期选择器格式化日期

bootstrap-datepicker jquery html javascript

noMan · 技术社区 · 10 月前

我有一个使用引导日期选择器的输入,但我希望输出格式像(日-月#,年) 例如:星期三-2025年1月1日。

<div class="col-md-6">
 <div class="form-group">
  <label>Date</label>
  <div class="date input-group">
   <input
    type="text"
    class="datepicker form-control"
    id="date-input"
   />
  </div>
 </div>
</div>

这是我用于更新输入值的脚本

$(document).ready(function () {
                $("#date-input").datepicker({
                    format: "mm/dd/yyyy", 
                    autoclose: true,
                });

                $(".datepicker").on("changeDate", function (e) {
                    const selectedDate = e.date; // Get selected date as JavaScript Date object
                    const options = { weekday: "long", year: "numeric", month: "long", day: "numeric" };
                    const formattedDate = selectedDate.toLocaleDateString("en-US", options);

$("#date-input").datepicker("update", formattedDate); 
                });
            });

但是它不更新输入值。但它在console.log上显示了正确的输出

4 回复 | 直到 10 月前

Eloi 10 月前

你给了日期选择器 fomat: "mm/dd/yyyy" . 如果你愿意(日-月#,年),只需按照文档进行更改。
https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#format .

fomat: "DD - MM d, yyyy"

Mister Jojo Åukasz Daniel Mastalerz 10 月前

您可以使用 toDisplay 功能,实现[ 习俗 ]格式化你需要的东西。

$(document).ready(function() {
  $("#date-input").datepicker({
    format: {
      toDisplay: function(date, format, language) {
        const options = {
          weekday: "long",
          month: "long",
          day: "numeric",
          year: "numeric"
        };
        return new Date(date).toLocaleDateString("en-US", options).replace(",", " -");
      },
      toValue: function(date, format, language) {
        return new Date(date);
      },
    },
    autoclose: true,
  });
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<body>
  <div class="container mt-5">
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label for="date-input">Date</label>
          <div class="input-group">
            <input type="text" class="form-control datepicker" id="date-input" placeholder="Select a date" />
          </div>
        </div>
      </div>
    </div>
  </div>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js" integrity="sha512-LsnSViqQyaXpD4mBBdRYeP6sRwJiJveh2ZIbW41EBrNmKxgr/LFZIiWT6yr+nycvhvauz8c2nYMhrP80YhG7Cw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Sakshi Mahajan 10 月前

在你的 changeDate 您需要在输入中添加格式化日期的函数update函数不设置输入值

// Set the formatted date to the input field
    $("#date-input").val(formattedDate);

这将解决您的问题

Birender Pathania 10 月前

更换

$("#date-input").datepicker("update", formattedDate); with $("#date-input").val(formattedDate);

datepicker(“update”)方法需要一个日期对象或与datepicker格式兼容的格式化日期字符串 .val()直接将输入值设置为格式化的日期字符串

如果要在显示格式化文本时保持表单提交的基础日期值,可以使用隐藏输入