diff --git a/src/App.js b/src/App.js
index c34243b..a7ef76b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,6 +8,7 @@ import { getCalendarType, get_ad_bs_listener } from './nepali_date_picker/ad_bs_
 import { Switch, Space } from 'antd';
 // import 'antd/dist/antd.css';
 import NepaliRangeInputPicker from './nepali_date_picker/range_input_picker';
+import CustomDateRangeToggler from './nepali_date_picker/custom_daterange_toggler';
 
 class App extends React.Component {
   constructor(props) {
@@ -55,6 +56,8 @@ class App extends React.Component {
         //   }
         // }} 
         />
+        <CustomDateRangeToggler  />
+        
         <NepaliRangeInputPicker />
 
         <NepaliCalendarRange />
diff --git a/src/nepali_date_picker/calendar_range.js b/src/nepali_date_picker/calendar_range.js
index 632077a..2c5c8a1 100644
--- a/src/nepali_date_picker/calendar_range.js
+++ b/src/nepali_date_picker/calendar_range.js
@@ -13,8 +13,8 @@ class NepaliCalendarRange extends Component {
         super(props)
 
         this.state = {
-            selected_date_1: '4-9-2020',
-            selected_date_2: '8-10-2020'
+            selected_date_1: null,
+            selected_date_2: null
         }
     }
 
@@ -49,6 +49,8 @@ class NepaliCalendarRange extends Component {
                     new_dt_group.selected_date_2=this.state.selected_date_1
                 }
 
+                typeof this.props.onChange==='function'&&this.props.onChange(new_dt_group.selected_date_1,new_dt_group.selected_date_2)
+
                 this.setState({
                     ...new_dt_group
                 })
@@ -70,7 +72,6 @@ class NepaliCalendarRange extends Component {
 
 
         return (<>
-            <div><pre>{JSON.stringify(this.state, null, 5)}</pre></div>
             <div className='rl-range-calendar'>
                 <NepaliCalendarForRange
                     selected_date_1={this.state.selected_date_1}
diff --git a/src/nepali_date_picker/custom_daterange_toggler.js b/src/nepali_date_picker/custom_daterange_toggler.js
new file mode 100644
index 0000000..0c12dfa
--- /dev/null
+++ b/src/nepali_date_picker/custom_daterange_toggler.js
@@ -0,0 +1,196 @@
+import React, { Component } from 'react';
+import { getCalendarType, get_ad_bs_listener, padDateMonth } from './ad_bs_date_render';
+import { Popover, Button } from 'antd';
+import NepaliCalendar from './calendar';
+import moment from 'moment';
+import { calendarFunctions } from './helper_bs';
+import NepaliCalendarRange from './calendar_range';
+
+class TogglerContent extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            selected_key: null,
+            isCustom: false
+        }
+
+
+    }
+
+    render() {
+        let isCustom = this.state.isCustom;
+        let showCustom = this.props.showCustom;
+        let options=this.props.options;
+        let selected_date_1=this.props.selected_date_1;
+        let selected_date_2=this.props.selected_date_2;
+
+        return (
+            <div className='selector-content-wrapper'>
+                <div className='selector-content'>
+                    {options.map((it)=>{
+                        return <Button onClick={()=>{
+                            typeof this.props.onChange==='function'&&this.props.onChange(it.dateFrom,it.dateTo)
+                            this.setState({
+                                isCustom:false
+                            })
+                        }}>{it.label}</Button>
+                    })}
+                    {showCustom && <Button onClick={() => {
+                        this.setState({ isCustom: true })
+                    }}>Custom</Button>
+                    }
+
+                </div>
+                {isCustom &&
+                    <div className='custom-range-selector-content'>
+                        <NepaliCalendarRange onChange={(dt1,dt2)=>{
+                            typeof this.props.onChange==='function'&&this.props.onChange(dt1,dt2)
+                        }} />
+                    </div>
+                }
+            </div>
+        )
+    }
+
+}
+class CustomDateRangeToggler extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            calendarType: props.calendarType,
+            selected_date_1:null,
+            selected_date_2:null,
+            selectorVisible:false
+        }
+    }
+
+    render() {
+
+        let label = "Last 7"
+        const {selected_date_1,selected_date_2,calendarType,selectorVisible}=this.state;
+        let rendering_val_1 = selected_date_1;
+        let rendering_val_2 = selected_date_2;
+
+        if (calendarType == "BS" && moment(selected_date_1, "DD-MM-YYYY").isValid()) {
+            let adDateObj = moment(selected_date_1, "DD-MM-YYYY");
+            let bsDateObj = calendarFunctions.getBsDateByAdDate(adDateObj.year(), adDateObj.month() + 1, adDateObj.date());
+            rendering_val_1 = (`${padDateMonth(bsDateObj.bsDate)}-${padDateMonth(bsDateObj.bsMonth)}-${(bsDateObj.bsYear)}`)
+        }
+        if (calendarType == "BS" && moment(selected_date_2, "DD-MM-YYYY").isValid()) {
+            let adDateObj = moment(selected_date_2, "DD-MM-YYYY");
+            let bsDateObj = calendarFunctions.getBsDateByAdDate(adDateObj.year(), adDateObj.month() + 1, adDateObj.date());
+            rendering_val_2 = (`${padDateMonth(bsDateObj.bsDate)}-${padDateMonth(bsDateObj.bsMonth)}-${(bsDateObj.bsYear)}`)
+        }
+
+        let is_disabled_left=false;
+        let is_disabled_right=false;
+
+        let options=[
+            {dateTo:moment().format("DD-MM-YYYY"),dateFrom:moment().subtract('day',6).format("DD-MM-YYYY"),label:"Last 7"},
+            {dateTo:moment().format("DD-MM-YYYY"),dateFrom:moment().subtract('day',29).format("DD-MM-YYYY"),label:"Last 30"},
+            {dateTo:moment().format("DD-MM-YYYY"),dateFrom:moment().subtract('day',59).format("DD-MM-YYYY"),label:"Last 60"},
+            {dateTo:moment().format("DD-MM-YYYY"),dateFrom:moment().subtract('day',179).format("DD-MM-YYYY"),label:"Last 180"},
+            {dateTo:moment().format("DD-MM-YYYY"),dateFrom:moment().subtract('day',359).format("DD-MM-YYYY"),label:"Last 360"}
+        ]
+        return (
+            <div className='rl-daterange-toggler'>
+                <div className='rl-daterange-toggler-selectors hand-cursor'>
+                    <Popover overlayClassName='popovercalendar' trigger='click'
+                        placement='bottomRight'
+                        visible={selectorVisible}
+                        onVisibleChange={(vis)=>{
+                            this.setState({
+                                selectorVisible:vis
+                            })
+                        }}
+                        content={<TogglerContent 
+                            showCustom
+                            selected_date_1={selected_date_1}
+                            selected_date_2={selected_date_2}
+                            options={options}
+                            onChange={(dt1,dt2)=>{
+                                this.setState({
+                                    selected_date_1:dt1,
+                                    selected_date_2:dt2,
+                                    selectorVisible:false
+                                })
+                            }}
+                        />}>
+                        <div className='selector-main'>
+                            <span>{label}</span> <span className='down-arrow'>&#x2304;</span>
+                        </div>
+                    </Popover>
+                </div>
+                <div className='rl-daterange-toggler-content'>
+                    <div className='switch left-switch hand-cursor' onClick={()=>{
+                        if(!is_disabled_left){
+                            // not disabled right;
+                            let dt_fr=moment(selected_date_1,"DD-MM-YYYY");
+                            let dt_to=moment(selected_date_2,"DD-MM-YYYY");
+                            let diff_days=dt_to.diff(dt_fr,'day');
+                            console.log("diff is",diff_days)
+                            if(isNaN(diff_days)){
+                                return;
+                            }
+                            this.setState({
+                                selected_date_2:selected_date_1,
+                                selected_date_1:dt_fr.subtract('day',diff_days).format("DD-MM-YYYY")
+                            })
+                        }
+                    }}>
+                        &#10094;
+                </div>
+                    <div className='label-body'>
+                        {rendering_val_1||"DD-MM-YYYY"} - {rendering_val_2||"DD-MM-YYYY"}
+                </div>
+                    <div className='switch right-switch hand-cursor' onClick={()=>{
+                        if(!is_disabled_right){
+                            // not disabled right;
+                            let dt_fr=moment(selected_date_1,"DD-MM-YYYY");
+                            let dt_to=moment(selected_date_2,"DD-MM-YYYY");
+                            let diff_days=dt_to.diff(dt_fr,'day');
+                            console.log("diff is",diff_days)
+                            if(isNaN(diff_days)){
+                                return;
+                            }
+                            this.setState({
+                                selected_date_1:selected_date_2,
+                                selected_date_2:dt_to.add('day',diff_days).format("DD-MM-YYYY")
+                            })
+                        }
+                    }}>
+                        &#10095;
+                </div>
+                </div>
+            </div>
+        );
+    }
+
+    componentDidMount() {
+
+        let ctx = this;
+        let ad_bs_app = get_ad_bs_listener();
+        this.ad_bs_sub_key = ad_bs_app.ad_bs.subscribe((dateType) => {
+            ctx.setState({
+                calendarType: dateType || "AD"
+            })
+        })
+
+
+        // this.calender_picker.addEventListener('focusout',this.onFocusedOut)
+
+    }
+
+    componentWillUnmount() {
+        let ad_bs_app = get_ad_bs_listener();
+        ad_bs_app.ad_bs.unsubscribe(this.ad_bs_sub_key)
+    }
+}
+
+CustomDateRangeToggler.defaultProps = {
+    calendarType: getCalendarType()
+}
+
+export default CustomDateRangeToggler;
diff --git a/src/nepali_date_picker/nepali_date_picker.css b/src/nepali_date_picker/nepali_date_picker.css
index 278613d..a0794dd 100644
--- a/src/nepali_date_picker/nepali_date_picker.css
+++ b/src/nepali_date_picker/nepali_date_picker.css
@@ -230,3 +230,48 @@
   .rl-nepali-rangepicker-wrapper .input-right:focus {
     border-left-width: 1px;
   }
