当前位置：网站首页>Uni app custom selection date 2 (September 16, 2021)

Uni app custom selection date 2 (September 16, 2021)

2022-06-26 03:41:00 【yyxhzdm】

design sketch ：

1. Component catalog ：

（1）.en.json

{
   "uni-calender.ok": "ok",
   "uni-calender.cancel": "cancel",
   "uni-calender.today": "today",
   "uni-calender.MON": "MON",
   "uni-calender.TUE": "TUE",
   "uni-calender.WED": "WED",
   "uni-calender.THU": "THU",
   "uni-calender.FRI": "FRI",
   "uni-calender.SAT": "SAT",
   "uni-calender.SUN": "SUN"
}
（2）.index.js

import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
   en,
   'zh-Hans': zhHans,
   'zh-Hant': zhHant
}

（3）.zh-Hans.json

{
   "uni-calender.ok": " determine ",
   "uni-calender.cancel": " Cancel ",
   "uni-calender.today": " Today, ",
   "uni-calender.SUN": " Japan ",
   "uni-calender.MON": " One ",
   "uni-calender.TUE": " Two ",
   "uni-calender.WED": " 3、 ... and ",
   "uni-calender.THU": " Four ",
   "uni-calender.FRI": " 5、 ... and ",
   "uni-calender.SAT": " 6、 ... and "
}

（4）.zh-Hant.json

{
   "uni-calender.ok": " Make sure ",
   "uni-calender.cancel": " Cancel ",
   "uni-calender.today": " Today, ",
   "uni-calender.SUN": " Japan ",
   "uni-calender.MON": " One ",
   "uni-calender.TUE": " Two ",
   "uni-calender.WED": " 3、 ... and ",
   "uni-calender.THU": " Four ",
   "uni-calender.FRI": " 5、 ... and ",
   "uni-calender.SAT": " 6、 ... and "
}

（5）.calendar.js

/**
* @1900-2100 Gregorian calendar in the interval 、 The lunar calendar turns to each other
* @charset UTF-8
* @github https://github.com/jjonline/calendar.js
* @Author Jea Yang ([email protected])
* @Time 2014-7-21
* @Time 2016-8-13 Fixed 2033hex、Attribution Annals
* @Time 2016-9-25 Fixed lunar LeapMonth Param Bug
* @Time 2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year
* @Version 1.0.3
* @ From the Gregorian calendar to the lunar calendar ：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
* @ Lunar calendar to Gregorian calendar ：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
*/
/* eslint-disable */
var calendar = {

/**
* Lunar calendar 1900-2100 Size information table
* @Array Of Property
* @return Hex
*/
lunarInfo: [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, // 1900-1909
0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, // 1910-1919
0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, // 1920-1929
0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, // 1930-1939
0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, // 1940-1949
0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, // 1950-1959
0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, // 1960-1969
0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, // 1970-1979
0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, // 1980-1989
0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, // 1990-1999
0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, // 2000-2009
0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, // 2010-2019
0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, // 2020-2029
0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, // 2030-2039
0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, // 2040-2049
/** Add By [email protected]**/
0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, // 2050-2059
0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, // 2060-2069
0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, // 2070-2079
0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, // 2080-2089
0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, // 2090-2099
0x0d520], // 2100

/**
* Common table of the number of days in each month of the Gregorian calendar
* @Array Of Property
* @return Number
*/
solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],

/**
* A quick look-up table of the heavenly stems of the heavenly stems and earthly branches
* @Array Of Property trans[" nail "," B "," C "," Ding "," E "," Oneself "," Geng "," simba "," Ren "," Dec. "]
* @return Cn string
*/
Gan: ['\u7532', '\u4e59', '\u4e19', '\u4e01', '\u620a', '\u5df1', '\u5e9a', '\u8f9b', '\u58ec', '\u7678'],

/**
* Quick look-up table of tiangan dizhi
* @Array Of Property
* @trans[" Son "," ugly "," Yin "," Mao "," Chen" "," Already "," Noon "," not "," Shen "," Unitary "," Xu "," Hai "]
* @return Cn string
*/
Zhi: ['\u5b50', '\u4e11', '\u5bc5', '\u536f', '\u8fb0', '\u5df3', '\u5348', '\u672a', '\u7533', '\u9149', '\u620c', '\u4ea5'],

/**
* Quick look-up table of tiangan dizhi <=> the Chinese zodiac
* @Array Of Property
* @trans[" rat "," cattle "," The tiger "," rabbit "," dragon "," The snake "," Horse "," sheep "," Monkey "," chicken "," Dog "," The pig "]
* @return Cn string
*/
Animals: ['\u9f20', '\u725b', '\u864e', '\u5154', '\u9f99', '\u86c7', '\u9a6c', '\u7f8a', '\u7334', '\u9e21', '\u72d7', '\u732a'],

/**
* 24 Solar term quick look-up table
* @Array Of Property
* @trans[" slight cold "," Severe cold "," Beginning of spring "," Rain "," The Waking of Insects "," Vernal equinox "," Qingming "," Grain Rain "," Beginning of summer "," grain full "," Grain in the air "," the summer solstice "," Xiaoshu "," Great heat "," The beginning of autumn "," In the heat "," White Dew "," the autumnal equinox "," Cold dew "," First Frost "," Primordial winter "," Light snow "," heavy snow "," Winter solstice "]
* @return Cn string
*/
solarTerm: ['\u5c0f\u5bd2', '\u5927\u5bd2', '\u7acb\u6625', '\u96e8\u6c34', '\u60ca\u86f0', '\u6625\u5206', '\u6e05\u660e', '\u8c37\u96e8', '\u7acb\u590f', '\u5c0f\u6ee1', '\u8292\u79cd', '\u590f\u81f3', '\u5c0f\u6691', '\u5927\u6691', '\u7acb\u79cb', '\u5904\u6691', '\u767d\u9732', '\u79cb\u5206', '\u5bd2\u9732', '\u971c\u964d', '\u7acb\u51ac', '\u5c0f\u96ea', '\u5927\u96ea', '\u51ac\u81f3'],

