CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Hansmagz
Hansmagz

Reputation: 103

Bootstrap-datetimepicker select the past months

When i select a "Current Date" then a "Range" of how many months, how can it automatically output the date in a "from and to" format.

This is a picture of my project. the output of the "From" must be 02/01/2017, then the output of "To" must be 05/31/2017

Sample Picture

I am using Eonasdan's Bootstrap-datetimepicker: Link here

This is my code:

index.chtml

<div class="row">
    <label class="col-md-2 control-label">Current Month:</label>
    <div class="col-md-10">
        <div class="input-group date" id="dpMonth">
            <input type="text" class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>

<div class="row">
    <label class="col-md-2 control-label">Range:</label>
    <div class="col-md-10">
        <input id="txtRange" type="text" class="form-control">
    </div>
</div>

<div class="row">
    <label class="col-md-2 control-label">From:</label>
    <div class="col-md-10">
        <input id="txtFrom" type="text" class="form-control" disabled>
    </div>
</div>

<div class="row">
    <label class="col-md-2 control-label">To:</label>
    <div class="col-md-10">
        <input id="txtTo" type="text" class="form-control" disabled>
    </div>
</div>

Javascript:

$('#dpMonth').datetimepicker({
    format: 'MM/YYYY'
});

Upvotes: 0

Views: 234

Answers (1)

David Marcus
David Marcus

Reputation: 474

Here's a working demo: https://codepen.io/anon/pen/vZmMdV

It doesn't have any error handling, so you need to set that up. This is just to show you how you might implement it.

var range = $('#txtRange').val();
var toDate = $('#dpMonth').data("DateTimePicker").date().startOf('month').subtract(1, 'day');
var fromDate = $('#dpMonth').data("DateTimePicker").date().startOf('month').subtract(range, 'month');
$("#txtFrom").val(fromDate.format('L'));
$("#txtTo").val(toDate.format('L'));

Upvotes: 1

Related Questions