Brief introduction:
Taro is an open cross-end cross-framework solution that supports the use of React/Vue/Nerv frameworks to develop wechat/JD.com/Baidu/Alipay/Bytedance/QQ mini program/H5 and other applications. Now at the top of the market form is varied, the Web, the React Native, WeChat small programs and other side, when the business requirements in different side are required to show at the same time, more than to write code for different end cost is very high, obviously at that time only a set of code can be adapted to varying ability is very need.
Outlook:
The mode=date selector and mode=time selector are listed as follows:
Taro is based on the imitation of wechat mini program, and the screenshot comes from the official demo of wechat mini program
Requirements:
The component library picker is complete and powerful, both date and time, and the selectors required in the project are as follows
Question:
What??? I need a picker selector that can pick both date and time, but currently the picker component can only pick either date or time, so my first thought was to have the design split the time picker into two components so that I can use the original component directly. However, I took a closer look at the design. There are two places to choose on the same page: activity time and expiration time. If you open the page, the style may not be so beautiful. In addition, I couldn’t change my design at the slightest difficulty (though most of them couldn’t), so I made up my mind to write one myself
Implementation:
> > Mode =date, mode=time > > mode=time > > mode=date > > mode=time > > mode=date > > mode=time > > mode=date > > mode=time > > mode=date > > mode=time > > mode=date > > mode=time > > The picker component displays five columns by controlling range for [[year],[month],[day],[hour],[minute]]. [{name: ‘1997’,id:1997}]]; RangeKey =” name “rangeKey=” id”; Also, my project starts 30 minutes back from the current time
Specific process:
With the above ideas, the next easy to do. [year],[month],[day],[hour],[minute]
**[year] : ** start time and end time for loop. The requirement of my project is to push the current time forward 50 years.
**[month] : the month is similar to the year. It is basically fixed. If you look at the year = current year, the month may be less than 12 months old.
**[day] : the number of days of ** is a little bit troublesome, because how many days of each month need to be calculated, especially February is divided into ordinary year and rui year, 28 days one and 29 days one. If it is calculated according to this rule, it is quite troublesome. Here I use the Date object, notice the following two rules according to the Date object:
We can pass Date as the month of the day to be calculated +1, and day as 0. According to the automatic adjustment principle of Date, the actual result is the last day of the day. As follows:
var getDaysInOneMonth = function (year, month) { let _month = parseInt(month, 10); let d = new Date(year, _month, 0); //_month = 2; return d.getDate(); }Copy the code**[hour] : ** is the same as month. Pay attention to the initial value when year, month and day are the current time
**[minute] : ** is the same as month. You only need to pay attention to the initial value when year, month and day are the current time
Code display:
** DatetimePicker.js
[[year],[month],[day],[hour],[minute]] [[year],[month],[day],[hour],[minute]]
var getDaysInOneMonth = function (year, month) { let _month = parseInt(month, 10); let d = new Date(year, _month, 0); return d.getDate(); } var dateDate = function (date) { let year = date.getFullYear(); let month = date.getMonth()+1; let day = date.getDate(); let hours = date.getHours(); let minutes = date.getMinutes(); // console.log({ // year, month, day, hours, minutes // }) return { year, month, day, hours, Minutes}} var dateTimePicker = function (inityear) {// Get date time const years = []; for (let i = inityear; i <= inityear + 50; I ++) {years. Push ({name: I + 'year ', id: I}); } return function (_year, _month, _day, _hour, _minute) { const months = []; const days = []; const hours = []; const minutes = []; _year = parseInt(_year); _month = parseInt(_month); _day = parseInt(_day); _hour = parseInt(_hour); _minute = parseInt(_minute); // Get month for (let I = _month; i <= 12; i++) { if (i < 10) { i = "0" + i; } month.push ({name: I + 'month ', id: I}); } for (let I = _day; i <= getDaysInOneMonth(_year, _month); i++) { if (i < 10) { i = "0" + i; } days.push({name: I + 'day ', id: I}); } for (let I = _hour; i < 24; i++) { if (i < 10) { i = "0" + i; } hours.push({name: I + ' ', id: I}); } for (let I = _minute; i < 60; i++) { if (i < 10) { i = "0" + i; } minutes.push({name: I + '分', id: I}); } return [years, months, days, hours, minutes]; } } export { dateTimePicker, getDaysInOneMonth, dateDate }Copy the code** Step 2, **five-picker.vue component
It should be noted that the value of each column should be changed when selecting a column. For example, if the year is selected, the data of month, day, hour and minute should be changed.
<template> <picker mode="multiSelector" :rangeKey="'name'" @change="bindMultiPickerChange" @columnChange="bindMultiPickerColumnChange" :value="timeIndex" :range="activityArray" > <slot></slot> </picker> </template> <script> import { dateTimePicker, dateDate } from ".. /dateTimePicker.js"; let datePicker,date; export default { props:{ startTime:{ type:String, default:new Date() } }, data() { return { timeIndex: [0, 0, 0, 0, 0], activityArray: [], year: 0, month: 1, day: 1, hour: 0, minute: 0, }; }, created() { date = new Date(this.startTime); datePicker = dateTimePicker(date.getFullYear()); this.setDateData(); }, methods: { setDateData() { console.log(654656); let _data = dateDate(date); this.activityArray = datePicker( _data.year, _data.month, _data.day, _data.hours, _data.minutes ); }, bindMultiPickerChange(e) {console.log("picker sends selection change, carrying value as ", e.daile.value); let activityArray = JSON.parse(JSON.stringify(this.activityArray)), { value } = e.detail, _result = [], timeIndex = this.timeIndex; for (let i = 0; i < timeIndex.length; i++) { _result[i] = activityArray[i][value[i]].id; } this.$emit("result", _result); {}, bindMultiPickerColumnChange (e). The console log (" modify as ", e.d etail. Column, ", the value is ", e.d etail. Value); let _data = JSON.parse(JSON.stringify(this.activityArray)), timeIndex = JSON.parse(JSON.stringify(this.timeIndex)), { column, value } = e.detail, _value = _data[column][value].id; switch (e.detail.column) { case 0: this.year = _value; value === 0 ? this.setDateData() : (this.activityArray = datePicker(_value, 1, 1, 0, 0)); timeIndex = [value, 0, 0, 0, 0]; this.timeIndex = timeIndex; break; case 1: this.month = _value; this.timeIndex = JSON.parse( JSON.stringify([timeIndex[0], value, 0, 0, 0]) ); _data[2] = datePicker(this.year, this.month, 1, 0, 0)[2]; _data[3] = datePicker(this.year, this.month, 1, 0, 0)[3]; _data[4] = datePicker(this.year, this.month, 1, 0, 0)[4]; this.activityArray = _data; break; case 2: this.day = _value; this.timeIndex = JSON.parse( JSON.stringify([timeIndex[0], timeIndex[1], value, 0, 0]) ); _data[3] = datePicker(this.year, this.month, this.day, 0, 0)[3]; _data[4] = datePicker(this.year, this.month, this.day, 0, 0)[4]; this.activityArray = _data; break; case 3: this.hour = _value; timeIndex[3] = value; timeIndex[4] = 0; this.timeIndex = timeIndex; _data[4] = datePicker( this.year, this.month, this.day, this.hour, 0 )[4]; this.activityArray = _data; break; case 4: timeIndex[4] = value; this.timeIndex = timeIndex; break; ,}}}}; </script>Copy the codeThe important thing to note here is that when retrieving selector data and indexes, make sure to deepen the copy, let _data = JSON.parse(JSON.stringify(this.activityArray)), timeIndex = JSON.parse(JSON.stringify(this.timeIndex)), The view does not update when this. ActivityArray is assigned to a new array
Component references:
import FivePicker from ".. /components/five-picker"; <FivePicker @result="onResult2"> <CCell title=" registration deadline" placeholder=" please select time ":value="deadline" /> </FivePicker> Deadline = arr[0] + "." + ARr [1] + "." + arr[2] + "" + arr[3] + ":" + arr[4]; },Copy the codeFriendly tips:
This component was also developed AD hoc while I was writing the project and does not really have a date and time picker for all situations, as the initial value block may need your own flexibility to change
Warehouse Address:
Github.com/xml19781579…