date from 2001 BS

src/CalendarInput/CalendarHelper/NepaliCalendar.js

@@ -8,11 +8,14 @@ class NepaliCalendar implements Calendar {
     this.date = new NepaliDate(date);
   }
 
+
+
   getStartingDate() {
     const date = clone(this.date);
     date.setDate(1);
     const day = -Math.abs(date.getDay()) + 1;
     date.setDate(day);
+    console.log("check the starting date =>", date)
     return date;
   }
 
@@ -45,13 +48,16 @@ class NepaliCalendar implements Calendar {
   }
 
   getYearList() {
+    console.log("check this date =>", this.date)
     const yearList = [];
     const currentDate = new NepaliCalendar(this.date);
-    let yearStart = currentDate.getYear() - 150;
-    for (let i = 0; i < 200; i += 1) {
+    console.log("currentDate =>", currentDate.getYear()-79)
+    let yearStart = currentDate.getYear() - 79;
+    for (let i = 0; i < 80; i += 1) {
       yearList.push(yearStart);
       yearStart += 1;
     }
+    console.log("year start =>", yearList)
     return yearList;
   }
 

src/CalendarInput/Day.js

@@ -22,6 +22,11 @@ const styles = (isCurrentMonth, isSelectedDate) => StyleSheet.create({
   textStyle: {
     // eslint-disable-next-line no-nested-ternary
     color: isCurrentMonth ? (isSelectedDate ? 'white' : 'black') : 'grey',
+    alignSelf:"center",
+    textAlign:"center",
+    // padding:5,
+    marginLeft:5,
+    marginTop:5
   },
 });
 
@@ -32,10 +37,14 @@ const Day = ({
     isCurrentMonth && (selectedDate.getDate() === calendarDate.getDate()));
   return (
     <TouchableHighlight
+      disabled={!isCurrentMonth}
       style={style.container}
-      onPress={() => onChange(date)}
+      onPress={() => {
+        console.log("check the date =>", date)
+        onChange(date)
+      }}
     >
-      <Text style={[style.textStyle]}>{value} </Text>
+      <Text style={[style.textStyle,{fontFamily: "Poppins-Regular"}]}>{value} </Text>
     </TouchableHighlight>
   );
 };

src/CalendarInput/index.js

@@ -5,6 +5,7 @@ import {
   Text,
   Modal,
   Dimensions,
+  TouchableOpacity,
 } from 'react-native';
 import { Dropdown } from 'react-native-material-dropdown';
 import { clone } from 'lodash';
@@ -34,13 +35,13 @@ type Props = {
 const styles = {
   container: {
     backgroundColor: BACKGROUND_COLOR,
-    height: '50%',
+    // height: '80%',
     width: '88%',
     borderRadius: 10,
   },
   header: {
-    backgroundColor: APP_COLOR,
-    height: '33%',
+    backgroundColor: '#652D86',
+    // height: '33%',
     borderTopRightRadius: 10,
     borderTopLeftRadius: 10,
   },
@@ -187,6 +188,7 @@ class Calendar extends Component<Props> {
             <View style={styles.flexDirectionRow}>
               <View style={{ width: '25%', marginLeft: 10 }}>
                 <Dropdown
+                  renderVerticalScrollIndicator={false}
                   value={date.getYear()}
                   data={yearList}
                   itemColor={FONT_COLOR_BLACK_RGBA}
@@ -195,10 +197,11 @@ class Calendar extends Component<Props> {
                   onChangeText={v => this.changeYear(v)}
                 />
               </View>
-              <View style={{ width: '70%' }}>
+              {/* <View style={{ width: '70%' }}>
                 <View style={styles.flexDirectionRowReverse}>
                   <View style={{ width: 52 }}>
                     <Dropdown
+                      di
                       value={dateType}
                       data={DATE_TYPE}
                       itemColor={FONT_COLOR_BLACK_RGBA}
@@ -208,7 +211,7 @@ class Calendar extends Component<Props> {
                     />
                   </View>
                 </View>
-              </View>
+              </View> */}
             </View>
 
             <View style={{ alignContent: 'center', alignItems: 'center', marginBottom: 20 }}>
@@ -229,13 +232,19 @@ class Calendar extends Component<Props> {
           </View>
         </View>
 
-        <View style={{ alignContent: 'center', alignItems: 'center' }}>
+        <View style={{ alignContent: 'center', alignItems: 'center', justifyContent:"space-around"}}>
           <View style={{ width: '95%' }}>
             <WeekHeader />
             {data}
-            <View style={{ flexDirection: 'row-reverse' }}>
-              <Button title="Ok" onPress={() => onChange && onChange(selectedDate)} />
-              <Button title="Cancel" onPress={() => onCancel && onCancel(prevDate)} />
+            <View style={{ flexDirection: 'row-reverse',alignSelf:"flex-end" }}>
+              <TouchableOpacity onPress={() => {
+                onChange && onChange(selectedDate)
+              }}>
+                <Text style={{ color: APP_COLOR, fontSize: 18, fontFamily:"Poppins-Regular" }}>Select</Text>
+              </TouchableOpacity>
+              <TouchableOpacity onPress={() => onCancel && onCancel(prevDate)} >
+                <Text style={{ color: APP_COLOR, fontSize: 18, marginRight: 20,fontFamily:"Poppins-Regular" }}>Cancel</Text>
+              </TouchableOpacity>
 
             </View>
           </View>

src/index.js

@@ -23,7 +23,7 @@ const Calendar = ({ onChange, onCancel }) => (
           backgroundColor: 'rgba(52, 52, 52, 0.8)',
         }}
       >
-        <CalendarInput onChange={onChange} onCancel={onCancel} />
+        <CalendarInput onChange={onChange} onCancel={onCancel}/>
       </View>
     </Modal>
   </View>