Search code examples
javascriptjquerytwitter-bootstrapdatepickerbootstrap-datepicker

Linked Datepicker

I am new to bootstrap and trying to use linked datepicker where

  1. Only Date should be displayed (not time).

  2. Default Selected Date shown in Datepicker as well as in textbox should be today's date on page load (before selecting any date from datepicker default date appeared in text box should be today's date).

  3. Future dates should be disabled in startdate and enddate.

I am using following code :

Html Code

<div class="container">
    <div class="col-sm-6" style="height:75px;">
       <div class='col-md-5'>
            <div class="form-group">
                <div>Start</div>

                <div class='input-group date' id='startDate'>
                    <input type='text' class="form-control" name="startDate" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class='col-md-5'>
            <div class="form-group">
                <div>End</div>

                <div class='input-group date' id='endDate'>
                    <input type='text' class="form-control" name="org_endDate" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

Script

jQuery(function () {
    jQuery('#startDate').datepicker({
        //format: 'mm-dd-yyyy',
        endDate: '+0d',
        autoclose: true
    });
    jQuery('#endDate').datepicker({
        //format: 'mm-dd-yyyy',
        endDate: '+0d',
        autoclose: true,
        useCurrent: false
    });

    jQuery('#startDate').datetimepicker().datepicker("setDate",new Date());
    jQuery('#endDate').datetimepicker().datepicker("setDate",new Date());

  jQuery("#startDate").on("dp.change",function (e) {
        jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
    });
    jQuery("#endDate").on("dp.change",function (e) {
        jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date);
    });

});

Using jQuery('#startDate').datepicker().datepicker("setDate",new Date()); I can achieve point no. 2.

However, issue is future date disabled works for datepicker and startdate enddate selection works with datetimepicker. (Using datepicker and datetimepicker shows two datepikcer controls one on textbox other on addon)

How to combine this to achieve all the three point using only datepicker

Solution

  • I think that you are mixing two different libraries eonasdan datetimepicker and bootstrap datepicker.

    If you want to use the first library, then you have to:

    Here a working example:

    jQuery('#startDate').datetimepicker({
  format: 'MM-DD-YYYY',
  maxDate: moment().endOf('day'),
  defaultDate: moment()
}).on("dp.change",function (e) {
  jQuery('#endDate').data("DateTimePicker").minDate(e.date);
});

jQuery('#endDate').datetimepicker({
  format: 'MM-DD-YYYY',
  maxDate: moment().endOf('day'),
  defaultDate: moment()
}).on("dp.change",function (e) {
   jQuery('#startDate').data("DateTimePicker").maxDate(e.date);
});
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="container">
    <div class="col-sm-6" style="height:75px;">
       <div class='col-md-5'>
            <div class="form-group">
                <div>Start</div>

                <div class='input-group date' id='startDate'>
                    <input type='text' class="form-control" name="startDate" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class='col-md-5'>
            <div class="form-group">
                <div>End</div>

                <div class='input-group date' id='endDate'>
                    <input type='text' class="form-control" name="org_endDate" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

    If you want to use the bootstrap datepicker, then you have to:

    Here a working example:

    jQuery('#startDate').datepicker({
  format: 'mm-dd-yyyy',
  endDate: '0d',
  autoclose: true
}).on("changeDate",function (e) {
  jQuery('#endDate').datepicker("setStartDate", e.date);
});
var d = new Date();
var now = new Date(d.getFullYear(), d.getMonth(), d.getDate());
$('#startDate').datepicker('update', now);

jQuery('#endDate').datepicker({
  format: 'mm-dd-yyyy',
  endDate: '0d',
  autoclose: true
}).on("changeDate",function (e) {
   jQuery('#startDate').datepicker("setEndDate", e.date);
});
$('#endDate').datepicker('update', now);
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

<div class="container">
    <div class="col-sm-6" style="height:75px;">
       <div class='col-md-5'>
            <div class="form-group">
                <div>Start</div>

                <div class='input-group date' id='startDate'>
                    <input type='text' class="form-control" name="startDate" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class='col-md-5'>
            <div class="form-group">
                <div>End</div>

                <div class='input-group date' id='endDate'>
                    <input type='text' class="form-control" name="org_endDate" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

    Note that, according the docs, update accepts a Date object but $('#startDate').datepicker('update', new Date()); did not work for me (and I don't know why), while the following lines set a default date correctly:

    var d = new Date();
var now = new Date(d.getFullYear(), d.getMonth(), d.getDate());
$('#startDate').datepicker('update', now);