+
+
+  .rl-daterange-toggler{
+    display: flex;
+    flex-wrap: nowrap;
+    width: fit-content;
+    /* background-color: var(--cl-success); */
+  }
+
+  .rl-daterange-toggler .rl-daterange-toggler-content{
+    display: flex;
+    flex-wrap: nowrap;
+    width: fit-content;
+    margin-left: 8px;
+  }
+  .rl-daterange-toggler .rl-daterange-toggler-content .label-body{
+      margin-left: 12px;
+      margin-right: 12px;
+  }
+  .rl-daterange-toggler .rl-daterange-toggler-content .switch{
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background-color: var(--cl-primary2);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+  }
+
+  .rl-daterange-toggler .selector-main{
+      display: flex;
+  }
+  .rl-daterange-toggler .down-arrow{
+    font-size: 110%;
+    line-height: 0.9rem;
+    margin-left: 8px;
+  }
+
+  .selector-content-wrapper .selector-content{
+      display: flex;
+      flex-direction: column;
+  }
+  .selector-content-wrapper{
+      display: flex;
+  }
\ No newline at end of file
diff --git a/src/nepali_date_picker/range_input_picker.js b/src/nepali_date_picker/range_input_picker.js
index 75d0925..e0984af 100644
--- a/src/nepali_date_picker/range_input_picker.js
+++ b/src/nepali_date_picker/range_input_picker.js
@@ -19,8 +19,8 @@ class NepaliRangeInputPicker extends Component {
         super(props)
 
         this.state = {
-            selected_date_1: '4-9-2020',
-            selected_date_2: '8-10-2020',
+            selected_date_1:null ,
+            selected_date_2: null,
             focused1: false,
             focused2: false,
             temp_value1: "",
@@ -85,6 +85,7 @@ class NepaliRangeInputPicker extends Component {
                     selected_date_1: dateObjectToString(ad_date),
                     selected_date_2: null
                 })
+                this.right_inp.focus()
 
             }
     }
@@ -227,6 +228,7 @@ class NepaliRangeInputPicker extends Component {
                                         _day, _month, _year, calendarType
                                     })
                                     let _new_selected_date = ""
+                                    this.right_inp.blur();
                                     if (calendarType == "AD") {
                                         let new_date = moment().date(_day).month(_month - 1).year(_year);
                                         _new_selected_date = new_date.format("DD-MM-YYYY");
@@ -238,7 +240,7 @@ class NepaliRangeInputPicker extends Component {
                                         this.onDateSelect(adDateStringToObject(_new_selected_date),false)
                                     }
 
-                                    this.right_inp.blur();
+                                    
                                     this.setState({
                                         temp_value2: "",
                                         // selected_date: _new_selected_date