CODEWITHSUNDEEP
jquerydatepicker
HiDayurie Dave
HiDayurie Dave

Reputation: 1807

jQuery Bootstrap date picker get next week date based on choosen date

I have 2 textbox date from & date to using jQuery boostrap datepicker.

<input type="text" id="from"/>
<input type="text" id="to"/>

$('#from').datepicker(
{
    format: "dd-M-yyyy",
    calendarWeeks: true,
    autoclose: true,
    todayHighlight: true
});

Now I want when I click date picker from, the textbox with id to will be filled next week date automatic base on choose date from.

Is it possible to do it?

Upvotes: 0

Views: 1864

Answers (3)

Ankur Verma
Ankur Verma

Reputation: 5933

There is a library called moment.js which is widely spread and accepted as well in order to do the calculations on Date object

$("#from").datepicker({
  onSelect: function(dateText){
    var fromDate = new Date(dateText);
    var nextDate = moment(fromDate).add(7, 'd').format('MM/DD/YYYY'); // ---> (A)
    $("#to").val(nextDate);
    console.log("u selected", dateText);
    console.log("next date is ", nextDate);
  }
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  From Date : <input id="from" />
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment-with-locales.min.js"></script>
  To Date: <input id='to' />
</body>
</html>

The code is pretty self-explanatory.

  1. The calculation is being done in Equation (A) and the format is applied to just return you the date in the format asked for.
  2. the calculation is happening on the date being selected.
  3. I have used the callback, onSelect() which will be called, every time you select a date from a datePicker.

Upvotes: 0

krezus
krezus

Reputation: 1451

I am not sure what you need from this "filled next week date automatic" but this example selected +7 days on the second datepicker from the first one selection. If you need to select whole week of second date input, you just need to change onSelect event inside. 

$(document).ready(function() {

$('#from').datepicker(
{
    calendarWeeks: true,
    autoclose: true,
    todayHighlight: true,
    
    onSelect: function (date) {
    var date2 = $('#from').datepicker("getDate");
    var nextDayDate = new Date();
    nextDayDate.setDate(date2.getDate() + 7);
    $('#to').datepicker().datepicker('setDate', nextDayDate);
    }
    
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <input type="text" id="from"/>
  <input type="text" id="to"/>

Upvotes: 1

Md. Shahidul Islam
Md. Shahidul Islam

Reputation: 330

Here is an idea to do that: 

  $('.datepicker').datepicker({
    format: {
        /*
         * Say our UI should display a week ahead,
         * but textbox should store the actual date.
         * This is useful if we need UI to select local dates,
         * but store in UTC
         */
        toDisplay: function (date, format, language) {
            var d = new Date(date);
            d.setDate(d.getDate() - 7);
            return d.toISOString();
        },
        toValue: function (date, format, language) {
            var d = new Date(date);
            d.setDate(d.getDate() + 7);
            return new Date(d);
        }
    }
});

You can also read this reference link http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#inputs

Upvotes: 0

Related Questions