|
@@ -65,13 +65,7 @@ interface DatePickerState {
|
|
|
field: 'startDate' | 'endDate';
|
|
|
}
|
|
|
|
|
|
-const EditNmDataScreen = ({
|
|
|
- navigation,
|
|
|
- route
|
|
|
-}: {
|
|
|
- navigation: any;
|
|
|
- route: any;
|
|
|
-}) => {
|
|
|
+const EditNmDataScreen = ({ navigation, route }: { navigation: any; route: any }) => {
|
|
|
const id = route.params?.regionId;
|
|
|
const token = storage.get('token', StoreType.STRING) as string;
|
|
|
|
|
@@ -301,22 +295,36 @@ const EditNmDataScreen = ({
|
|
|
}, [validateVisits, visits, navigation]);
|
|
|
|
|
|
const currentYear = new Date().getFullYear();
|
|
|
- const years = Array.from({ length: 100 }, (_, i) => currentYear - i);
|
|
|
- const months = [
|
|
|
- { label: '-', value: null },
|
|
|
- { label: 'January', value: 1 },
|
|
|
- { label: 'February', value: 2 },
|
|
|
- { label: 'March', value: 3 },
|
|
|
- { label: 'April', value: 4 },
|
|
|
- { label: 'May', value: 5 },
|
|
|
- { label: 'June', value: 6 },
|
|
|
- { label: 'July', value: 7 },
|
|
|
- { label: 'August', value: 8 },
|
|
|
- { label: 'September', value: 9 },
|
|
|
- { label: 'October', value: 10 },
|
|
|
- { label: 'November', value: 11 },
|
|
|
- { label: 'December', value: 12 }
|
|
|
- ];
|
|
|
+ const years = Array.from({ length: 100 }, (_, i) => currentYear - 99 + i);
|
|
|
+ const getAvailableMonths = (year: number) => {
|
|
|
+ const currentDate = new Date();
|
|
|
+ const currentYear = currentDate.getFullYear();
|
|
|
+ const currentMonth = currentDate.getMonth() + 1;
|
|
|
+
|
|
|
+ const allMonths = [
|
|
|
+ { label: '-', value: null },
|
|
|
+ { label: 'Jan', value: 1 },
|
|
|
+ { label: 'Feb', value: 2 },
|
|
|
+ { label: 'Mar', value: 3 },
|
|
|
+ { label: 'Apr', value: 4 },
|
|
|
+ { label: 'May', value: 5 },
|
|
|
+ { label: 'Jun', value: 6 },
|
|
|
+ { label: 'Jul', value: 7 },
|
|
|
+ { label: 'Aug', value: 8 },
|
|
|
+ { label: 'Sep', value: 9 },
|
|
|
+ { label: 'Oct', value: 10 },
|
|
|
+ { label: 'Nov', value: 11 },
|
|
|
+ { label: 'Dec', value: 12 }
|
|
|
+ ];
|
|
|
+
|
|
|
+ if (year == currentYear) {
|
|
|
+ return allMonths.filter((month) => month.value === null || month.value <= currentMonth);
|
|
|
+ }
|
|
|
+
|
|
|
+ return allMonths;
|
|
|
+ };
|
|
|
+
|
|
|
+ const months = getAvailableMonths(selectedYear);
|
|
|
|
|
|
const getDaysInMonth = (
|
|
|
year: number,
|
|
@@ -324,10 +332,20 @@ const EditNmDataScreen = ({
|
|
|
): Array<{ label: string; value: number | null }> => {
|
|
|
if (!month) return [{ label: '-', value: null }];
|
|
|
|
|
|
+ const currentDate = new Date();
|
|
|
+ const currentYear = currentDate.getFullYear();
|
|
|
+ const currentMonth = currentDate.getMonth() + 1;
|
|
|
+ const currentDay = currentDate.getDate();
|
|
|
+
|
|
|
const daysCount = moment(`${year}-${month}`, 'YYYY-M').daysInMonth();
|
|
|
const days = [{ label: '-', value: null }];
|
|
|
|
|
|
- for (let i = 1; i <= daysCount; i++) {
|
|
|
+ let maxDay = daysCount;
|
|
|
+ if (year == currentYear && month == currentMonth) {
|
|
|
+ maxDay = currentDay;
|
|
|
+ }
|
|
|
+
|
|
|
+ for (let i = 1; i <= maxDay; i++) {
|
|
|
days.push({ label: i.toString(), value: i });
|
|
|
}
|
|
|
|
|
@@ -337,11 +355,30 @@ const EditNmDataScreen = ({
|
|
|
const days = getDaysInMonth(selectedYear, selectedMonth);
|
|
|
|
|
|
useEffect(() => {
|
|
|
+ const currentDate = new Date();
|
|
|
+ const currentYear = currentDate.getFullYear();
|
|
|
+ const currentMonth = currentDate.getMonth() + 1;
|
|
|
+ const currentDay = currentDate.getDate();
|
|
|
+
|
|
|
if (selectedDay && selectedMonth) {
|
|
|
const maxDays = moment(`${selectedYear}-${selectedMonth}`, 'YYYY-M').daysInMonth();
|
|
|
+
|
|
|
if (selectedDay > maxDays) {
|
|
|
- setSelectedDay(null);
|
|
|
+ setSelectedDay(currentDay);
|
|
|
}
|
|
|
+
|
|
|
+ if (
|
|
|
+ selectedYear === currentYear &&
|
|
|
+ selectedMonth === currentMonth &&
|
|
|
+ selectedDay > currentDay
|
|
|
+ ) {
|
|
|
+ setSelectedDay(currentDay);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (selectedYear === currentYear && selectedMonth && selectedMonth > currentMonth) {
|
|
|
+ setSelectedMonth(currentMonth);
|
|
|
+ setSelectedDay(currentDay);
|
|
|
}
|
|
|
}, [selectedYear, selectedMonth, selectedDay]);
|
|
|
|
|
@@ -352,14 +389,15 @@ const EditNmDataScreen = ({
|
|
|
) => {
|
|
|
setShowDatePicker({ visitId, field });
|
|
|
|
|
|
- if (initialDate) {
|
|
|
- setSelectedYear(initialDate.year || currentYear);
|
|
|
+ if (initialDate && initialDate.year) {
|
|
|
+ setSelectedYear(initialDate.year);
|
|
|
setSelectedMonth(initialDate.month || null);
|
|
|
setSelectedDay(initialDate.day || null);
|
|
|
} else {
|
|
|
- setSelectedYear(currentYear);
|
|
|
- setSelectedMonth(null);
|
|
|
- setSelectedDay(null);
|
|
|
+ const today = new Date();
|
|
|
+ setSelectedYear(today.getFullYear());
|
|
|
+ setSelectedMonth(today.getMonth() + 1);
|
|
|
+ setSelectedDay(today.getDate());
|
|
|
}
|
|
|
|
|
|
actionSheetRef.current?.show();
|
|
@@ -535,7 +573,7 @@ const EditNmDataScreen = ({
|
|
|
|
|
|
<ActionSheet
|
|
|
ref={actionSheetRef}
|
|
|
- gestureEnabled={true}
|
|
|
+ gestureEnabled={false}
|
|
|
headerAlwaysVisible={true}
|
|
|
CustomHeaderComponent={
|
|
|
<View style={styles.datePickerHeader}>
|
|
@@ -551,12 +589,17 @@ const EditNmDataScreen = ({
|
|
|
>
|
|
|
<View style={styles.wheelContainer}>
|
|
|
<View style={styles.wheelColumn}>
|
|
|
- <Text style={styles.wheelLabel}>Year</Text>
|
|
|
+ <Text style={styles.wheelLabel}>Day</Text>
|
|
|
<WheelPicker
|
|
|
style={styles.wheelPicker}
|
|
|
- pickerData={years}
|
|
|
- selectedValue={selectedYear}
|
|
|
- onValueChange={(value: number) => setSelectedYear(value)}
|
|
|
+ textColor={Colors.DARK_BLUE}
|
|
|
+ itemStyle={{ fontSize: 16, fontFamily: 'montserrat-600', padding: 0 }}
|
|
|
+ pickerData={days?.map((d) => d.label)}
|
|
|
+ selectedValue={days?.find((d) => d.value === selectedDay)?.label || '-'}
|
|
|
+ onValueChange={(value: string) => {
|
|
|
+ const day = days?.find((d) => d.label === value);
|
|
|
+ setSelectedDay(day?.value || null);
|
|
|
+ }}
|
|
|
/>
|
|
|
</View>
|
|
|
|
|
@@ -564,25 +607,74 @@ const EditNmDataScreen = ({
|
|
|
<Text style={styles.wheelLabel}>Month</Text>
|
|
|
<WheelPicker
|
|
|
style={styles.wheelPicker}
|
|
|
+ textColor={Colors.DARK_BLUE}
|
|
|
+ itemStyle={{
|
|
|
+ fontSize: 16,
|
|
|
+ fontFamily: 'montserrat-600'
|
|
|
+ }}
|
|
|
pickerData={months ? months?.map((m) => m.label) : []}
|
|
|
selectedValue={months?.find((m) => m.value === selectedMonth)?.label || '-'}
|
|
|
onValueChange={(value: string) => {
|
|
|
const month = months?.find((m) => m.label === value);
|
|
|
setSelectedMonth(month?.value || null);
|
|
|
- if (!month?.value) setSelectedDay(null);
|
|
|
+
|
|
|
+ if (!month?.value) {
|
|
|
+ setSelectedDay(null);
|
|
|
+ } else {
|
|
|
+ const currentDate = new Date();
|
|
|
+ const currentYear = currentDate.getFullYear();
|
|
|
+ const currentMonth = currentDate.getMonth() + 1;
|
|
|
+
|
|
|
+ if (selectedDay) {
|
|
|
+ const maxDaysInMonth = moment(
|
|
|
+ `${selectedYear}-${month.value}`,
|
|
|
+ 'YYYY-M'
|
|
|
+ ).daysInMonth();
|
|
|
+ if (selectedDay > maxDaysInMonth) {
|
|
|
+ setSelectedDay(maxDaysInMonth);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}}
|
|
|
/>
|
|
|
</View>
|
|
|
|
|
|
<View style={styles.wheelColumn}>
|
|
|
- <Text style={styles.wheelLabel}>Day</Text>
|
|
|
+ <Text style={styles.wheelLabel}>Year</Text>
|
|
|
<WheelPicker
|
|
|
style={styles.wheelPicker}
|
|
|
- pickerData={days?.map((d) => d.label)}
|
|
|
- selectedValue={days?.find((d) => d.value === selectedDay)?.label || '-'}
|
|
|
- onValueChange={(value: string) => {
|
|
|
- const day = days?.find((d) => d.label === value);
|
|
|
- setSelectedDay(day?.value || null);
|
|
|
+ textColor={Colors.DARK_BLUE}
|
|
|
+ itemStyle={{ fontSize: 16, fontFamily: 'montserrat-600' }}
|
|
|
+ isCyclic={true}
|
|
|
+ pickerData={years}
|
|
|
+ selectedValue={selectedYear}
|
|
|
+ onValueChange={(value: number) => {
|
|
|
+ setSelectedYear(value);
|
|
|
+
|
|
|
+ const currentDate = new Date();
|
|
|
+ const currentYear = currentDate.getFullYear();
|
|
|
+ const currentMonth = currentDate.getMonth() + 1;
|
|
|
+
|
|
|
+ if (value == currentYear && selectedMonth && selectedMonth > currentMonth) {
|
|
|
+ setSelectedMonth(currentMonth);
|
|
|
+ setSelectedDay(currentDate.getDate());
|
|
|
+ } else if (selectedMonth) {
|
|
|
+ const maxDaysInMonth = moment(
|
|
|
+ `${value}-${selectedMonth}`,
|
|
|
+ 'YYYY-M'
|
|
|
+ ).daysInMonth();
|
|
|
+ if (selectedDay && selectedDay > maxDaysInMonth) {
|
|
|
+ setSelectedDay(maxDaysInMonth);
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ value === currentYear &&
|
|
|
+ selectedMonth === currentMonth &&
|
|
|
+ selectedDay &&
|
|
|
+ selectedDay > currentDate.getDate()
|
|
|
+ ) {
|
|
|
+ setSelectedDay(currentDate.getDate());
|
|
|
+ }
|
|
|
+ }
|
|
|
}}
|
|
|
/>
|
|
|
</View>
|
|
@@ -708,7 +800,7 @@ const styles = StyleSheet.create({
|
|
|
},
|
|
|
wheelContainer: {
|
|
|
flexDirection: 'row',
|
|
|
- paddingHorizontal: 16,
|
|
|
+ paddingHorizontal: 14,
|
|
|
paddingTop: 16,
|
|
|
paddingBottom: 24
|
|
|
},
|
|
@@ -718,12 +810,12 @@ const styles = StyleSheet.create({
|
|
|
},
|
|
|
wheelLabel: {
|
|
|
fontSize: 14,
|
|
|
- color: '#666',
|
|
|
- marginBottom: 10,
|
|
|
- fontWeight: '500'
|
|
|
+ color: Colors.DARK_BLUE,
|
|
|
+ marginBottom: 8,
|
|
|
+ fontWeight: '600'
|
|
|
},
|
|
|
wheelPicker: {
|
|
|
- height: 215,
|
|
|
+ height: 210,
|
|
|
width: '100%',
|
|
|
backgroundColor: 'white'
|
|
|
},
|