/**
* 1900-2100 Of each year 24 Solar term date quick look-up table
* @Array Of Property
* @return 0x string For splice
*/
sTermInfo: ['9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f',
'97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f',
'b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f',
'97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa',
'97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2',
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f',
'97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722',
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f',
'97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722',
'9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f',
'97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
'97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722',
'7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
'97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
'9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
'97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
'9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
'9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
'97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
'9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721',
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2',
'977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
'7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd',
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
'977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd',
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
'977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721',
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5',
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722',
'7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35',
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721',
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd',
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35',
'7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721',
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5',
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35',
'665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
'7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35',
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722'],

/**
* Digital to Chinese quick look-up table
* @Array Of Property
* @trans [' Japan ',' One ',' Two ',' 3、 ... and ',' Four ',' 5、 ... and ',' 6、 ... and ',' 7、 ... and ',' 8、 ... and ',' Nine ',' Ten ']
* @return Cn string
*/
nStr1: ['\u65e5', '\u4e00', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341'],

/**
* Date to lunar calendar address quick look-up table
* @Array Of Property
* @trans [' first ',' Ten ',' Twenty ',' 30 ']
* @return Cn string
*/
nStr2: ['\u521d', '\u5341', '\u5eff', '\u5345'],

/**
* A quick look-up table for changing the name of the month to the lunar calendar
* @Array Of Property
* @trans [' just ',' One ',' Two ',' 3、 ... and ',' Four ',' 5、 ... and ',' 6、 ... and ',' 7、 ... and ',' 8、 ... and ',' Nine ',' Ten ',' In the winter ',' Wax ']
* @return Cn string
*/
nStr3: ['\u6b63', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341', '\u51ac', '\u814a'],

/**
* Return to the lunar calendar y The total number of days in a year
* @param lunar Year
* @return Number
* @eg:var count = calendar.lYearDays(1987) ;//count=387
*/
lYearDays: function (y) {
var i; var sum = 348
for (i = 0x8000; i > 0x8; i >>= 1) { sum += (this.lunarInfo[y - 1900] & i) ? 1 : 0 }
return (sum + this.leapDays(y))
},

/**
* Return to the lunar calendar y Which month is the leap month of the year ; if y There is no leap month in a year Then return to 0
* @param lunar Year
* @return Number (0-12)
* @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
*/
leapMonth: function (y) { // Leap word code \u95f0
return (this.lunarInfo[y - 1900] & 0xf)
},

/**
* Return to the lunar calendar y Number of leap months in a year If there is no leap month in the year, return to 0
* @param lunar Year
* @return Number (0、29、30)
* @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
*/
leapDays: function (y) {
if (this.leapMonth(y)) {
return ((this.lunarInfo[y - 1900] & 0x10000) ? 30 : 29)
}
return (0)
},

/**
* Return to the lunar calendar y year m month （ Non leap month ） Total days , Calculation m For the number of days in a leap month, please use leapDays Method
* @param lunar Year
* @return Number (-1、29、30)
* @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
*/
monthDays: function (y, m) {
if (m > 12 || m < 1) { return -1 }// The month parameter is from 1 to 12, Parameter error returns -1
return ((this.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29)
},

/**
* Return to the Gregorian calendar (!)y year m Days of the month
* @param solar Year
* @return Number (-1、28、29、30、31)
* @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
*/
solarDays: function (y, m) {
if (m > 12 || m < 1) { return -1 } // If the parameter is wrong return -1
var ms = m - 1
if (ms == 1) { // 2 After calculating the leap average law of the month, confirm to return to 28 or 29
return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28)
} else {
return (this.solarMonth[ms])
}
},

/**
* The year of the lunar calendar is converted to the year of the branches and branches
* @param lYear The number of years in the lunar year
* @return Cn string
*/
toGanZhiYear: function (lYear) {
var ganKey = (lYear - 3) % 10
var zhiKey = (lYear - 3) % 12
if (ganKey == 0) ganKey = 10// If the remainder is 0 It's the last day
if (zhiKey == 0) zhiKey = 12// If the remainder is 0 Is the last branch
return this.Gan[ganKey - 1] + this.Zhi[zhiKey - 1]
},

/**
* Gregorian calendar month 、 The sun determines which constellation it belongs to
* @param cMonth [description]
* @param cDay [description]
* @return Cn string
*/
toAstro: function (cMonth, cDay) {
var s = '\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf'
var arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22]
return s.substr(cMonth * 2 - (cDay < arr[cMonth - 1] ? 2 : 0), 2) + '\u5ea7'// seat
},

/**
* Pass in offset The offset returns the main branch
* @param offset The offset from Jiazi
* @return Cn string
*/
toGanZhi: function (offset) {
return this.Gan[offset % 10] + this.Zhi[offset % 12]
},

/**
* Pass in the Gregorian calendar (!)y The year of n The Gregorian calendar date of the solar terms
* @param y Gregorian calendar year (1900-2100);n Which of the twenty-four solar terms (1~24); from n=1( slight cold ) Count up
* @return day Number
* @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4; meaning 1987 year 2 month 4 Hitachi spring
*/
getTerm: function (y, n) {
if (y < 1900 || y > 2100) { return -1 }
if (n < 1 || n > 24) { return -1 }
var _table = this.sTermInfo[y - 1900]
var _info = [
parseInt('0x' + _table.substr(0, 5)).toString(),
parseInt('0x' + _table.substr(5, 5)).toString(),
parseInt('0x' + _table.substr(10, 5)).toString(),
parseInt('0x' + _table.substr(15, 5)).toString(),
parseInt('0x' + _table.substr(20, 5)).toString(),
parseInt('0x' + _table.substr(25, 5)).toString()
]
var _calday = [
_info[0].substr(0, 1),
_info[0].substr(1, 2),
_info[0].substr(3, 1),
_info[0].substr(4, 2),

_info[1].substr(0, 1),
_info[1].substr(1, 2),
_info[1].substr(3, 1),
_info[1].substr(4, 2),

_info[2].substr(0, 1),
_info[2].substr(1, 2),
_info[2].substr(3, 1),
_info[2].substr(4, 2),

_info[3].substr(0, 1),
_info[3].substr(1, 2),
_info[3].substr(3, 1),
_info[3].substr(4, 2),

_info[4].substr(0, 1),
_info[4].substr(1, 2),
_info[4].substr(3, 1),
_info[4].substr(4, 2),

_info[5].substr(0, 1),
_info[5].substr(1, 2),
_info[5].substr(3, 1),
_info[5].substr(4, 2)
]
return parseInt(_calday[n - 1])
},

/**
* Pass in the number month of the lunar calendar and return the Chinese popular representation
* @param lunar month
* @return Cn string
* @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth=' December '
*/
toChinaMonth: function (m) { // month => \u6708
if (m > 12 || m < 1) { return -1 } // If the parameter is wrong return -1
var s = this.nStr3[m - 1]
s += '\u6708'// Add last month's word
return s
},

/**
* Pass in the lunar date number and return the Chinese character representation
* @param lunar day
* @return Cn string
* @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth=' 21 '
*/
toChinaDay: function (d) { // Japan => \u65e5
var s
switch (d) {
case 10:
s = '\u521d\u5341'; break
case 20:
s = '\u4e8c\u5341'; break
break
case 30:
s = '\u4e09\u5341'; break
break
default :
s = this.nStr2[Math.floor(d / 10)]
s += this.nStr1[d % 10]
}
return (s)
},

/**
* Year turns Zodiac [! Can only roughly Convert ] => The precise demarcation line of the zodiac is “ Beginning of spring ”
* @param y year
* @return Cn string
* @eg:var animal = calendar.getAnimal(1987) ;//animal=' rabbit '
*/
getAnimal: function (y) {
return this.Animals[(y - 4) % 12]
},

/**
* Import the Gregorian calendar year, month and day to obtain the detailed Gregorian calendar 、 Lunar calendar object Information <=>JSON
* @param y solar year
* @param m solar month
* @param d solar day
* @return JSON object
* @eg:console.log(calendar.solar2lunar(1987,11,01));
*/
solar2lunar: function (y, m, d) { // Parameter interval 1900.1.31~2100.12.31
// Year limit 、 ceiling
if (y < 1900 || y > 2100) {
return -1// undefined Convert to a number to NaN
}
// The lowest limit of the Gregorian calendar
if (y == 1900 && m == 1 && d < 31) {
return -1
}
// Untransmitted reference Get the day
if (!y) {
var objDate = new Date()
} else {
var objDate = new Date(y, parseInt(m) - 1, d)
}
var i; var leap = 0; var temp = 0
// correct ymd Parameters
var y = objDate.getFullYear()
var m = objDate.getMonth() + 1
var d = objDate.getDate()
var offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900, 0, 31)) / 86400000
for (i = 1900; i < 2101 && offset > 0; i++) {
temp = this.lYearDays(i)
offset -= temp
}
if (offset < 0) {
offset += temp; i--
}

// Whether today
var isTodayObj = new Date()
var isToday = false
if (isTodayObj.getFullYear() == y && isTodayObj.getMonth() + 1 == m && isTodayObj.getDate() == d) {
isToday = true
}
// What day
var nWeek = objDate.getDay()
var cWeek = this.nStr1[nWeek]
// The number indicates the day of the week in accordance with the Chinese practice of starting on Monday
if (nWeek == 0) {
nWeek = 7
}
// Lunar year
var year = i
var leap = this.leapMonth(i) // Leap which month
var isLeap = false

// A leap month
for (i = 1; i < 13 && offset > 0; i++) {
// leap month
if (leap > 0 && i == (leap + 1) && isLeap == false) {
--i
isLeap = true; temp = this.leapDays(year) // Calculate the number of leap months in the lunar calendar
} else {
temp = this.monthDays(year, i)// Calculate the number of days in the ordinary month of the lunar calendar
}
// Remove leap month
if (isLeap == true && i == (leap + 1)) { isLeap = false }
offset -= temp
}
// Leap month causes array subscripts to overlap and reverse
if (offset == 0 && leap > 0 && i == leap + 1) {
if (isLeap) {
isLeap = false
} else {
isLeap = true; --i
}
}
if (offset < 0) {
offset += temp; --i
}
// The lunar month
var month = i
// Lunar day
var day = offset + 1
// Tiangan dizhi treatment
var sm = m - 1
var gzY = this.toGanZhiYear(year)

// The two solar terms of the month
// bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`
var firstNode = this.getTerm(y, (m * 2 - 1))// Return to the month 「 section 」 For a few days
var secondNode = this.getTerm(y, (m * 2))// Return to the month 「 section 」 For a few days

// basis 12 Solar term correction, dry and branch month
var gzM = this.toGanZhi((y - 1900) * 12 + m + 11)
if (d >= firstNode) {
gzM = this.toGanZhi((y - 1900) * 12 + m + 12)
}

// Whether the solar term of the incoming date
var isTerm = false
var Term = null
if (firstNode == d) {
isTerm = true
Term = this.solarTerm[m * 2 - 2]
}
if (secondNode == d) {
isTerm = true
Term = this.solarTerm[m * 2 - 1]
}
// Sun pillar The first day of the month and 1900/1/1 return int
var dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10
var gzD = this.toGanZhi(dayCyclical + d - 1)
// The constellation to which the date belongs
var astro = this.toAstro(m, d)

return { 'lYear': year, 'lMonth': month, 'lDay': day, 'Animal': this.getAnimal(year), 'IMonthCn': (isLeap ? '\u95f0' : '') + this.toChinaMonth(month), 'IDayCn': this.toChinaDay(day), 'cYear': y, 'cMonth': m, 'cDay': d, 'gzYear': gzY, 'gzMonth': gzM, 'gzDay': gzD, 'isToday': isToday, 'isLeap': isLeap, 'nWeek': nWeek, 'ncWeek': '\u661f\u671f' + cWeek, 'isTerm': isTerm, 'Term': Term, 'astro': astro }
},

