eternicode Datepicker and Bootstrap3 checkin checkout

Question

Edit: Got solution in answer.

Can some expert help me with the javascript code?

I have eternicode Datepicker working with bootstrap3 (it works when click to select a date) https://github.com/eternicode/bootstrap-datepicker/tree/bs3

But now I have two dates, Checkin and Checkout and I want to: When selecting checkout, it disables the days <= Checkin. When selecting checkin, if it is after checkout, change the checkout to +1 day after the checkin selected.

I have some html and javascript code but it doesn't work very well: When I select checkin, the checkout day is the Today day, and it must be selected checkin + 1day. When I select checkout, it only disables the days before the current day, only works if i select a day after the checkin day.

It seams that it is some problem with setValue of checkout.

The html code (inputs):

    <div class="form-group">
    <label for="DtChkIn">Data Checkin</label>
        <div class="input-group date" id="dp1">
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        <input type="text" class="form-control input-sm" id="DtChkIn" placeholder="Data CheckIn" readonly="readonly">
        </div>
</div>
<div class="form-group">
    <label for="DtChkOut">Data Checkout</label>
        <div class="input-group date" id="dp2">
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        <input type="text" class="form-control input-sm" id="DtChkOut" placeholder="Data CheckOut" readonly="readonly">
        </div>
</div>

And the javascript:

var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

var checkin = $('#dp1').datepicker({
    language: "pt",
    format: "dd/mm/yyyy",
    beforeShowDay: function (date) {
        return date.valueOf() < now.valueOf() ? false : '';
    }
}).on('changeDate', function (ev) {
    if (ev.date.valueOf() > checkout.date.valueOf()) {
        var newDate = new Date(ev.date);
        newDate.setDate(newDate.getDate() + 1);

        checkout.setValue(newDate);
    }

    checkin.hide();
    $('#DtChkOut').focus();
}).data('datepicker');

var checkout = $('#dp2').datepicker({
    language: "pt",
    format: "dd/mm/yyyy",
    beforeShowDay: function (date) {
        return date.valueOf() <= checkin.date.valueOf() ? false : '';
    }
}).on('changeDate', function (ev) {
    checkout.hide();
}).data('datepicker');

Hey Marcio, I stumbled across your question and saw that you found the solution yourself. Please add your solution as an answer and accept it so that people can instantly see that your question has a working answer. Thank you! — snrlx, Jan 30 '14 at 08:57

score 0 · Accepted Answer · answered Jan 30 '14 at 16:53

SOLUTiON: The script that works with eternicode datepicker bs3 branch (checkin checkout)

var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

var checkin = $('#dp1').datepicker({

    beforeShowDay: function (date) {
        return date.valueOf() >= now.valueOf();
    }
}).on('changeDate', function (ev) {
    if (ev.date.valueOf() > checkout.date.valueOf()) {
        var newDate = new Date(ev.date)
        newDate.setDate(newDate.getDate() + 1);
        checkout.setValue(newDate);
        checkout.setDate(newDate);
        checkout.update();
    }
    checkin.hide();
    $('#dp2')[0].focus();
}).data('datepicker');
var checkout = $('#dp2').datepicker({
    beforeShowDay: function (date) {
        return date.valueOf() > checkin.date.valueOf();
    }
}).on('changeDate', function (ev) {
    checkout.hide();
}).data('datepicker');

Notice the lines added to update checkin date before comparing to checkout date:

   checkout.setDate(newDate);
   checkout.update();

eternicode Datepicker and Bootstrap3 checkin checkout

1 Answers1