Question

我正在使用bootstrap daterangepicker http://www.daterangepicker.com/#options我想隐藏输入框并显示一行中的所有范围框。

我喜欢跟随

之类的事情

var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!
    var yyyy = today.getFullYear();

    if(dd<10) {
        dd='0'+dd
    } 

    if(mm<10) {
        mm='0'+mm
    } 

    today = dd+'/'+mm+'/'+yyyy;

    today = new Date();
    var yesterday = new Date(today);
    yesterday.setDate(today.getDate() - 1); //setDate also supports negative values, which cause the month to rollover.

    var dd = yesterday.getDate();
    var mm = yesterday.getMonth()+1; //January is 0!

    var yyyy = yesterday.getFullYear();
    if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} yesterday = dd+'/'+mm+'/'+yyyy;

    var sevenDays = 7; // Days you want to subtract
    var date = new Date();
    var last = new Date(date.getTime() - (sevenDays * 24 * 60 * 60 * 1000));
    var dd =last.getDate();
    var mm=last.getMonth()+1;
    var year=last.getFullYear();
    //console.log(last);
    sevenDays = dd+'/'+mm+'/'+year;

    $('#reportrange').daterangepicker({
        "showDropdowns": true,
        "showWeekNumbers": true,
        "autoApply": true,
        "locale": {
            "format": "DD/MM/YYYY",
            "separator": " - ",
            "applyLabel": "Apply",
            "cancelLabel": "Cancel",
            "fromLabel": "From",
            "toLabel": "To",
            "customRangeLabel": "Custom",
            "daysOfWeek": [
                "Su",
                "Mo",
                "Tu",
                "We",
                "Th",
                "Fr",
                "Sa"
            ],
            "monthNames": [
                "January",
                "February",
                "March",
                "April",
                "May",
                "June",
                "July",
                "August",
                "September",
                "October",
                "November",
                "December"
            ],
            "firstDay": 1
        },
        "startDate": "12/02/2015",
        "endDate": "12/08/2015"
    }, function(start, end, label) {
      console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
    });


    function cb(start, end) {
        $('#reportrange span').html(start + ' - ' + end);
    }
    cb(sevenDays, yesterday);



    $("#today").click(function() {
        console.log(this);
        //$("#reportrange").daterangepicker("show"); 
        //fix format before parsing
        var dd = today.getDate();
        var mm = today.getMonth()+1; //January is 0!
        var yyyy = today.getFullYear();

        if(dd<10) {
            dd='0'+dd
        } 

        if(mm<10) {
            mm='0'+mm
        } 

        today = dd+'/'+mm+'/'+yyyy;
        cb(today, today);
    });

<div id="today" class="btn hoverDiv red-btn" style="display: inline-block;">Today</div>
                                        <div id="yesterday" class="btn hoverDiv red-btn" style="display: inline-block;">Yesterday</div>
                                        <div id="sevendays" class="btn hoverDiv red-btn" style="display: inline-block;">Last 7 Days</div>
                                        <div id="lastmonth" class="btn hoverDiv red-btn" style="display: inline-block;">Last Month</div>                                            
                                        <div id="reportrange" class="pull-right btn hoverDiv red-btn" style="display: inline-block;">
                                            <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
                                            <div id="customdate" style="display: inline-block;">Custom</div>
                                            <span></span> <b class="caret"></b>
                                        </div>

我想隐藏span标记

中的日期值

Answer 1

如上所述，似乎必须将datepicker附加到input，div或span标记。

你可以这样做：

<script type="text/javascript">
 $(document).ready(function() {
    $("#datepicker").datepicker({
        changeMonth: true,
        changeYear: true,
})
.hide()
.click(function() {
  $(this).hide();
});

    $("#datepickerImage").click(function() {
       $("#datepicker").show(); 
    });
 });
</script>

在daterangepicker

1 个答案: