如何更改引导日期选择器中的日期格式? [英] How to change the date format in bootstrap Datepicker?
问题描述
日期选择器的代码如下:
The code for datepicker is as follows:
$("#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);
});
我在前端获得的格式是:
The format which I get in front-end is:
2016年1月1日
01-January-2016
现在我需要的格式为:
2016年1月
在日期选择器(前端)框中为
,而在后端为 2016年1月1日.我怎样才能做到这一点?请帮帮我.
in the datepicker (front-end) box, whereas 01-01-2016 in the back-end. How can I do this? Please help me out guys.
推荐答案
您可以使用然后,您可以使用 moment 将日期转换为字符串,然后使用将其发送到服务器之前所需的格式.这里有一个使用将日期选择器中的日期转换为格式为DD-MMMM-YYYY
的字符串的示例.矩分析函数和矩 format
方法.
Then you can use moment to convert your Date to a string using the format you need before sendind it to server. Here there is an example of converting date got from the datepicker to a string in the format DD-MMMM-YYYY
using moment parsing function and moment format
method.
$("#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>
这篇关于如何更改引导日期选择器中的日期格式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!