Чрезвычайно просто: компонент календаря апплета WeChat (идея)

внешний интерфейс GitHub JavaScript Апплет WeChat

В последнее время я работаю над проектом апплета WeChat, в котором используется календарь. Все это время, когда я сталкиваюсь с календарем, я просто нахожу в Интернете плагин, в этот раз по наитию хочу реализовать его сам. На этот раз это не пакет с мощными, крепкими и совершенными компонентами, а просто запись основной идеи. Дополнительные функции должны быть обнаружены и реализованы самостоятельно в соответствии с потребностями проекта. (Большой парень слегка сквиртит)

Анализ мыслей

  • Первый и самый важный момент — вычислить, сколько дней в определенном месяце в определенном году, в который входят большие и малые месяцы, високосные месяцы и февраль в обычные годы.

  • Во-вторых, выясните, какой день недели соответствует первому числу месяца.

  • Затем, иногда для завершения заполнения, необходимо отображать оставшиеся дни предыдущего месяца и начальные дни следующего месяца, и как они должны отображаться.

  • Наконец, реализуйте другие мелочи в соответствии с потребностями вашего собственного проекта.

Подсчитать количество дней в месяце

  • Согласно общей идее, в месяцах [1,3,5,7,8,10,12] 31 день, а в месяцах [2,3,6,9,11] 30 дней, а високосный год 29 февраля, 28 февраля обычного года. Каждый раз, когда вам нужно подсчитать количество дней, вы должны судить таким образом. Это возможно, и это то, что делает большинство людей. Однако этот способ кажется мне несколько громоздким.

  • На самом деле изменить образ мышления невозможно. Временные метки — хороший вектор. Разница между отметкой времени в ноль часов 1-го числа текущего месяца и отметкой времени в 0:00 1-го числа следующего месяца составляет количество миллисекунд в количестве дней в текущем месяце.

    // 获取某年某月总共多少天
getDateLen(year, month) { 
    let actualMonth = month - 1;
    let timeDistance = +new Date(year, month) - +new Date(year, actualMonth);
    return timeDistance / (1000 * 60 * 60 * 24);
},

  • Увидев вышеприведенный код, вы можете спросить, а не хватает ли особого суждения, когда на дворе декабрь, ведь речь идет о кануне Нового года. Конечно, согласно MDN, вам не о чем беспокоиться.DateВыражение js учло это для нас.

    Когда Date вызывается как конструктор и передается несколько параметров, если значение превышает разумный диапазон (например, 13 для месяца или 70 для минуты), будут скорректированы соседние значения. Например, новая дата (2013, 13, 1) равна новой дате (2014, 1, 1), которые оба представляют дату 2014-02-01 (обратите внимание, что месяц начинается с 0). Другие значения аналогичны, новая дата(2013, 2, 1, 0, 70) равна новой дате(2013, 2, 1, 1, 10), которые оба представляют время 2013-03-01T01:10: 00.

Вычислить день недели 1-го числа месяца

  • Нет нужды говорить это.getDay()ты заслуживаешь иметь

    // 获取某月1号是周几
getFirstDateWeek(year, month) { 
    return new Date(year, month - 1, 1).getDay()
},

Как отображать ежемесячные данные

  • Если вы просто отображаете данные за текущий месяц, это все равно очень просто: получите количество дней в текущем месяце и пройдите их по очереди, чтобы получить все данные за текущий месяц.

    // 获取当月数据，返回数组
getCurrentArr(){ 
    let currentMonthDateLen = this.getDateLen(this.data.currentYear, this.data.currentMonth) // 获取当月天数
    let currentMonthDateArr = [] // 定义空数组
    if (currentMonthDateLen > 0) {
        for (let i = 1; i <= currentMonthDateLen; i++) {
	    currentMonthDateArr.push({
	        month: 'current', // 只是为了增加标识，区分上下月
                date: i
            })
        }
    }
    this.setData({
    	currentMonthDateLen
    })
    return currentMonthDateArr
},

  • Во многих случаях для отображения полного необходимо отобразить остаточные данные за предыдущий и следующий месяцы. Вообще говоря, при отображении календаря максимум 7 Х 6 = 42 бита Почему именно 42 бита, эээ, сами подумайте. Зная количество дней в текущем месяце, мы можем сделать вывод о количестве дней, оставшихся в предыдущем месяце, используя день недели 1-го числа текущего месяца.Количество оставшихся дней в следующем месяце равно ровно 42 - количество дней в текущем месяце - оставшиеся дни в предыдущем месяце.

    // 上月 年、月
preMonth(year, month) { 
    if (month == 1) {
	return {
	    year: --year,
	    month: 12
	}
    } else {
    	return {
	    year: year,
	    month: --month
    	}
    }
},

    // 获取当月中，上月多余数据，返回数组
getPreArr(){ 
    let preMonthDateLen = this.getFirstDateWeek(this.data.currentYear, this.data.currentMonth) // 当月1号是周几 == 上月残余天数）
        let preMonthDateArr = [] // 定义空数组
    if (preMonthDateLen > 0) {
	let { year, month } = this.preMonth(this.data.currentYear, this.data.currentMonth) // 获取上月 年、月
	let date = this.getDateLen(year, month) // 获取上月天数
	for (let i = 0; i < preMonthDateLen; i++) {
		preMonthDateArr.unshift({ // 尾部追加
                        month: 'pre', // 只是为了增加标识，区分当、下月
		    date: date
                })
		date--
	}
    }
    this.setData({
	preMonthDateLen
    })
    return preMonthDateArr
},

    // 下月 年、月
nextMonth(year, month) { 
    if (month == 12) {
	return {
	    year: ++year,
	    month: 1
	}
    } else {
	return {
            year: year,
	    month: ++month
	}
    }
},

    // 获取当月中，下月多余数据，返回数组
getNextArr() { 
    let nextMonthDateLen = 42 - this.data.preMonthDateLen - this.data.currentMonthDateLen // 下月多余天数
    let nextMonthDateArr = [] // 定义空数组
    if (nextMonthDateLen > 0) {
        for (let i = 1; i <= nextMonthDateLen; i++) {
            nextMonthDateArr.push({
                month: 'next',// 只是为了增加标识，区分当、上月
                date: i
            })
        }
    }
    return nextMonthDateArr
},

  • Интегрируйте три набора данных, чтобы получить полные ежемесячные данные, формат выглядит следующим образом.

    [
    {month: "pre", date: 30},
    {month: "pre", date: 31},
    {month: "current", date: 1},
    {month: "current", date: 2},
    ...
    {month: "current", date: 31},
    {month: "next", date: 1},
    {month: "next", date: 2}
]

  • Что касается переключения между верхними и нижними месяцами, и выбора таких функций, как определенный год и определенный месяц, то это не что иное, как изменение параметра, и с этим вы можете разобраться самостоятельно.

  • Каркас уже есть, а какую именно функцию вы хотите создать, пока не под рукой.

полный кодGitHub

Категории