/**
* Whether the month, month and day of the incoming lunar calendar and the incoming month are leap months can obtain the detailed Gregorian calendar 、 Lunar calendar object Information <=>JSON
* @param y lunar year
* @param m lunar month
* @param d lunar day
* @param isLeapMonth lunar month is leap or not.[ If it is the fourth parameter assignment of lunar leap month true that will do ]
* @return JSON object
* @eg:console.log(calendar.lunar2solar(1987,9,10));
*/
lunar2solar: function (y, m, d, isLeapMonth) { // Parameter interval 1900.1.31~2100.12.1
var isLeapMonth = !!isLeapMonth
var leapOffset = 0
var leapMonth = this.leapMonth(y)
var leapDay = this.leapDays(y)
if (isLeapMonth && (leapMonth != m)) { return -1 }// It is required to calculate the Gregorian calendar of the leap month But the leap month obtained in that year is not the same as the month passed on
if (y == 2100 && m == 12 && d > 1 || y == 1900 && m == 1 && d < 31) { return -1 }// The maximum limit value is exceeded
var day = this.monthDays(y, m)
var _day = day
// bugFix 2016-9-25
// if month is leap, _day use leapDays method
if (isLeapMonth) {
_day = this.leapDays(y, m)
}
if (y < 1900 || y > 2100 || d > _day) { return -1 }// Parameter validity test

// Calculate the time difference of the lunar calendar
var offset = 0
for (var i = 1900; i < y; i++) {
offset += this.lYearDays(i)
}
var leap = 0; var isAdd = false
for (var i = 1; i < m; i++) {
leap = this.leapMonth(y)
if (!isAdd) { // Processing leap months
if (leap <= i && leap > 0) {
offset += this.leapDays(y); isAdd = true
}
}
offset += this.monthDays(y, i)
}
// Convert leap month lunar calendar It is necessary to supplement the time difference of the month before the leap month of the year
if (isLeapMonth) { offset += day }
// 1900 The Gregorian calendar time on the first day of the first lunar month is 1900 year 1 month 30 Japan 0 when 0 branch 0 second ( This time is also the beginning of the lunar calendar )
var stmap = Date.UTC(1900, 1, 30, 0, 0, 0)
var calObj = new Date((offset + d - 31) * 86400000 + stmap)
var cY = calObj.getUTCFullYear()
var cM = calObj.getUTCMonth() + 1
var cD = calObj.getUTCDate()

return this.solar2lunar(cY, cM, cD)
}
}

