作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想获取我的daterangepicker
的预定义日期范围的值
我尝试使用 .val()
和 .text()
但不起作用,请参阅下面的代码
$(document).ready(function() {
console.log($('#reportrange').find(":selected").val());
});
$(function() {
var start = moment().subtract(6, 'days');
var end = moment();
function cb(start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
$('#reportrange').daterangepicker({
startDate: start,
endDate: 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')]
}
}, cb);
cb(start, end);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet" />
<div class="form-group">
<label for="sel1">Date:</label>
<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc;">
<i class="fa fa-calendar"></i>
<span></span>
</div>
</div>
最佳答案
您未定义的原因是 $(document).ready
和 $(function() {
确实同时运行,因此,您的 daterangepicker届时可能无法正确声明。因此,如果您想获取值,可以将它们放在回调函数中。
事实上,
daterangepicker startDate and endDate returns moment objects not Javascript Date objects.
$(function() {
var start = moment().subtract(6, 'days');
var end = moment();
var lstart,lend;
function cb(start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
lstart = moment($('#reportrange').data('daterangepicker').startDate).toDate(),
lend = moment($('#reportrange').data('daterangepicker').endDate).toDate();
console.log(lstart,lend)
}
$('#reportrange').daterangepicker({
startDate: start,
endDate: 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')]
}
}, cb);
cb(start, end);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js">
</script>
<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>
<div class="form-group">
<label for="sel1">Date:</label>
<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc;">
<i class="fa fa-calendar"></i>
<span></span>
</div>
</div>
现在,从那一刻起,您可以获取任何格式的日期。这是fiddlelink
关于javascript - Daterangepicker 如何获取预定义日期范围的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56087839/
我是一名优秀的程序员,十分优秀!