日期范围选择器插件日期格式问题
Date Range Picker Plugin Date Format Issue
我遇到了日期范围选择器插件(通过 moment.js)将我的日期格式从 (MM/DD/YYYY) 转换为 Unix 日期格式的问题。
为了重现问题,我创建了一个 Fiddle。在 Fiddle 中,单击日期范围,将显示选择器。在选择器中,select 一个日期范围并单击 "apply"。执行此操作时,您会注意到日期范围格式现在采用 Unix 格式。
单击“应用”后如何将日期格式转换回 'MM/DD/YYYY'?
HTML
<div id="daterange"><span></span></div>
JQUERY
$(function() {
var listItem, applyClicked = false,
start = '10/10/2016',
end = '12/05/2016';
function cb(start, end) {
$('#daterange span').html(start + ' - ' + end);
}
//var num = $("#daterange").data("datepicker");
//cb(moment().subtract(num, 'days'), moment());
$('#daterange').daterangepicker({
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
locale: {
format: 'MM/DD/YYYY'
},
opens: "left",
startDate: start,
endDate: end,
maxDate: moment().endOf("day"),
alwaysShowCalendars: true,
autoUpdateInput: true
}, cb);
cb(start, end);
// Dont close daterangepicker immediately when predefined range selected
$(".ranges ul li").click(function() {
listItem = $(this).text();
});
$(".range_inputs").click(function() {
applyClicked = true;
});
$('#daterange').on('apply.daterangepicker', function(ev, picker) {
//var test = moment.unix(startDate).format("MM/DD/YYYY");
//$('#daterange span').html(test + ' - ' + end);
if (listItem != "Custom Range" && !applyClicked) {
picker.show();
applyClicked = false;
}
});
});
Fiddle
https://jsfiddle.net/coryspi/oka1noht/
在此先感谢您的帮助。
只需将您的开始值和结束值按片刻换行,然后将其格式化为 MM/DD/YYYY
:
function cb(start, end) {
$('#daterange span').html(moment(start).format('MM/DD/YYYY') + ' - ' + moment(end).format('MM/DD/YYYY'));
}
看看工作 fiddle:https://jsfiddle.net/6w2m83qa/
请注意,当您换行时,它会尝试了解您使用的格式。 MM/DD/YYYY
运行良好,Unix timestamp
也运行良好。
如果您的格式不是任何受支持的格式,例如。 DD/MM/YYYY
,你应该需要指定输入格式。
用这个替换你的回调函数
function cb(start, end) {
$('#daterange span').html(moment(start).format('MM/DD/YYYY') + ' - ' + moment(end).format('MM/DD/YYYY'));
}
只是你需要改变格式。
希望对您有所帮助。
正如您在 config documentation 中看到的,您的 cb 函数的类型为:
function(startDate, endDate, label) {
用户选择新日期时daterangepicker触发的回调函数
前两个参数是矩对象。
因此,您的函数变为:
function cb(start, end) {
$('#daterange span').html(start.format('MM/DD/YYYY') + ' - ' + end.format('MM/DD/YYYY'));
}
您可以在 dom 调用它,准备就绪:
cb(moment(start), moment(end));
已更新fiddle
我遇到了日期范围选择器插件(通过 moment.js)将我的日期格式从 (MM/DD/YYYY) 转换为 Unix 日期格式的问题。
为了重现问题,我创建了一个 Fiddle。在 Fiddle 中,单击日期范围,将显示选择器。在选择器中,select 一个日期范围并单击 "apply"。执行此操作时,您会注意到日期范围格式现在采用 Unix 格式。
单击“应用”后如何将日期格式转换回 'MM/DD/YYYY'?
HTML
<div id="daterange"><span></span></div>
JQUERY
$(function() {
var listItem, applyClicked = false,
start = '10/10/2016',
end = '12/05/2016';
function cb(start, end) {
$('#daterange span').html(start + ' - ' + end);
}
//var num = $("#daterange").data("datepicker");
//cb(moment().subtract(num, 'days'), moment());
$('#daterange').daterangepicker({
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
locale: {
format: 'MM/DD/YYYY'
},
opens: "left",
startDate: start,
endDate: end,
maxDate: moment().endOf("day"),
alwaysShowCalendars: true,
autoUpdateInput: true
}, cb);
cb(start, end);
// Dont close daterangepicker immediately when predefined range selected
$(".ranges ul li").click(function() {
listItem = $(this).text();
});
$(".range_inputs").click(function() {
applyClicked = true;
});
$('#daterange').on('apply.daterangepicker', function(ev, picker) {
//var test = moment.unix(startDate).format("MM/DD/YYYY");
//$('#daterange span').html(test + ' - ' + end);
if (listItem != "Custom Range" && !applyClicked) {
picker.show();
applyClicked = false;
}
});
});
Fiddle https://jsfiddle.net/coryspi/oka1noht/
在此先感谢您的帮助。
只需将您的开始值和结束值按片刻换行,然后将其格式化为 MM/DD/YYYY
:
function cb(start, end) {
$('#daterange span').html(moment(start).format('MM/DD/YYYY') + ' - ' + moment(end).format('MM/DD/YYYY'));
}
看看工作 fiddle:https://jsfiddle.net/6w2m83qa/
请注意,当您换行时,它会尝试了解您使用的格式。 MM/DD/YYYY
运行良好,Unix timestamp
也运行良好。
如果您的格式不是任何受支持的格式,例如。 DD/MM/YYYY
,你应该需要指定输入格式。
用这个替换你的回调函数
function cb(start, end) {
$('#daterange span').html(moment(start).format('MM/DD/YYYY') + ' - ' + moment(end).format('MM/DD/YYYY'));
}
只是你需要改变格式。
希望对您有所帮助。
正如您在 config documentation 中看到的,您的 cb 函数的类型为:
function(startDate, endDate, label) {
用户选择新日期时daterangepicker触发的回调函数
前两个参数是矩对象。
因此,您的函数变为:
function cb(start, end) {
$('#daterange span').html(start.format('MM/DD/YYYY') + ' - ' + end.format('MM/DD/YYYY'));
}
您可以在 dom 调用它,准备就绪:
cb(moment(start), moment(end));
已更新fiddle