export default calendar

（6）.uni-calendar.vue

<template>
   <view class="uni-calendar">
       <view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}"
           @click="clean"></view>
       <view v-if="insert || show" class="uni-calendar__content"
           :class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow}">
           <view v-if="!insert" class="uni-calendar__header uni-calendar--fixed-top">
               <view class="uni-calendar__header-btn-box" @click="close">
                   <text class="uni-calendar__header-text uni-calendar--fixed-width">{ {cancelText}}</text>
               </view>
               <view class="uni-calendar__header-btn-box" @click="confirm">
                   <text class="uni-calendar__header-text uni-calendar--fixed-width">{ {okText}}</text>
               </view>
           </view>
           <view class="uni-calendar__header">
               
               <view class="uni-calendar__header-btn-box" @click.stop="preYear">
                   <view class="uni-calendar__header-btn uni-calendar--left"></view>
                   <view class="uni-calendar__header-btn uni-calendar--left"></view>
               </view>
               
               <view class="uni-calendar__header-btn-box" @click.stop="pre">
                   <view class="uni-calendar__header-btn uni-calendar--left"></view>
               </view>
               <picker mode="date" :value="date" fields="month" @change="bindDateChange">
                   <text class="uni-calendar__header-text">{ { (nowDate.year||'') +' / '+( nowDate.month||'')}}</text>
               </picker>
               
               <view class="uni-calendar__header-btn-box" @click.stop="next">
                   <view class="uni-calendar__header-btn uni-calendar--right"></view>
               </view>
               
               <view class="uni-calendar__header-btn-box" @click.stop="nextYear">
                   <view class="uni-calendar__header-btn uni-calendar--right"></view>
                   <view class="uni-calendar__header-btn uni-calendar--right"></view>
               </view>

<text class="uni-calendar__backtoday" @click="backtoday">{ {todayText}}</text>

           </view>
           <view class="uni-calendar__box">
               <view v-if="showMonth" class="uni-calendar__box-bg">
                   <text class="uni-calendar__box-bg-text">{ {nowDate.month}}</text>
               </view>
               <view class="uni-calendar__weeks">
                   <view class="uni-calendar__weeks-day">
                       <text class="uni-calendar__weeks-day-text">{ {SUNText}}</text>
                   </view>
                   <view class="uni-calendar__weeks-day">
                       <text class="uni-calendar__weeks-day-text">{ {monText}}</text>
                   </view>
                   <view class="uni-calendar__weeks-day">
                       <text class="uni-calendar__weeks-day-text">{ {TUEText}}</text>
                   </view>
                   <view class="uni-calendar__weeks-day">
                       <text class="uni-calendar__weeks-day-text">{ {WEDText}}</text>
                   </view>
                   <view class="uni-calendar__weeks-day">
                       <text class="uni-calendar__weeks-day-text">{ {THUText}}</text>
                   </view>
                   <view class="uni-calendar__weeks-day">
                       <text class="uni-calendar__weeks-day-text">{ {FRIText}}</text>
                   </view>
                   <view class="uni-calendar__weeks-day">
                       <text class="uni-calendar__weeks-day-text">{ {SATText}}</text>
                   </view>
               </view>
               <view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
                   <view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
                       <calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar"
                           :selected="selected" :lunar="lunar" @change="choiceDate"></calendar-item>
                   </view>
               </view>
           </view>
       </view>
   </view>
