I'm using bootstrap daterangepicker how to predefine date range as default?

Question

Help me to set Specific Date Range as Default by Using bootstrap daterangepicker(Text Input)

<input type="text" class="form-control pull-right" id="trvlreqprd" name="trvlreqprd" placeholder="Click here to Choose Date">

JS:

$('#trvlreqprd').daterangepicker();

I need the text filed to be filled with predefined date. (For Example: 2014/11/05 - 2014/11/12)

Bootstrap Detail

---

filename: bootstrap-datepicker.js

Repo: https://github.com/eternicode/bootstrap-datepicker/

Answer 1

I just tried adding predefined dates to value attribute. Its working as i wanted. Thanks Guys for Helping me.

<input type="text" class="form-control pull-right" id="trvlreqprd" name="trvlreqprd" value="<?php echo "2014/11/05 - 2014/11/12"; ?>" placeholder="Click here to Choose Date">

Answer 2

copied from here and visit jsfiddle

 <div class="input-daterange" id="datepicker">
        <div class="input-group">
            <input type="text" class="input-small form-control" name="start" />
            <span class="input-group-addon">to</span>
            <input type="text" class="input-small form-control" name="end" />
        </div>
    </div>

JS

$('.input-daterange').datepicker({});

input between predefined date range

$('.input-daterange').datepicker({
    startDate: "01/11/2014",
    endDate: "10/01/2015"
});

Answer 3

set input values prior to calling datepicker.

$(function () {
$("#inputDatepicker_start").val("01/05/2014");
$("#inputDatepicker_end").val("26/05/2014");
$("#datepicker").datepicker({ format: "dd/mm/yyyy" });
});

Answer 4

This is the only thing that worked for me:

$("#trvlreqprd").val("01/01/2019 - 01/20/2019");
$("#trvlreqprd").keyup();

Answer 5

this is for date range... Get the example from datarangepicker's web site and changed the cb(moment(), moment()) based on your need. First moment() will give the start date, and the second one will give you the end date. So the following example will start 18 days from today, end today.

 cb(moment().subtract(18,'days'), moment());

    $('#reportrange').daterangepicker({
            "startDate": moment(),
            "endDate": moment(),
            "autoApply": true,
            "opens": "center",
            "buttonClasses": "btn-info",
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],                   
                'This Month': [moment().startOf('month'), moment().endOf('month')]                   
            }
        }, cb);

Answer 6

You can add predefined date into value attribute of input field. Like

<?php 
  $date_range = "2014/11/05 - 2014/11/12";
?>


<input type="text" class="form-control pull-right" id="trvlreqprd" name="trvlreqprd" placeholder="Click here to Choose Date" value="<?php echo $date_range;?>">

Answer 7

HTML Part

    <div id="report-date-range" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
        <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
        <span></span> <b class="caret"></b>
    </div>

Javascript

    function updateLabel(start, end, label) {
        if (label === 'Custom Range') {
            $("#report-date-range span").html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        } else {
            $("#report-date-range span").html(label);
        }
    }

    $("#report-date-range").daterangepicker({
        startDate: moment().startOf('day'),
        endDate: moment().endOf('day'),
        opens: "right",
        drops: "down",
        ranges: {
            'Today': [moment().startOf('day'), moment().endOf('day')],
            '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')]
        }
    }, updateLabel);

    // Set the default value
    var datepicker = $("#report-date-range").data('daterangepicker');
    var initialSel = 'This Month';   // Or something else
    if (initialSel && datepicker.ranges && datepicker.ranges[initialSel]) {
        var range = datepicker.ranges[initialSel];
        datepicker.chosenLabel = initialSel;
        datepicker.setStartDate(range[0]);
        datepicker.setEndDate(range[1]);
        updateLabel(datepicker.startDate, datepicker.endDate, datepicker.chosenLabel);
    } else {
        datepicker.chosenLabel = 'Today';
        updateLabel(datepicker.startDate, datepicker.endDate, datepicker.chosenLabel);
    }