在 Datepicker 中将日期格式更改为 yyyy-mm-dd

Posted 2023-05-07

【中文标题】在 Datepicker 中将日期格式更改为 yyyy-mm-dd

【英文标题】：Change the date format to yyyy-mm-dd in Datepicker

【发布时间】：2016-09-04 14:10:21

【问题描述】：

我正在为我的 html 字段使用 Datepicker。 HTML 代码是：

<input type="text" id="from-datepicker"/>

设置和获取日期选择器字段的 Jquery 代码是：

 $("#from-datepicker").datepicker( dateFormat: 'yy-mm-dd');
            $("#from-datepicker").on("change", function () 
                var fromdate = $(this).val();
                alert(fromdate);
            );

但是，此代码以'mm-dd-yyyy' 格式显示该字段。 有人能告诉我我哪里错了吗？

我导入的 CDN 是：

 <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js"></script>

    <link rel="stylesheet" type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker3.min.css">

提前致谢。

【参考方案1】：

是的，将 dateFormat 更改为仅格式，您需要 4 组 'y's

示例代码：

<script   src="https://code.jquery.com/jquery-2.2.3.min.js"   integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="   crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker3.min.css">
<script>
$( document ).ready(function() 
    $("#from-datepicker").datepicker( 
        format: 'yyyy-mm-dd'
    );
    $("#from-datepicker").on("change", function () 
        var fromdate = $(this).val();
        alert(fromdate);
    );
); 
</script>
<input type="text" id="from-datepicker"/>

【讨论】：

非常感谢@Jason。这很清晰，很重要。

【参考方案2】：

查看format 选项：http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#format

toDisplay：函数（日期、格式、语言）将日期对象转换为字符串，将存储在输入字段中 toValue: 将字符串对象转换为日期的函数（日期、格式、语言），用于日期选择

【讨论】：

嗨@BrOrlandi，谢谢。但我无法理解如何转换这些值。我不想只是保存它，而是转换并以 yyyy-mm-dd 格式存储它。你能告诉我这在我的代码中是如何工作的吗？

@nerd.post 听起来像是你可以在服务器端做的事情

【参考方案3】：

2018 年更新

从 bootstrap-datepicker 版本 1.6.4 开始，将输入元素上的 data-date-format 属性设置为 'yyyy-mm-dd' 也可以。

例如

  <input data-provide="datepicker" name="date_selected" data-date-format="yyyy-mm-dd" placeholder="Select date" required>

【参考方案4】：

选项是format

您可以为所有应用设置默认值：

$.fn.datepicker.defaults.format = 'yy-mm-dd';

或者：

$("#from-datepicker").datepicker(format: 'yy-mm-dd');