简体   繁体   English

如何在引导日期范围选择器中显示加载时的今天日期

[英]How to show Todays date on load in bootstrap daterange picker

Please find my program below, 请在下面找到我的程序,

How to show Today's date in the div.. as per below example .. by default it show Todays date but its showing previous month to today's date... if I click on Today from drop down still it shows date from previous month to today's date. 如何在div中显示今天的日期。如以下示例所示。默认情况下,它显示今天的日期,但显示的是上个月到今天的日期...如果我从下拉菜单中单击“今天”,它仍显示上个月到今天的日期日期。 On page load itself how to show from and to date as Today's date 在页面加载自身如何和日期作为今天的日期显示

<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" />

<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />        

<script type="text/javascript">
$(function() {

    function cb(start, end) {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        //alert($('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')));
    }
    cb(moment().subtract(29, 'days'), moment());

    $('#reportrange').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')]
        }
    }, cb);

});
</script>        

    </head>
    <body>
        <div id="reportrange" class="pull-left" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 20%">
            <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
            <span></span> <b class="caret"></b>


        </div>
    </body>
</html>

I just added following code in your code, In this we are calling 'getDate()' on click of button, try this code 我刚刚在您的代码中添加了以下代码,在此过程中,我们将在单击按钮时调用'getDate()' ,请尝试使用此代码

<input type="button" id="GetCalenderDate" value="Get Selected date" onclick="return getDate(); " />

<script>
    function getDate() {
        alert($('#reportrange span')[0].innerHTML); //Using Jquery selector
        alert(document.getElementsByTagName('span')[0].innerHTML); // using Javascript getElementsByTagName()
    }
</script>

Edit: Use split function if u want to store start date and end date in different variables 编辑:如果您要在不同的变量中存储开始日期和结束日期,请使用拆分功能

var selectedDate = $('#reportrange span')[0].innerHTML.split('-');
alert(selectedDate[0]); //Start date
alert(selectedDate[1]); //End date

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM