range picker from calendar

raralabs · Aug 12, 2020 · 2f8e27b · 2f8e27b
1 parent dca8369
commit 2f8e27b
Show file tree

Hide file tree

Showing 5 changed files with 255 additions and 70 deletions.
diff --git a/src/App.js b/src/App.js
@@ -4,34 +4,56 @@ import './App.css';
 import { NepaliDatePicker } from './nepali_date_picker/index.js'
 import moment from 'moment';
 import NepaliCalendarRange from './nepali_date_picker/calendar_range';
+import { getCalendarType, get_ad_bs_listener } from './nepali_date_picker/ad_bs_date_render';
+import { Switch } from 'antd';
 
 class App extends React.Component {
   constructor(props) {
     super(props)
 
     this.state = {
-      date:'01-09-2020'
+      date: '01-09-2020',
+      checked: getCalendarType() == "BS"
     }
   }
   render() {
 
     return (
       <div >
-        <NepaliDatePicker 
-        value={this.state.date}
-        onChange={(val)=>{
-          this.setState({
-            date:val
-          })
-        }}
+        <Switch checked={this.state.checked}
+          unCheckedChildren="AD"
+          checkedChildren="BS"
+          onChange={(checked) => {
+            if (checked) {
+              // to bs
+              let ad_bs_listener = get_ad_bs_listener();
+              ad_bs_listener.ad_bs.publish("BS")
+            } else {
+              // to ad
+              let ad_bs_listener = get_ad_bs_listener();
+              ad_bs_listener.ad_bs.publish("AD")
+            };
+            this.setState({
+              checked: checked
+            })
+          }}></Switch>
+        <br></br>
+        <br></br>
+        <NepaliDatePicker
+          value={this.state.date}
+          onChange={(val) => {
+            this.setState({
+              date: val
+            })
+          }}
         // disableDate={(d) => {
         //   if (d <= moment()) {
         //     return true
         //   }
         // }} 
         />
         <br></br>
-        <NepaliCalendarRange/>
+        <NepaliCalendarRange />
         <br></br>
         {/* <NepaliDatePicker /> */}
 

diff --git a/src/nepali_date_picker/ad_bs_date_render.js b/src/nepali_date_picker/ad_bs_date_render.js
@@ -1,17 +1,17 @@
-import React,{ useState,useEffect, createContext } from 'react';
+import React, { useState, useEffect, createContext } from 'react';
 import moment from 'moment';
 import { calendarFunctions } from './helper_bs';
 
 
 var ad_bs_listener = {};
 
-var calendarType="BS";
+var calendarType = "AD";
 
 var ad_bs_sub_pub = Object.seal({
     key: 0,
     subscribers: {},
     subscribe: function (subscriber) {
-        console.log("subscribing for",this.key)
+        console.log("subscribing for", this.key)
         this.subscribers[this.key] = subscriber;
         return this.key++;
     },
@@ -28,7 +28,7 @@ var ad_bs_sub_pub = Object.seal({
         }
     },
     unsubscribe: function (key) {
-        console.log("unsubscribing",key)
+        console.log("unsubscribing", key)
         delete this.subscribers[key];
     },
 });
@@ -39,53 +39,68 @@ function get_ad_bs_listener() {
     return ad_bs_listener;
 }
 
-function getCalendarType(){
+function getCalendarType() {
     return calendarType
 }
-function setCalendarType(val){
-    calendarType=val
+function setCalendarType(val) {
+    calendarType = val
 }
 
 const AD_BS_RENDERER = ({ adDate, adDateFormat = "DD-MM-YYYY" }) => {
 
-   
+
     let adDateObj = moment(adDate, adDateFormat);
-    let bsDateObj=calendarFunctions.getBsDateByAdDate(adDateObj.year(),adDateObj.month()+1,adDateObj.date());
+    let bsDateObj = calendarFunctions.getBsDateByAdDate(adDateObj.year(), adDateObj.month() + 1, adDateObj.date());
     // const [_key, _setKey] = useState(1);
-    const [calendarType,setCalendarType]=useState(getCalendarType())
-    let new_key=null;
+    const [calendarType, setCalendarType] = useState(getCalendarType())
+    let new_key = null;
     useEffect(() => {
-        let _k=ad_bs_listener.ad_bs.subscribe((dateType)=>{
-            setCalendarType(dateType||"AD")
+        let _k = ad_bs_listener.ad_bs.subscribe((dateType) => {
+            setCalendarType(dateType || "AD")
         })
-        console.log("subscrr",_k)
-        new_key=_k
+        console.log("subscrr", _k)
+        new_key = _k
         // _setKey(_k)
         // ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
         // Specify how to clean up after this effect:
-    },[]);
+    }, []);
 
-    useEffect(()=>{
+    useEffect(() => {
         return function cleanup() {
-            console.log("key is",new_key,calendarType)
+            console.log("key is", new_key, calendarType)
             ad_bs_listener.ad_bs.unsubscribe(new_key)
             // ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
         };
-    },[]);
+    }, []);
 
-    if(adDate==null||adDate==""){
+    if (adDate == null || adDate == "") {
         return ""
     }
     if (adDateObj.isValid()) {
-        return calendarType=="AD"?adDate:(`${padDateMonth(bsDateObj.bsDate)}-${padDateMonth(bsDateObj.bsMonth)}-${(bsDateObj.bsYear)}`)
+        return calendarType == "AD" ? adDate : (`${padDateMonth(bsDateObj.bsDate)}-${padDateMonth(bsDateObj.bsMonth)}-${(bsDateObj.bsYear)}`)
 
     } else {
         return "Invalid Date"
     }
 }
 
- const padDateMonth=(val)=>{
-    return `${val}`.padStart(2,"0")
+const padDateMonth = (val) => {
+    return `${val}`.padStart(2, "0")
+}
+
+const dateObjectToString = (dt) => {
+    return `${dt.day}-${dt.month}-${dt.year}`
+}
+const adDateStringToObject=(ad_string,_format="DD-MM-YYYY")=>{
+        let dtObj=moment(ad_string,_format);
+        return {
+            day:dtObj.date(),
+            month:dtObj.month()+1,
+            year:dtObj.year()
+        }
+}
+const adDateObjectToMoment=(dt)=>{
+    return moment(dateObjectToString(dt),"DD-MM-YYYY")
 }
 
-export { get_ad_bs_listener,AD_BS_RENDERER,getCalendarType,setCalendarType,padDateMonth }
+export { get_ad_bs_listener, AD_BS_RENDERER, getCalendarType, setCalendarType, padDateMonth,dateObjectToString,adDateStringToObject,adDateObjectToMoment}