</template>

           okText() {
               return t("uni-calender.ok")
           },
           cancelText() {
               return t("uni-calender.cancel")
           },
           todayText() {
               return t("uni-calender.today")
           },
           monText() {
               return t("uni-calender.MON")
           },
           TUEText() {
               return t("uni-calender.TUE")
           },
           WEDText() {
               return t("uni-calender.WED")
           },
           THUText() {
               return t("uni-calender.THU")
           },
           FRIText() {
               return t("uni-calender.FRI")
           },
           SATText() {
               return t("uni-calender.SAT")
           },
           SUNText() {
               return t("uni-calender.SUN")
           },
       },
       watch: {
           date(newVal) {
               // this.cale.setDate(newVal)
               this.init(newVal)
           },
           startDate(val) {
               this.cale.resetSatrtDate(val)
           },
           endDate(val) {
               this.cale.resetEndDate(val)
           },
           selected(newVal) {
               this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
               this.weeks = this.cale.weeks
           }
       },
       created() {
           // Get calendar method instance
           this.cale = new Calendar({
               // date: new Date(),
               selected: this.selected,
               startDate: this.startDate,
               endDate: this.endDate,
               range: this.range,
           })
           // Choose a day
           // this.cale.setDate(this.date)
           this.init(this.date)
           // this.setDay
       },
       methods: {
           // Cancel penetration
           clean() {},
           bindDateChange(e) {
               const value = e.detail.value + '-1'
               console.log("bindDateChange = " + this.cale.getDate(value));
               this.init(value)
           },
           /**
           * The initialization date is displayed
           * @param {Object} date
           */
           init(date) {
               this.cale.setDate(date)
               this.weeks = this.cale.weeks
               this.nowDate = this.calendar = this.cale.getInfo(date)
           },
           /**
           * Open the calendar pop-up window
           */
           open() {
               // Pop up mode and clean up data
               if (this.clearDate && !this.insert) {
                   this.cale.cleanMultipleStatus()
                   // this.cale.setDate(this.date)
                   this.init(this.date)
               }
               this.show = true
               this.$nextTick(() => {
                   setTimeout(() => {
                       this.aniMaskShow = true
                   }, 50)
               })
           },
           /**
           * Close the calendar popup
           */
           close() {
               this.aniMaskShow = false
               this.$nextTick(() => {
                   setTimeout(() => {
                       this.show = false
                       this.$emit('close')
                   }, 300)
               })
           },
           /**
           * confirm button
           */
           confirm() {
               this.setEmit('confirm')
               this.close()
           },
           /**
           * Change triggers
           */
           change() {
               if (!this.insert) return
               this.setEmit('change')
           },
           /**
           * Select month trigger
           */
           monthSwitch() {
               let {
                   year,
                   month
               } = this.nowDate
               this.$emit('monthSwitch', {
                   year,
                   month: Number(month)
               })
           },
           /**
           * Dispatch incident
           * @param {Object} name
           */
           setEmit(name) {
               let {
                   year,
                   month,
                   date,
                   fullDate,
                   lunar,
                   extraInfo
               } = this.calendar
               this.$emit(name, {
                   range: this.cale.multipleStatus,
                   year,
                   month,
                   date,
                   fulldate: fullDate,
                   lunar,
                   extraInfo: extraInfo || {}
               })
           },
           /**
           * Select day trigger
           * @param {Object} weeks
           */
           choiceDate(weeks) {
               console.log("+++Pagrent+++ weeks = " + JSON.stringify(weeks))
               let date = weeks.lunar.cYear + "-" + weeks.lunar.cMonth + "-" + weeks.lunar.cDay
               console.log("+++Pagrent+++ date = " + JSON.stringify(date))
               if (weeks.disable) { // Let go of this comment , Only selectable dates of the current month can be selected
                   this.init(date)
                   this.change()
                   return
               } else {
                   this.calendar = weeks
                   // Set multiple selection
                   this.cale.setMultiple(this.calendar.fullDate)
                   this.weeks = this.cale.weeks
                   this.change()
               }
           },
           /**
           * Back to today
           */
           backtoday() {
               console.log(this.cale.getDate(new Date()).fullDate);
               let date = this.cale.getDate(new Date()).fullDate
               // this.cale.setDate(date)
               this.init(date)
               this.change()
           },
           /**
           * Last year
           */
           preYear() {
               const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'year').fullDate
               this.setDate(preDate)
               this.monthSwitch()
           },
           /**
           * Last month,
           */
           pre() {
               const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
               this.setDate(preDate)
               this.monthSwitch()
           },
           /**
           * Next month,
           */
           next() {
               const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
               this.setDate(nextDate)
               this.monthSwitch()
           },
           /**
           * Next year
           */
           nextYear() {
               const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'year').fullDate
               this.setDate(nextDate)
               this.monthSwitch()
           },
           /**
           * Setting date
           * @param {Object} date
           */
           setDate(date) {
               this.cale.setDate(date)
               this.weeks = this.cale.weeks
               this.nowDate = this.cale.getInfo(date)
           }
       }
   }
