Yii2 Boostrap period picker

Question

I'm using Yii2 and I would like to have the following things:

• A dropdown with "ranges" as items (week, full week, week-end, etc.) (done)
• A RangePicker that based on the chosen range will:
  • allow only some days as the startDate (ex: week = mondays; week-end = saturdays)
  • will automatically select the end date based on the start date (ex: week: monday to friday; full week: monday to sunday; week-end: saturday to sunday, etc.)

For the dropdown, it's fine. But for the DateRangePicker, I started using Krajee DateRangePicker and

• I do not find a callback for "onStartDateSelected" (I only saw a callback that is called when the range is selected, but not for individual start date or end date)
• I do not see a "setStopDate" function
• I do not see how to dynamically change the available days of weeks

I see that we can have a set of predefined periods like "last 7 days", "this month", etc. But this is not what I want. I want the user be able to select the start date but automatically calculate the end date based on what the user has set.

(I'm new in web dev, so please if you find anything that I could improve in my question, don't be afraid to share it)

Answer 1

You can use the following to accomplish the task:

Use the following library:

use kartik\date\DatePicker;

Use the following code in view:

<?php
$layout3 = '<span class="input-group-addon">From Date</span>
        {input1}
        <span class="input-group-addon">To Date</span>
        {input2}
        <span class="input-group-addon kv-date-remove">
            <i class="glyphicon glyphicon-remove"></i>
        </span>';
$previousDay = strtotime('-7 day', strtotime(date('d-M-Y'))); //Set as per your requirement[![enter image description here][1]][1]
echo DatePicker::widget([
    'type' => DatePicker::TYPE_RANGE,
    'name' => 'startDate',
    'value' => date('d-M-Y', $previousDay),
    'name2' => 'endDate',
    'value2' => date('d-M-Y'),
    'separator' => '<i class="glyphicon glyphicon-resize-horizontal"></i>',
    'layout' => $layout3,
    'pluginOptions' => [
        'autoclose' => true,
        'format' => 'dd-M-yyyy'
    ]
]);
?>