如何更改引导程序 Datepicker 中的日期格式？答案

【问题标题】：How to change the date format in bootstrap Datepicker?如何更改引导程序 Datepicker 中的日期格式？
【发布时间】：2016-07-19 12:51:52
【问题描述】：

datepicker的代码如下：

$("#startDate").datepicker({
    autoclose:true,
    startView:"months",
    minViewMode:"months",
    orientation: "bottom",
    format: "dd-MM-yyyy"
}).on('changeDate', function(selected){
    startDate = new Date(selected.date.valueOf());
    startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
    $('.to').datepicker('setStartDate', startDate);
});
$("#endDate").datepicker({
    autoclose:true,
    startView:"months",
    minViewMode:"months",
    orientation: "bottom",
    format: "dd-MM-yyyy"
}).on('changeDate', function(selected){
    FromEndDate = new Date(selected.date.valueOf());
    FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf())));
    $('.from').datepicker('setEndDate', FromEndDate);
});

我在前端得到的格式是：

2016 年 1 月 1 日

现在我需要的格式为：

2016 年 1 月

在日期选择器（前端）框中，而 01-01-2016 在后端。我怎样才能做到这一点？请大家帮帮我。

【问题讨论】：

先告诉我后端使用哪种语言
我到处都在使用 javascript。事实上，我正在获取日期值来过滤 D3js 中的数据。 @taposghosh
使用此库将您的日期转换为任何格式momentjs.com

标签： twitter-bootstrap datepicker bootstrap-datepicker

【解决方案1】：

您可以使用指定M yyyy 而不是dd-MM-yyyy 的format 选项简单地更改日期选择器（前端）格式。

然后您可以使用moment 将您的日期转换为使用您需要的格式的字符串，然后再将其发送到服务器。这里有一个使用moment parsing 函数和矩format 方法将从日期选择器获取的日期转换为DD-MMMM-YYYY 格式的字符串的示例。

$("#startDate").datepicker({
    autoclose:true,
    startView:"months",
    minViewMode:"months",
    orientation: "bottom",
    format: "M yyyy"
}).on('changeDate', function(selected){
    startDate = new Date(selected.date.valueOf());
    startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
    $('.to').datepicker('setStartDate', startDate);
});
$("#endDate").datepicker({
    autoclose:true,
    startView:"months",
    minViewMode:"months",
    orientation: "bottom",
    format: "M yyyy"
}).on('changeDate', function(selected){
    FromEndDate = new Date(selected.date.valueOf());
    FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf())));
    $('.from').datepicker('setEndDate', FromEndDate);
});

$('#btnSend').click(function(){
    // Getting date from the picker
    var startDate = $("#startDate").datepicker('getDate');
    var endDate = $("#endDate").datepicker('getDate');
    // Convert date to string in the given format
    var startDateServer = moment(startDate).format('DD-MMMM-YYYY');
    var endDateServer = moment(endDate).format('DD-MMMM-YYYY');
    // You can send startDateServer and endDateServer string to the server
    console.log(startDateServer, endDateServer);
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker3.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>

<input type="text" id="startDate" />
<input type="text" id="endDate" />
<button id="btnSend" class="btn btn-primary">Send</button>

【讨论】：

感谢您的详细解答。 @VincenzoC

【解决方案2】：

如果您想将日期格式转换为任何格式，请使用此库。

http://momentjs.com/

【讨论】：

我已经在使用moment js了。主要问题是我的前端日期格式。