</script>

   .uni-calendar__mask {
       position: fixed;
       bottom: 0;
       top: 0;
       left: 0;
       right: 0;
       background-color: $uni-bg-color-mask;
       transition-property: opacity;
       transition-duration: 0.3s;
       opacity: 0;
       /* #ifndef APP-NVUE */
       z-index: 99;
       /* #endif */
   }

   .uni-calendar--mask-show {
       opacity: 1
   }

   .uni-calendar--fixed {
       position: fixed;
       bottom: calc(var(--window-bottom));
       left: 0;
       right: 0;
       transition-property: transform;
       transition-duration: 0.3s;
       transform: translateY(460px);
       /* #ifndef APP-NVUE */
       z-index: 99;
       /* #endif */
   }

   .uni-calendar--ani-show {
       transform: translateY(0);
   }

   .uni-calendar__content {
       background-color: #fff;
   }

   .uni-calendar__header {
       position: relative;
       /* #ifndef APP-NVUE */
       display: flex;
       /* #endif */
       flex-direction: row;
       justify-content: center;
       align-items: center;
       height: 50px;
       border-bottom-color: $uni-border-color;
       border-bottom-style: solid;
       border-bottom-width: 1px;
   }

   .uni-calendar--fixed-top {
       /* #ifndef APP-NVUE */
       display: flex;
       /* #endif */
       flex-direction: row;
       justify-content: space-between;
       border-top-color: $uni-border-color;
       border-top-style: solid;
       border-top-width: 1px;
   }

   .uni-calendar--fixed-width {
       width: 50px;
       // padding: 0 15px;
   }

   .uni-calendar__backtoday {
       position: absolute;
       right: 0;
       top: 25rpx;
       padding: 0 5px;
       padding-left: 10px;
       height: 25px;
       line-height: 25px;
       font-size: 12px;
       border-top-left-radius: 25px;
       border-bottom-left-radius: 25px;
       color: $uni-text-color;
       background-color: $uni-bg-color-hover;
   }

   .uni-calendar__header-text {
       text-align: center;
       width: 100px;
       font-size: $uni-font-size-base;
       color: $uni-text-color;
   }

   .uni-calendar__header-btn-box {
       /* #ifndef APP-NVUE */
       display: flex;
       /* #endif */
       flex-direction: row;
       align-items: center;
       justify-content: center;
       width: 50px;
       height: 50px;
   }

   .uni-calendar__header-btn {
       width: 10px;
       height: 10px;
       border-left-color: $uni-text-color-placeholder;
       border-left-style: solid;
       border-left-width: 2px;
       border-top-color: $uni-color-subtitle;
       border-top-style: solid;
       border-top-width: 2px;
   }

   .uni-calendar--left {
       transform: rotate(-45deg);
   }

   .uni-calendar--right {
       transform: rotate(135deg);
   }

   .uni-calendar__weeks {
       position: relative;
       /* #ifndef APP-NVUE */
       display: flex;
       /* #endif */
       flex-direction: row;
   }

   .uni-calendar__weeks-item {
       flex: 1;
   }

   .uni-calendar__weeks-day {
       flex: 1;
       /* #ifndef APP-NVUE */
       display: flex;
       /* #endif */
       flex-direction: column;
       justify-content: center;
       align-items: center;
       height: 45px;
       border-bottom-color: #F5F5F5;
       border-bottom-style: solid;
       border-bottom-width: 1px;
   }

   .uni-calendar__weeks-day-text {
       font-size: 14px;
   }

   .uni-calendar__box {
       position: relative;
   }

   .uni-calendar__box-bg {
       /* #ifndef APP-NVUE */
       display: flex;
       /* #endif */
       justify-content: center;
       align-items: center;
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
   }

   .uni-calendar__box-bg-text {
       font-size: 200px;
       font-weight: bold;
       color: $uni-text-color-grey;
       opacity: 0.1;
       text-align: center;
       /* #ifndef APP-NVUE */
       line-height: 1;
       /* #endif */
   }
</style>

（7）.uni-calendar-item.vue

<template>
   <view class="uni-calendar-item__weeks-box" :class="{
       'uni-calendar-item--disable':weeks.disable,
       'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
       'uni-calendar-item--checked':(calendar.fullDate === weeks.fullDate && !weeks.isDay) ,
       'uni-calendar-item--before-checked':weeks.beforeMultiple,
       'uni-calendar-item--multiple': weeks.multiple,
       'uni-calendar-item--after-checked':weeks.afterMultiple,
       }" @click="choiceDate(weeks)">
       <view class="uni-calendar-item__weeks-box-item">
           <text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
           <text class="uni-calendar-item__weeks-box-text" :class="{
               'uni-calendar-item--isDay-text': weeks.isDay,
               'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
               'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
               'uni-calendar-item--before-checked':weeks.beforeMultiple,
               'uni-calendar-item--multiple': weeks.multiple,
               'uni-calendar-item--after-checked':weeks.afterMultiple,
               'uni-calendar-item--disable':weeks.disable,
               }">{ {weeks.date}}</text>
           <text v-if="!lunar&&!weeks.extraInfo && weeks.isDay" class="uni-calendar-item__weeks-lunar-text" :class="{
               'uni-calendar-item--isDay-text':weeks.isDay,
               'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
               'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
               'uni-calendar-item--before-checked':weeks.beforeMultiple,
               'uni-calendar-item--multiple': weeks.multiple,
               'uni-calendar-item--after-checked':weeks.afterMultiple,
               }">{ {todayText}}</text>
           <text v-if="lunar" class="uni-calendar-item__weeks-lunar-text" :class="{
               'uni-calendar-item--isDay-text':weeks.isDay,
               'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
               'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
               'uni-calendar-item--before-checked':weeks.beforeMultiple,
               'uni-calendar-item--multiple': weeks.multiple,
               'uni-calendar-item--after-checked':weeks.afterMultiple,
               'uni-calendar-item--disable':weeks.disable,
               }">{ {weeks.isDay ? todayText : (weeks.lunar.IDayCn === ' The new moon '?weeks.lunar.IMonthCn:weeks.lunar.IDayCn)}}</text>
           <text v-if="weeks.extraInfo&&weeks.extraInfo.info" class="uni-calendar-item__weeks-lunar-text" :class="{
               'uni-calendar-item--extra':weeks.extraInfo.info,
               'uni-calendar-item--isDay-text':weeks.isDay,
               'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
               'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
               'uni-calendar-item--before-checked':weeks.beforeMultiple,
               'uni-calendar-item--multiple': weeks.multiple,
               'uni-calendar-item--after-checked':weeks.afterMultiple,
               'uni-calendar-item--disable':weeks.disable,
               }">{ {weeks.extraInfo.info}}</text>
       </view>
   </view>
