我正在使用日期范围选择器。您可以看看此https://jsfiddle.net/soongsta/r369crfv/。我也提供此daterangepicker的代码。
DateRangePicker的HTML代码
<!-- Date and time range -->
<div class="form-group">
<label>Date range button:</label>
<div class="input-group-btn">
<button type="button" class="btn btn-default" id="daterange-btn" style='width:230px'>
<i class="fa fa-calendar"></i> <span>defaut date</span>
<i class="fa fa-caret-down"></i>
</button>
<button id='btnDec' type="button" class="btn btn-danger btn-flat" title='Decrement month'><i class="fa fa-calendar-minus-o" aria-hidden="true"></i></button>
<button id='btnInc' type="button" class="btn btn-info btn-flat" title='Increment month'><i class="fa fa-calendar-plus-o" aria-hidden="true"></i></button>
</div>
</div>
<!-- /.form group -->
Javascript + Jquery()
var start = moment().startOf('month');
var end = moment().endOf('month');
var label = '';
$('#daterange-btn').daterangepicker({
locale: {
format: 'DD MMM YYYY'
},
startDate: moment(start),
endDate: moment(end),
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')],
}
},
function(start, end, label) {
if(isDate(start)){
$('#daterange-btn span').html(start.format('DD MMM YYYY') + ' - ' + end.format('DD MMM YYYY'));
}
});
$('#btnInc').click ( function(e) {
IncDecMonth('Inc')
})
$('#btnDec').click ( function(e) {
IncDecMonth('Dec')
})
function isDate(val) {
//var d = new Date(val);
//return !isNaN(d.valueOf());
var d = Date.parse(val);
console.log(d);
return Date.parse(val);
}
function IncDecMonth(Action) {
if(!isDate(start)){
start = moment().startOf('month');
}
if(Action == 'Inc'){
start = moment(start).add(1, 'month').startOf('month');
end = moment(start).endOf('month')
}
else
{
start = moment(start).subtract(1, 'month').startOf('month');
end = moment(start).endOf('month')
}
if(isDate(start)){
$('#daterange-btn span').html(start.format('DD MMM YYYY') + ' - ' + end.format('DD MMM YYYY'));
}
console.log('start='+start)
console.log('end='+end)
}
IncDecMonth();
我希望当人们选择日期范围时,请求应该以日期范围作为数据到达我的服务器。
为此,我编写了以下代码:-
<script type="text/javascript">
$(document).on("change","#daterange-btn span",function()
{
alert('hi'); //I am using this to check whether this function is actually being called or not.
$.ajax(
{
url:"post/datepicker/",
type:"POST",
data:{date:$("#daterange-btn span").html()},
dataType:"json"
});
});
</script>
但是我在服务器上看不到任何POST请求。此外,也没有显示``hi''的弹出窗口,这最终意味着未调用document.on('change')。
你能告诉我我在哪里做错吗?
答案 0 :(得分:-4)
确保将所有的ajax调用都包装在
$(function(){
})
以确保在使用jquery之前已加载dom
更新
对不起,我没有阅读整个问题,只看到了最后一个脚本标签。阅读问题后,我打开了daterangepicker的文档并修复了该问题。 这是工作脚本
<script type="text/javascript">
window.onload = function () {
//var start = ''; //moment().startOf('month');
//var end = ''; //moment().endOf('month');
//var label = '';
var start = moment().startOf('month');
var end = moment().endOf('month');
var label = '';
$('#daterange-btn').daterangepicker({
locale: {
format: 'DD MMM YYYY'
},
startDate: moment(start),
endDate: moment(end),
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')],
}
},
function (start, end, label) {
if (isDate(start)) {
$('#daterange-btn span').html(start.format('DD MMM YYYY') + ' - ' + end.format('DD MMM YYYY'));
}
});
$('#btnInc').click(function (e) {
IncDecMonth('Inc')
})
$('#btnDec').click(function (e) {
IncDecMonth('Dec')
})
function isDate(val) {
//var d = new Date(val);
//return !isNaN(d.valueOf());
var d = Date.parse(val);
//console.log(d);
return Date.parse(val);
}
function IncDecMonth(Action) {
if (!isDate(start)) {
start = moment().startOf('month');
}
if (Action == 'Inc') {
start = moment(start).add(1, 'month').startOf('month');
end = moment(start).endOf('month')
}
else {
start = moment(start).subtract(1, 'month').startOf('month');
end = moment(start).endOf('month')
}
if (isDate(start)) {
$('#daterange-btn span').html(start.format('DD MMM YYYY') + ' - ' + end.format('DD MMM YYYY'));
}
//console.log('start=' + start)
//console.log('end=' + end)
//
$('#daterange-btn').trigger('apply.daterangepicker');
}
IncDecMonth();
}
</script>
<script type="text/javascript">
$(function () {
$('#daterange-btn').on('apply.daterangepicker', function (ev, picker) {
$.ajax(
{
url: "post/datepicker/",
type: "POST",
data: { date: $("#daterange-btn span").html() },
dataType: "json"
});
});
});
</script>
在更新值之后,您缺少调用apply
事件,并且还监听了apply事件而不是span change
事件