Uniapp uses the Pick timing picker component to filter the time, which cannot be greater than the current date

Demand: on WeChat small programs, click on the button, from the bottom of the pop-up time selector, when entered the page displays the current date, when using the selector switch time, the selected date to synchronize to the selector, and the end time cannot be greater than the current date, the last every time when to choose time, time to get the current selection, interface to request.

• Step 1: Page result style

 <view class="selectTime">
    <picker mode="date" fields="month" :start="startDate" :end="endDate" @change="bindDateChange">
	<view class="timeShow"V-cloak >{{date}} month </view> </picker> </view> Note: Mode is the type of selector. There are five types: general selector, multi-column selector, time selector, date selector, province selector. The default is general selector mode="date"Indicates the time selector. Fields indicates the format of the selector: Year,month, Day, fields="month"Indicates that the selector displays only the year, fields="year"Indicates that the selector displays only the year, and so on. Start is the start range defined, and end is the end range definedCopy the code

• Step 2: Data Defines the data

 export default {
    data() {
        const currentDate = this.getDate({
	    format: true
	})
	 return{date: currentDate}} Computed: {// Define the start timestartDate() {
	    return this.getDate('start'}, // define the end timeendDate() {
	    return this.getDate('end')}}}Copy the code

• Step 3: As soon as you enter the page, get the current time and display the time in the selector

Methods: {// get the current time getDate(type) {
        this.year = new Date().getFullYear()
	this.month = new Date().getMonth() + 1
	this.day = new Date().getDate()
	if (type= = ='start') {
	    this.year = this.year - 60
	} else if (type= = ='end') {
	    this.year = this.year
	}
	this.month = this.month > 9 ? this.month : '0' + this.month
	this.day = this.day > 9 ? this.day : '0'+ this.day // core: This result will be displayed directly on the time pickerreturn `${this.year}-${this.month}-${this.day}`}}}Copy the code

• Step 4: When selecting a time, display the selected time on the time picker

    methods: {
        bindDateChange(params) {this.date = params.detail.value},}Copy the code

• Step 5: Get the current selected time and request the interface

    methods: {
        bindDateChange(params) {this.date = params.detail.value // merge 2019-01-08 01 this.year = ParseInt (params. Detail. Value. The substring (0, 4)) enclosing up = parseInt (params. Detail. Value. The substring (5)). This month = this.months > 9 ? this.months :"0" + this.months
	    this.getTotal()
	},
	getTotal() {
	    this.$api.post(' ', {
		year: this.year,
		month: this.month
	    }).then((res) => {
		    
	    },
  }
Copy the code