</template>

   .uni-calendar-item__weeks-box-text {
       font-size: $uni-font-size-base;
       color: $uni-text-color;
   }

   .uni-calendar-item__weeks-lunar-text {
       font-size: $uni-font-size-sm;
       color: $uni-text-color;
   }

   .uni-calendar-item__weeks-box-item {
       position: relative;
       /* #ifndef APP-NVUE */
       display: flex;
       /* #endif */
       flex-direction: column;
       justify-content: center;
       align-items: center;
       width: 100rpx;
       height: 100rpx;
   }

   .uni-calendar-item__weeks-box-circle {
       position: absolute;
       top: 5px;
       right: 5px;
       width: 8px;
       height: 8px;
       border-radius: 8px;
       background-color: $uni-color-error;

}

   .uni-calendar-item--disable {
       background-color: rgba(249, 249, 249, $uni-opacity-disabled);
       color: $uni-text-color-disable;
   }

   .uni-calendar-item--isDay-text {
       color: $uni-color-primary;
   }

   .uni-calendar-item--isDay {
       background-color: $uni-color-primary;
       opacity: 0.8;
       color: #fff;
   }

   .uni-calendar-item--extra {
       color: $uni-color-error;
       opacity: 0.8;
   }

   .uni-calendar-item--checked {
       background-color: $uni-color-primary;
       color: #fff;
       opacity: 0.8;
   }

   .uni-calendar-item--multiple {
       background-color: $uni-color-primary;
       color: #fff;
       opacity: 0.8;
   }

   .uni-calendar-item--before-checked {
       background-color: #ff5a5f;
       color: #fff;
   }

   .uni-calendar-item--after-checked {
       background-color: #ff5a5f;
       color: #fff;
   }
</style>

（8）.util.js

import CALENDAR from './calendar.js'

class Calendar {
   constructor({
       date,
       selected,
       startDate,
       endDate,
       range
   } = {}) {
       // The current date
       this.date = this.getDate(new Date()) // Current initial entry date
       // Take some information
       this.selected = selected || [];
       // Scope of start
       this.startDate = startDate
       // End of range
       this.endDate = endDate
       this.range = range
       // Multi select status
       this.cleanMultipleStatus()
       // Every Sunday
       this.weeks = {}
       // this._getWeek(this.date.fullDate)
   }
   /**
   * Setting date
   * @param {Object} date
   */
   setDate(date) {
       this.selectDate = this.getDate(date)
       this._getWeek(this.selectDate.fullDate)
   }

   /**
   * Clear multiple selection status
   */
   cleanMultipleStatus() {
       this.multipleStatus = {
           before: '',
           after: '',
           data: []
       }
   }

   /**
   * Reset start date
   */
   resetSatrtDate(startDate) {
       // Scope of start
       this.startDate = startDate

}

   /**
   * Reset end date
   */
   resetEndDate(endDate) {
       // End of range
       this.endDate = endDate
   }

   /**
   * Get any time
   */
   getDate(date, AddDayCount = 0, str = 'day') {
       if (!date) {
           date = new Date()
       }
       if (typeof date !== 'object') {
           date = date.replace(/-/g, '/')
       }
       const dd = new Date(date)
       switch (str) {
           case 'day':
               dd.setDate(dd.getDate() + AddDayCount) // obtain AddDayCount Days after
               break
           case 'month':
               if (dd.getDate() === 31) {
                   dd.setDate(dd.getDate() + AddDayCount)
               } else {
                   dd.setMonth(dd.getMonth() + AddDayCount) // obtain AddDayCount Days after
               }
               break
           case 'year':
               dd.setFullYear(dd.getFullYear() + AddDayCount) // obtain AddDayCount Days after
               break
       }
       const y = dd.getFullYear()
       const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // Get the date of the current month , Insufficient 10 repair 0
       const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // Get the current number , Insufficient 10 repair 0
       return {
           fullDate: y + '-' + m + '-' + d,
           year: y,
           month: m,
           date: d,
           day: dd.getDay()
       }
   }

   /**
   * Get the remaining days of last month
   */
   _getLastMonthDays(firstDay, full) {
       let dateArr = []
       for (let i = firstDay; i > 0; i--) {
           const beforeDate = new Date(full.year, full.month - 1, -i + 1).getDate()
           dateArr.push({
               date: beforeDate,
               month: full.month - 1,
               lunar: this.getlunar(full.year, full.month - 1, beforeDate),
               disable: true
           })
       }
       return dateArr
   }
   /**
   * Get the number of days in this month
   */
   _currentMonthDys(dateData, full) {
       let dateArr = []
       let fullDate = this.date.fullDate
       for (let i = 1; i <= dateData; i++) {
           let isinfo = false
           let nowDate = full.year + '-' + (full.month < 10 ?
               full.month : full.month) + '-' + (i < 10 ?
               '0' + i : i)
           // Whether today
           let isDay = fullDate === nowDate
           // Get management information
           let info = this.selected && this.selected.find((item) => {
               if (this.dateEqual(nowDate, item.date)) {
                   return item
               }
           })

           // Date disabled
           let disableBefore = true
           let disableAfter = true
           if (this.startDate) {
               let dateCompBefore = this.dateCompare(this.startDate, fullDate)
               disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate)
           }

           if (this.endDate) {
               let dateCompAfter = this.dateCompare(fullDate, this.endDate)
               disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate)
           }
           let multiples = this.multipleStatus.data
           let checked = false
           let multiplesStatus = -1
           if (this.range) {
               if (multiples) {
                   multiplesStatus = multiples.findIndex((item) => {
                       return this.dateEqual(item, nowDate)
                   })
               }
               if (multiplesStatus !== -1) {
                   checked = true
               }
           }
           let data = {
               fullDate: nowDate,
               year: full.year,
               date: i,
               multiple: this.range ? checked : false,
               beforeMultiple: this.dateEqual(this.multipleStatus.before, nowDate),
               afterMultiple: this.dateEqual(this.multipleStatus.after, nowDate),
               month: full.month,
               lunar: this.getlunar(full.year, full.month, i),
               disable: !disableBefore || !disableAfter,
               isDay
           }
           if (info) {
               data.extraInfo = info
           }

