获取 daterangepicker bootstrap 的值

Posted 2023-05-07

【中文标题】获取 daterangepicker bootstrap 的值

【英文标题】：getting the value of daterangepicker bootstrap

【发布时间】：2013-11-08 05:41:57

【问题描述】：

您好，我是使用 javascript 的新手，在使用 daterangepicker 引导程序时遇到了问题。我设法实现了我得到的这个演示，但我一直坚持从 javascript 获取开始日期和结束日期的值。

这是javascript

<script type="text/javascript">
$(document).ready(function() 
    $('#reportrange').daterangepicker(
       
          startDate: moment().subtract('days', 29),
          endDate: moment(),
          minDate: '01/01/2012',
          maxDate: '12/31/2014',
          dateLimit:  days: 60 ,
          showDropdowns: true,
          showWeekNumbers: true,
          timePicker: false,
          timePickerIncrement: 1,
          timePicker12Hour: true,
          ranges: 
             'Today': [moment(), moment()],
             'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
             'Last 7 Days': [moment().subtract('days', 6), moment()],
             'Last 30 Days': [moment().subtract('days', 29), moment()],
             'This Month': [moment().startOf('month'), moment().endOf('month')],
             'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
          ,
          opens: 'left',
          buttonClasses: ['btn btn-default'],
          applyClass: 'btn-small btn-primary',
          cancelClass: 'btn-small',
          format: 'DD/MM/YYYY',
          separator: ' to ',
          locale: 
              applyLabel: 'Submit',
              fromLabel: 'From',
              toLabel: 'To',
              customRangeLabel: 'Custom Range',
              daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
              monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
              firstDay: 1
          
       ,
       function(start, end) 
        console.log("Callback has been called!");
        $('#reportrange span').html(start.format('D MMMM YYYY') + ' - ' + end.format('D MMMM YYYY'));

       
    );
    //Set the initial state of the picker label
    $('#reportrange span').html(moment().subtract('days', 29).format('D MMMM YYYY') + ' - ' + moment().format('D MMMM YYYY'));
 );
</script>  

这是要处理 onclick 方法的按钮

<button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>  

'start' 和 'end' 将包含日期的值。如果我希望这些值用作以后在我的项目中使用编码的输入，例如保存到数据库中，我该如何调用它们？

【参考方案1】：

$('#IDOfDateRangePicker').data('daterangepicker').startDate;
$('#IDOfDateRangePicker').data('daterangepicker').endDate;

【讨论】：

这只返回对象。正如@Erdogan 解释的那样，如果您想获得准确的值，请使用.endDate.format('YYYY-MM-DD');。

【参考方案2】：

给你的按钮一个 id

<button type="button" id="saveBtn" class="btn btn-primary" data-dismiss="modal">Save changes</button>

在脚本中添加 startDate 和 endDate 变量

var startDate;
var endDate;

在 daterangepicker 回调中设置这些变量

startDate = start;
endDate = end;

在$(document).ready 函数中连接该按钮的点击事件

$('#saveBtn').click(function()
    console.log(startDate.format('D MMMM YYYY') + ' - ' + endDate.format('D MMMM YYYY'));
);

完整的javascript

<script type="text/javascript">
var startDate;
var endDate;

$(document).ready(function() 
    $('#reportrange').daterangepicker(
       
          startDate: moment().subtract('days', 29),
          endDate: moment(),
          minDate: '01/01/2012',
          maxDate: '12/31/2014',
          dateLimit:  days: 60 ,
          showDropdowns: true,
          showWeekNumbers: true,
          timePicker: false,
          timePickerIncrement: 1,
          timePicker12Hour: true,
          ranges: 
             'Today': [moment(), moment()],
             'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
             'Last 7 Days': [moment().subtract('days', 6), moment()],
             'Last 30 Days': [moment().subtract('days', 29), moment()],
             'This Month': [moment().startOf('month'), moment().endOf('month')],
             'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
          ,
          opens: 'left',
          buttonClasses: ['btn btn-default'],
          applyClass: 'btn-small btn-primary',
          cancelClass: 'btn-small',
          format: 'DD/MM/YYYY',
          separator: ' to ',
          locale: 
              applyLabel: 'Submit',
              fromLabel: 'From',
              toLabel: 'To',
              customRangeLabel: 'Custom Range',
              daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
              monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
              firstDay: 1
          
       ,
       function(start, end) 
        console.log("Callback has been called!");
        $('#reportrange span').html(start.format('D MMMM YYYY') + ' - ' + end.format('D MMMM YYYY'));
        startDate = start;
         endDate = end;    

       
    );
    //Set the initial state of the picker label
    $('#reportrange span').html(moment().subtract('days', 29).format('D MMMM YYYY') + ' - ' + moment().format('D MMMM YYYY'));

    $('#saveBtn').click(function()
        console.log(startDate.format('D MMMM YYYY') + ' - ' + endDate.format('D MMMM YYYY'));
    );

 );
</script>  

【讨论】：

您好，谢谢。有效。我还有一个问题。如果我希望这些值用作以后在我的项目中使用编码的输入，例如保存到数据库中，我该如何调用它们？

你在服务器端使用什么？ php？ ASP.NET？

我不确定 JSP 是如何工作的，但基本的想法是在您的 HTML 表单中添加隐藏字段的开始日期和结束日期，设置与我相同的值设置上面的startDate和endDatejs变量，然后将容器表单提交到你的服务器。

你能帮我吗，因为默认显示为 2 个月，但我需要在桌面将其更改为 3，在移动设备上更改为 1 我该怎么做？

它在控制台 TypeError: startDate is undefined console.log(startDate.format('D MMMM YYYY') + ' - ' + endDate.format('D MMMM YYY.. it当我第一次单击时发生，但在更改并再次单击时工作正常

【参考方案3】：

var endDate=  $("#IDOfDateRangePicker").data('daterangepicker').endDate.format('YYYY-MM-DD');

或其他格式；

.endDate.format('YYYY-MM-DD'); 

.endDate.format('D MM YYYY');

.endDate.format('D MMMM YYYY');

【参考方案4】：

您必须检索数据对象：

var startDate = $('#reportrange').data('daterangepicker').startDate._d;
var endDate = $('#reportrange').data('daterangepicker').endDate._d;

请注意末尾的 _d 请求以获取实际的 JavaScript 日期对象。

另外，如果data 对象曾经是undefined，那么它可能是bootstrap.js 被重新实例化的结果。这发生在一个 MVC 页面上，我忘记用以下内容包围我的脚本：

@region scripts 

【参考方案5】：

daterangepicker startDate 和 endDate 返回时刻对象而不是 Javascript 日期对象。

以下是如何将时刻对象转换为日期对象：

let startDate = moment($('#selector').data('daterangepicker').startDate).toDate();
let endDate = moment($('#selector').data('daterangepicker').endDate).toDate();

【参考方案6】：

简单，直接获取输入范围：

$(document).ready(function()

    $('#reportrange span').bind('DOMSubtreeModified', function(e)
        alert('New value is: '+$('input[name=daterangepicker_start]').val()+' to '+$('input[name=daterangepicker_end]').val());
    );

)

【参考方案7】：

我知道这根本不优雅。还是分享吧。

首先，我们获取daterangepicker输入框的值：

var date_range = $('#date_range').val();

现在如果我们配置显示' - '之间的日期，让我们分开：

var dates = date_range.split(" - ");

以字符串形式获取日期：

var start = dates[0];
var end = dates[1];

获取日期为“D MMMM YY”格式的 Moment 对象：

var start = moment(dates[0],'D MMMM YY');
var end = moment(dates[1],'D MMMM YY');