How to have Range selector with single calender

[ArslanAmeer]

Is there any possible way or configuration where we can select date range in a single calendar, I have tried with configuration, but I got a single calendar with a single date selector by only applying singleDatePicker="true"

        <input (datesUpdated)="selectedChange($event)" [(ngModel)]="selected"
           [autoApply]="options.autoApply"
           [closeOnAutoApply]="options.closeOnAutoApply"
           [customRangeDirection]="options.customRangeDirection"
           [linkedCalendars]="options.linkedCalendars"
           [lockStartDate]="options.lockStartDate"
           [maxDate]="maxDate"
           [showCancel]="options.showCancel"
           [showClearButton]="options.showClearButton"
           [showISOWeekNumbers]="options.showISOWeekNumbers"
           [showWeekNumbers]="options.showWeekNumbers" applyLabel="Okay"
           singleDatePicker="true"
           autocomplete="on"
           dateLimit="6"
           emptyWeekRowClass="empty-week"
           firstDayOfNextMonthClass="first-next-day"
           firstMonthDayClass="first-day" id="weekpicker"
           lastDayOfPreviousMonthClass="last-previous-day"
           lastMonthDayClass="last-day" matInput name="options"
           ngxDaterangepickerMd
           opens="left" type="radio">

Options:

options: any = {
        autoApply: false,
        alwaysShowCalendars: false,
        showCancel: false,
        showClearButton: false,
        linkedCalendars: true,
        singleDatePicker: true,
        showWeekNumbers: false,
        showISOWeekNumbers: false,
        customRangeDirection: false,
        lockStartDate: false,
        closeOnAutoApply: true,
    };
    maxDate = moment().max(moment().add(1, 'd'));
    minDate = moment().startOf('year');

[ali-jalall]

Hello @ArslanAmeer today i was facing the same problem and here's what i did to fix this problem P.S: it's not the best solution but it should do the trick

First you add your input like this with [singleDatePicker]="false"

<input type="text" matInput ngxDaterangepickerMd startKey="start" endKey="end" [(ngModel)]="selected" [singleDatePicker]="false" [autoApply]="true" [alwaysShowCalendars]="true" [ranges]="ranges" name="daterange" />

Then what you wanna do is hide the right calendar and make it only 1 calendar here's the code

:host ::ng-deep .md-drppicker.ltr .calendar.right { display: none; }

So this will hide the right calendar and make your left calendar rangable with ease

P.s: you might need to play with css little bit to fix the width and height of calendar but it won't be a huge problem

[ArslanAmeer]

@ali-jalall Hmmm.. i will look into it and update it if it works for me.