mini-vodacom-components
Version:
Vodacom mini app components
177 lines (160 loc) • 13.3 kB
JavaScript
Component({
mixins: [],
data: {
date_day_chosen: "DD",
date_month_chosen: "MM",
date_year_chosen: "YYYY",
selected_date_tab1: "date-selected-tab",
selected_date_tab2: "",
selected_date_tab3: "",
date_day_display_text_white: "",
date_month_display_text_white: "",
date_year_display_text_white: "",
days: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10","11", "12", "13", "14", "15","16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"],
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
years: ["2002", "2001", "2000", "1999", "1998", "1997", "1996", "1995", "1994", "1993", "1992", "1991", "1990", "1989", "1988", "1987", "1986", "1985", "1984", "1983", "1982", "1981", "1980", "1979", "1978", "1977", "1976", "1975", "1974", "1973", "1972", "1971", "1970", "1969", "1968", "1967", "1966", "1965", "1964", "1963", "1962", "1961", "1960", "1959", "1958", "1957", "1956", "1955", "1954", "1953", "1952", "1951", "1950", "1949", "1948", "1947", "1946", "1945", "1944", "1943", "1942", "1941", "1940", "1939", "1938", "1937", "1936", "1935", "1934", "1933", "1932", "1931", "1930", "1929", "1928", "1927", "1926", "1925", "1924", "1923", "1922", "1921", "1920"],
date_day_inner_container: ["date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container", "date-day-inner-container"],
day_text: ["date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text"],
date_month_inner_container: ["date-month-inner-container", "date-month-inner-container", "date-month-inner-container", "date-month-inner-container", "date-month-inner-container", "date-month-inner-container", "date-month-inner-container", "date-month-inner-container", "date-month-inner-container", "date-month-inner-container", "date-month-inner-container", "date-month-inner-container"],
month_text: ["date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text"],
date_year_inner_container: ["date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container", "date-year-inner-container"],
year_text: ["date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text", "date-selection-text"],
curr_id: "",
prev_id: "",
button_enabled: false,
day_selection: true,
month_selection: false,
dateChosen: []
},
props: {
onDoneDatePick: (dateChosen) => {console.log(' props datepicker this.data.dateChosen: ', this.data.dateChosen)}
},
didMount() {
},
didUpdate() {},
didUnmount() {},
methods: {
onDateDayTap(e) {
this.data.prev_id = this.data.curr_id;
this.data.curr_id = e.currentTarget.id;
const id = this.data.curr_id;
this.dayResetSelection(this.data.prev_id);
this.data.selected_date_tab1 = "";
this.data.selected_date_tab2 = "date-selected-tab";
this.setData({
selected_date_tab1: "",
selected_date_tab2: "date-selected-tab",
day_selection: false,
month_selection: true
});
this.data.date_day_inner_container[id] = "date-day-inner-container-selected";
this.data.day_text[id] = "date-selection-text-selected";
if (id < 9) {
this.data.date_day_chosen = '0'+ (id+1);
} else {
this.data.date_day_chosen = id+1;
}
this.data.dateChosen.push(this.data.date_day_chosen);
this.setData({
date_day_inner_container: this.data.date_day_inner_container,
day_text: this.data.day_text,
date_day_chosen: this.data.date_day_chosen,
date_day_display_text_white: "date-display-text-white"
});
},
dayResetSelection(id) {
this.data.date_day_inner_container[id] = "date-day-inner-container";
this.data.day_text[id] = "date-selection-text";
this.setData({
date_day_inner_container: this.data.date_day_inner_container,
day_text: this.data.day_text,
});
},
onDateMonthTap(e) {
this.dayResetSelection(this.data.curr_id);
this.setData({
date_day_inner_container: this.data.date_day_inner_container
});
this.data.prev_id = this.data.curr_id;
this.data.curr_id = e.currentTarget.id;
const id = this.data.curr_id;
this.data.selected_date_tab2 = "";
this.data.selected_date_tab3 = "date-selected-tab";
this.setData({
selected_date_tab2: "",
selected_date_tab3: "date-selected-tab",
month_selection: false,
year_selection: true,
date_month_display_text_white: "date-display-text-white"
});
this.monthResetSelection(this.data.prev_id);
this.data.date_month_inner_container[id] = "date-month-inner-container-selected";
this.data.month_text[id] = "date-selection-text-selected";
if (id < 9) {
this.data.date_month_chosen = '0'+ (id+1);
} else {
this.data.date_month_chosen = id+1;
}
this.data.dateChosen.push(this.data.date_month_chosen);
this.setData({
date_month_inner_container: this.data.date_month_inner_container,
month_text: this.data.month_text,
date_month_chosen: this.data.date_month_chosen
});
},
monthResetSelection(id) {
this.data.date_month_inner_container[id] = "date-month-inner-container";
this.data.month_text[id] = "date-selection-text";
this.setData({
date_month_inner_container: this.data.date_month_inner_container,
month_text: this.data.month_text,
});
},
onDateYearTap(e) {
this.monthResetSelection(this.data.curr_id);
this.setData({
date_month_inner_container: this.data.date_month_inner_container
});
this.data.prev_id = this.data.curr_id;
this.data.curr_id = e.currentTarget.id;
const id = this.data.curr_id;
this.yearResetSelection(this.data.curr_id);
this.setData({
date_year_inner_container: this.data.date_year_inner_container
});
this.yearResetSelection(this.data.prev_id);
this.data.date_year_inner_container[id] = "date-year-inner-container-selected";
this.data.year_text[id] = "date-selection-text-selected";
this.data.date_year_chosen = this.data.years[id]
this.data.dateChosen.push(this.data.date_year_chosen);
this.setData({
date_year_inner_container: this.data.date_year_inner_container,
year_text: this.data.year_text,
button_enabled: true,
date_year_chosen: this.data.date_year_chosen,
date_year_display_text_white: "date-display-text-white"
});
},
yearResetSelection(id) {
this.data.date_year_inner_container[id] = "date-year-inner-container";
this.data.year_text[id] = "date-selection-text";
this.setData({
date_year_inner_container: this.data.date_year_inner_container,
year_text: this.data.year_text,
});
},
onTapSave() {
this.yearResetSelection(this.data.curr_id);
this.props.onDoneDatePick(this.data.dateChosen);
this.setData({
selected_date_tab1: "date-selected-tab",
selected_date_tab2: "",
selected_date_tab3: "",
day_selection: true,
year_selection: false
});
this.data.dateChosen = [];
this.setData({button_enabled: false});
}
},
});