           dateArr.push(data)
       }
       return dateArr
   }
   /**
   * Get the number of days in the next month
   */
   _getNextMonthDays(surplus, full) {
       let dateArr = []
       for (let i = 1; i < surplus + 1; i++) {
           dateArr.push({
               date: i,
               month: Number(full.month) + 1,
               lunar: this.getlunar(full.year, Number(full.month) + 1, i),
               disable: true
           })
       }
       return dateArr
   }

   /**
   * Get current date details
   * @param {Object} date
   */
   getInfo(date) {
       if (!date) {
           date = new Date()
       }
       const dateInfo = this.canlender.find(item => item.fullDate === this.getDate(date).fullDate)
       return dateInfo
   }

   /**
   * Compare the time
   */
   dateCompare(startDate, endDate) {
       // Calculate the deadline
       startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
       // Calculate the deadline for detailed items
       endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
       if (startDate <= endDate) {
           return true
       } else {
           return false
       }
   }

   /**
   * Compare whether the time is equal
   */
   dateEqual(before, after) {
       // Calculate the deadline
       before = new Date(before.replace('-', '/').replace('-', '/'))
       // Calculate the deadline for detailed items
       after = new Date(after.replace('-', '/').replace('-', '/'))
       if (before.getTime() - after.getTime() === 0) {
           return true
       } else {
           return false
       }
   }

   /**
   * Get all dates in the date range
   * @param {Object} begin
   * @param {Object} end
   */
   geDateAll(begin, end) {
       var arr = []
       var ab = begin.split('-')
       var ae = end.split('-')
       var db = new Date()
       db.setFullYear(ab[0], ab[1] - 1, ab[2])
       var de = new Date()
       de.setFullYear(ae[0], ae[1] - 1, ae[2])
       var unixDb = db.getTime() - 24 * 60 * 60 * 1000
       var unixDe = de.getTime() - 24 * 60 * 60 * 1000
       for (var k = unixDb; k <= unixDe;) {
           k = k + 24 * 60 * 60 * 1000
           arr.push(this.getDate(new Date(parseInt(k))).fullDate)
       }
       return arr
   }
   /**
   * Calculate the lunar date display
   */
   getlunar(year, month, date) {
       return CALENDAR.solar2lunar(year, month, date)
   }
   /**
   * Set dot
   */
   setSelectInfo(data, value) {
       this.selected = value
       this._getWeek(data)
   }

   /**
   * Get multi selection status
   */
   setMultiple(fullDate) {
       let {
           before,
           after
       } = this.multipleStatus

       if (!this.range) return
       if (before && after) {
           this.multipleStatus.before = ''
           this.multipleStatus.after = ''
           this.multipleStatus.data = []
       } else {
           if (!before) {
               this.multipleStatus.before = fullDate
           } else {
               this.multipleStatus.after = fullDate
               if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
                   this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
               } else {
                   this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
               }
           }
       }
       this._getWeek(fullDate)
   }

   /**
   * Get weekly data
   * @param {Object} dateData
   */
   _getWeek(dateData) {
       const {
           fullDate,
           year,
           month,
           date,
           day
       } = this.getDate(dateData)
       let firstDay = new Date(year, month - 1, 1).getDay()
       let currentDay = new Date(year, month, 0).getDate()
       let dates = {
           lastMonthDays: this._getLastMonthDays(firstDay, this.getDate(dateData)), // The last few days of last month
           currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // Days of the month
           nextMonthDays: [], // The first few days of next month
           weeks: []
       }
       let canlender = []
       const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length)
       dates.nextMonthDays = this._getNextMonthDays(surplus, this.getDate(dateData))
       canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)
       let weeks = {}
       // Mosaic array The first few days of last month + Days of the month + The first few days of next month
       for (let i = 0; i < canlender.length; i++) {
           if (i % 7 === 0) {
               weeks[parseInt(i / 7)] = new Array(7)
           }
           weeks[parseInt(i / 7)][i % 7] = canlender[i]
       }
       this.canlender = canlender
       this.weeks = weeks
   }

   // Static methods
   // static init(date) {
   //    if (!this.instance) {
   //        this.instance = new Calendar(date);
   //    }
   //    return this.instance;
   // }
}

export default Calendar

2. Components uni-calendar References to

stay script Add... To the tag

import calendar from "../../comment/uni-calendar/uni-calendar.vue"

components: {
calendar
},

3. stay template Components used in

Parameters	explain
date	Initial current date
selected	Array , Open sign in date , Used for marking [{date:"2021-09-17"}]
start-date	The start time of the optional date
end-date	End time of optional date , The default is today
@change	Listen for calendar click events
lunar	Whether to display the lunar date

Overall code ：

</view>
</template>

           },
           // Get the current date and format it
           getTime: function() {
               var date = new Date(),
                   year = date.getFullYear(),
                   month = date.getMonth() + 1,
                   day = date.getDate(),
                   hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
                   minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
                   second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
               month >= 1 && month <= 9 ? (month = "0" + month) : "";
               day >= 0 && day <= 9 ? (day = "0" + day) : "";
               // var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
               var timer = year + '-' + month + '-' + day;
               return timer;
           }
       }
   }
</script>

demo download

原网站

版权声明
本文为[yyxhzdm]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202180546432341.html

当前位置：网站首页>Uni app custom selection date 2 (September 16, 2021)

Uni app custom selection date 2 (September 16, 2021)

边栏推荐

猜你喜欢

随机推荐