效果圖：

1.組件目錄：

（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": "確定",
?? ?"uni-calender.cancel": "取消",
?? ?"uni-calender.today": "今日",
?? ?"uni-calender.SUN": "日",
?? ?"uni-calender.MON": "一",
?? ?"uni-calender.TUE": "二",
?? ?"uni-calender.WED": "三",
?? ?"uni-calender.THU": "四",
?? ?"uni-calender.FRI": "五",
?? ?"uni-calender.SAT": "六"
}

（4）.zh-Hant.json

{
?? ?"uni-calender.ok": "確定",
?? ?"uni-calender.cancel": "取消",
?? ?"uni-calender.today": "今日",
?? ?"uni-calender.SUN": "日",
?? ?"uni-calender.MON": "一",
?? ?"uni-calender.TUE": "二",
?? ?"uni-calender.WED": "三",
?? ?"uni-calender.THU": "四",
?? ?"uni-calender.FRI": "五",
?? ?"uni-calender.SAT": "六"
}

（5）.calendar.js

/**
* @1900-2100區間內的公歷、農歷互轉
* @charset UTF-8
* @github ?https://github.com/jjonline/calendar.js
* @Author ?Jea楊(JJonline@JJonline.Cn)
* @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
* @公歷轉農歷：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
* @農歷轉公歷：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
*/
/* eslint-disable */
var calendar = {

? /**
? ? ? * 農歷1900-2100的潤大小信息表
? ? ? * @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 JJonline@JJonline.Cn**/
? ? 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

? /**
? ? ? * 公歷每個月份的天數普通表
? ? ? * @Array Of Property
? ? ? * @return Number
? ? ? */
? solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],

? /**
? ? ? * 天干地支之天干速查表
? ? ? * @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
? ? ? * @return Cn string
? ? ? */
? Gan: ['\u7532', '\u4e59', '\u4e19', '\u4e01', '\u620a', '\u5df1', '\u5e9a', '\u8f9b', '\u58ec', '\u7678'],

? /**
? ? ? * 天干地支之地支速查表
? ? ? * @Array Of Property
? ? ? * @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
? ? ? * @return Cn string
? ? ? */
? Zhi: ['\u5b50', '\u4e11', '\u5bc5', '\u536f', '\u8fb0', '\u5df3', '\u5348', '\u672a', '\u7533', '\u9149', '\u620c', '\u4ea5'],

? /**
? ? ? * 天干地支之地支速查表<=>生肖
? ? ? * @Array Of Property
? ? ? * @trans["鼠","牛","虎","兔","龍","蛇","馬","羊","猴","雞","狗","豬"]
? ? ? * @return Cn string
? ? ? */
? Animals: ['\u9f20', '\u725b', '\u864e', '\u5154', '\u9f99', '\u86c7', '\u9a6c', '\u7f8a', '\u7334', '\u9e21', '\u72d7', '\u732a'],

? /**
? ? ? * 24節氣速查表
? ? ? * @Array Of Property
? ? ? * @trans["小寒","大寒","立春","雨水","驚蟄","春分","清明","谷雨","立夏","小滿","芒種","夏至","小暑","大暑","立秋","處暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
? ? ? * @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各年的24節氣日期速查表
? ? ? * @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'],

? /**
? ? ? * 數字轉中文速查表
? ? ? * @Array Of Property
? ? ? * @trans ['日','一','二','三','四','五','六','七','八','九','十']
? ? ? * @return Cn string
? ? ? */
? nStr1: ['\u65e5', '\u4e00', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341'],

? /**
? ? ? * 日期轉農歷稱呼速查表
? ? ? * @Array Of Property
? ? ? * @trans ['初','十','廿','卅']
? ? ? * @return Cn string
? ? ? */
? nStr2: ['\u521d', '\u5341', '\u5eff', '\u5345'],

? /**
? ? ? * 月份轉農歷稱呼速查表
? ? ? * @Array Of Property
? ? ? * @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','臘']
? ? ? * @return Cn string
? ? ? */
? nStr3: ['\u6b63', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341', '\u51ac', '\u814a'],

? /**
? ? ? * 返回農歷y年一整年的總天數
? ? ? * @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))
? },

? /**
? ? ? * 返回農歷y年閏月是哪個月；若y年沒有閏月 則返回0
? ? ? * @param lunar Year
? ? ? * @return Number (0-12)
? ? ? * @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
? ? ? */
? leapMonth: function (y) { // 閏字編碼 \u95f0
? ? return (this.lunarInfo[y - 1900] & 0xf)
? },

? /**
? ? ? * 返回農歷y年閏月的天數 若該年沒有閏月則返回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)
? },

? /**
? ? ? * 返回農歷y年m月（非閏月）的總天數，計算m為閏月時的天數請使用leapDays方法
? ? ? * @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 }// 月份參數從1至12，參數錯誤返回-1
? ? return ((this.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29)
? },

? /**
? ? ? * 返回公歷(!)y年m月的天數
? ? ? * @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 } // 若參數錯誤 返回-1
? ? var ms = m - 1
? ? if (ms == 1) { // 2月份的閏平規律測算后確認返回28或29
? ? ? return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28)
? ? } else {
? ? ? return (this.solarMonth[ms])
? ? }
? },

? /**
? ? ?* 農歷年份轉換為干支紀年
? ? ?* @param ?lYear 農歷年的年份數
? ? ?* @return Cn string
? ? ?*/
? toGanZhiYear: function (lYear) {
? ? var ganKey = (lYear - 3) % 10
? ? var zhiKey = (lYear - 3) % 12
? ? if (ganKey == 0) ganKey = 10// 如果余數為0則為最后一個天干
? ? if (zhiKey == 0) zhiKey = 12// 如果余數為0則為最后一個地支
? ? return this.Gan[ganKey - 1] + this.Zhi[zhiKey - 1]
? },

? /**
? ? ?* 公歷月、日判斷所屬星座
? ? ?* @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'// 座
? },

? /**
? ? ? * 傳入offset偏移量返回干支
? ? ? * @param offset 相對甲子的偏移量
? ? ? * @return Cn string
? ? ? */
? toGanZhi: function (offset) {
? ? return this.Gan[offset % 10] + this.Zhi[offset % 12]
? },

? /**
? ? ? * 傳入公歷(!)y年獲得該年第n個節氣的公歷日期
? ? ? * @param y公歷年(1900-2100)；n二十四節氣中的第幾個節氣(1~24)；從n=1(小寒)算起
? ? ? * @return day Number
? ? ? * @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
? ? ? */
? 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])
? },

? /**
? ? ? * 傳入農歷數字月份返回漢語通俗表示法
? ? ? * @param lunar month
? ? ? * @return Cn string
? ? ? * @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='臘月'
? ? ? */
? toChinaMonth: function (m) { // 月 => \u6708
? ? if (m > 12 || m < 1) { return -1 } // 若參數錯誤 返回-1
? ? var s = this.nStr3[m - 1]
? ? s += '\u6708'// 加上月字
? ? return s
? },

? /**
? ? ? * 傳入農歷日期數字返回漢字表示法
? ? ? * @param lunar day
? ? ? * @return Cn string
? ? ? * @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
? ? ? */
? toChinaDay: function (d) { // 日 => \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)
? },

? /**
? ? ? * 年份轉生肖[!僅能大致轉換] => 精確劃分生肖分界線是“立春”
? ? ? * @param y year
? ? ? * @return Cn string
? ? ? * @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
? ? ? */
? getAnimal: function (y) {
? ? return this.Animals[(y - 4) % 12]
? },

? /**
? ? ? * 傳入陽歷年月日獲得詳細的公歷、農歷object信息 <=>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) { // 參數區間1900.1.31~2100.12.31
? ? // 年份限定、上限
? ? if (y < 1900 || y > 2100) {
? ? ? return -1// undefined轉換為數字變為NaN
? ? }
? ? // 公歷傳參最下限
? ? if (y == 1900 && m == 1 && d < 31) {
? ? ? return -1
? ? }
? ? // 未傳參 ?獲得當天
? ? if (!y) {
? ? ? var objDate = new Date()
? ? } else {
? ? ? var objDate = new Date(y, parseInt(m) - 1, d)
? ? }
? ? var i; var leap = 0; var temp = 0
? ? // 修正ymd參數
? ? 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--
? ? }

? ? // 是否今天
? ? var isTodayObj = new Date()
? ? var isToday = false
? ? if (isTodayObj.getFullYear() == y && isTodayObj.getMonth() + 1 == m && isTodayObj.getDate() == d) {
? ? ? isToday = true
? ? }
? ? // 星期幾
? ? var nWeek = objDate.getDay()
? ? var cWeek = this.nStr1[nWeek]
? ? // 數字表示周幾順應天朝周一開始的慣例
? ? if (nWeek == 0) {
? ? ? nWeek = 7
? ? }
? ? // 農歷年
? ? var year = i
? ? var leap = this.leapMonth(i) // 閏哪個月
? ? var isLeap = false

? ? // 效驗閏月
? ? for (i = 1; i < 13 && offset > 0; i++) {
? ? ? // 閏月
? ? ? if (leap > 0 && i == (leap + 1) && isLeap == false) {
? ? ? ? --i
? ? ? ? isLeap = true; temp = this.leapDays(year) // 計算農歷閏月天數
? ? ? } else {
? ? ? ? temp = this.monthDays(year, i)// 計算農歷普通月天數
? ? ? }
? ? ? // 解除閏月
? ? ? if (isLeap == true && i == (leap + 1)) { isLeap = false }
? ? ? offset -= temp
? ? }
? ? // 閏月導致數組下標重疊取反
? ? if (offset == 0 && leap > 0 && i == leap + 1) {
? ? ? if (isLeap) {
? ? ? ? isLeap = false
? ? ? } else {
? ? ? ? isLeap = true; --i
? ? ? }
? ? }
? ? if (offset < 0) {
? ? ? offset += temp; --i
? ? }
? ? // 農歷月
? ? var month = i
? ? // 農歷日
? ? var day = offset + 1
? ? // 天干地支處理
? ? var sm = m - 1
? ? var gzY = this.toGanZhiYear(year)

? ? // 當月的兩個節氣
? ? // bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`
? ? var firstNode = this.getTerm(y, (m * 2 - 1))// 返回當月「節」為幾日開始
? ? var secondNode = this.getTerm(y, (m * 2))// 返回當月「節」為幾日開始

? ? // 依據12節氣修正干支月
? ? var gzM = this.toGanZhi((y - 1900) * 12 + m + 11)
? ? if (d >= firstNode) {
? ? ? gzM = this.toGanZhi((y - 1900) * 12 + m + 12)
? ? }

? ? // 傳入的日期的節氣與否
? ? 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]
? ? }
? ? // 日柱 當月一日與 1900/1/1 相差天數
? ? var dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10
? ? var gzD = this.toGanZhi(dayCyclical + d - 1)
? ? // 該日期所屬的星座
? ? 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 }
? },

? /**
? ? ? * 傳入農歷年月日以及傳入的月份是否閏月獲得詳細的公歷、農歷object信息 <=>JSON
? ? ? * @param y ?lunar year
? ? ? * @param m ?lunar month
? ? ? * @param d ?lunar day
? ? ? * @param isLeapMonth ?lunar month is leap or not.[如果是農歷閏月第四個參數賦值true即可]
? ? ? * @return JSON object
? ? ? * @eg:console.log(calendar.lunar2solar(1987,9,10));
? ? ? */
? lunar2solar: function (y, m, d, isLeapMonth) { // 參數區間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 }// 傳參要求計算該閏月公歷 但該年得出的閏月與傳參的月份并不同
? ? if (y == 2100 && m == 12 && d > 1 || y == 1900 && m == 1 && d < 31) { return -1 }// 超出了最大極限值
? ? 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 }// 參數合法性效驗

? ? // 計算農歷的時間差
? ? 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) { // 處理閏月
? ? ? ? if (leap <= i && leap > 0) {
? ? ? ? ? offset += this.leapDays(y); isAdd = true
? ? ? ? }
? ? ? }
? ? ? offset += this.monthDays(y, i)
? ? }
? ? // 轉換閏月農歷 需補充該年閏月的前一個月的時差
? ? if (isLeapMonth) { offset += day }
? ? // 1900年農歷正月一日的公歷時間為1900年1月30日0時0分0秒(該時間也是本農歷的最開始起始點)
? ? 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>

<script>
?? ?import Calendar from './util.js';
?? ?import calendarItem from './uni-calendar-item.vue'
?? ?import {
?? ??? ?initVueI18n
?? ?} from '@dcloudio/uni-i18n'
?? ?import messages from './i18n/index.js'
?? ?const {
?? ??? ?t
?? ?} = initVueI18n(messages)
?? ?/**
?? ? * Calendar 日歷
?? ? * @description 日歷組件可以查看日期，選擇任意范圍內的日期，打點操作。常用場景如：酒店日期預訂、火車機票選擇購買日期、上下班打卡等
?? ? * @tutorial https://ext.dcloud.net.cn/plugin?id=56
?? ? * @property {String} date 自定義當前時間，默認為今天
?? ? * @property {Boolean} lunar 顯示農歷
?? ? * @property {String} startDate 日期選擇范圍-開始日期
?? ? * @property {String} endDate 日期選擇范圍-結束日期
?? ? * @property {Boolean} range 范圍選擇
?? ? * @property {Boolean} insert = [true|false] 插入模式,默認為false
?? ? * ?? ?@value true 彈窗模式
?? ? * ?? ?@value false 插入模式
?? ? * @property {Boolean} clearDate = [true|false] 彈窗模式是否清空上次選擇內容
?? ? * @property {Array} selected 打點，期待格式[{date: '2019-06-27', info: '簽到', data: { custom: '自定義信息', name: '自定義消息頭',xxx:xxx... }}]
?? ? * @property {Boolean} showMonth 是否選擇月份為背景
?? ? * @event {Function} change 日期改變，`insert :ture` 時生效
?? ? * @event {Function} confirm 確認選擇`insert :false` 時生效
?? ? * @event {Function} monthSwitch 切換月份時觸發
?? ? * @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
?? ? */
?? ?export default {
?? ??? ?components: {
?? ??? ??? ?calendarItem
?? ??? ?},
?? ??? ?emits: ['close', 'confirm', 'change', 'monthSwitch'],
?? ??? ?props: {
?? ??? ??? ?date: {
?? ??? ??? ??? ?type: String,
?? ??? ??? ??? ?default: ''
?? ??? ??? ?},
?? ??? ??? ?selected: {
?? ??? ??? ??? ?type: Array,
?? ??? ??? ??? ?default () {
?? ??? ??? ??? ??? ?return []
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?lunar: {
?? ??? ??? ??? ?type: Boolean,
?? ??? ??? ??? ?default: false
?? ??? ??? ?},
?? ??? ??? ?startDate: {
?? ??? ??? ??? ?type: String,
?? ??? ??? ??? ?default: ''
?? ??? ??? ?},
?? ??? ??? ?endDate: {
?? ??? ??? ??? ?type: String,
?? ??? ??? ??? ?default: ''
?? ??? ??? ?},
?? ??? ??? ?range: {
?? ??? ??? ??? ?type: Boolean,
?? ??? ??? ??? ?default: false
?? ??? ??? ?},
?? ??? ??? ?insert: {
?? ??? ??? ??? ?type: Boolean,
?? ??? ??? ??? ?default: true
?? ??? ??? ?},
?? ??? ??? ?showMonth: {
?? ??? ??? ??? ?type: Boolean,
?? ??? ??? ??? ?default: true
?? ??? ??? ?},
?? ??? ??? ?clearDate: {
?? ??? ??? ??? ?type: Boolean,
?? ??? ??? ??? ?default: true
?? ??? ??? ?}
?? ??? ?},
?? ??? ?data() {
?? ??? ??? ?return {
?? ??? ??? ??? ?show: false,
?? ??? ??? ??? ?weeks: [],
?? ??? ??? ??? ?calendar: {},
?? ??? ??? ??? ?nowDate: '',
?? ??? ??? ??? ?aniMaskShow: false
?? ??? ??? ?}
?? ??? ?},
?? ??? ?computed: {
?? ??? ??? ?/**
?? ??? ??? ? * for i18n
?? ??? ??? ? */

?? ??? ??? ?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() {
?? ??? ??? ?// 獲取日歷方法實例
?? ??? ??? ?this.cale = new Calendar({
?? ??? ??? ??? ?// date: new Date(),
?? ??? ??? ??? ?selected: this.selected,
?? ??? ??? ??? ?startDate: this.startDate,
?? ??? ??? ??? ?endDate: this.endDate,
?? ??? ??? ??? ?range: this.range,
?? ??? ??? ?})
?? ??? ??? ?// 選中某一天
?? ??? ??? ?// this.cale.setDate(this.date)
?? ??? ??? ?this.init(this.date)
?? ??? ??? ?// this.setDay
?? ??? ?},
?? ??? ?methods: {
?? ??? ??? ?// 取消穿透
?? ??? ??? ?clean() {},
?? ??? ??? ?bindDateChange(e) {
?? ??? ??? ??? ?const value = e.detail.value + '-1'
?? ??? ??? ??? ?console.log("bindDateChange = " + this.cale.getDate(value));
?? ??? ??? ??? ?this.init(value)
?? ??? ??? ?},
?? ??? ??? ?/**
?? ??? ??? ? * 初始化日期顯示
?? ??? ??? ? * @param {Object} date
?? ??? ??? ? */
?? ??? ??? ?init(date) {
?? ??? ??? ??? ?this.cale.setDate(date)
?? ??? ??? ??? ?this.weeks = this.cale.weeks
?? ??? ??? ??? ?this.nowDate = this.calendar = this.cale.getInfo(date)
?? ??? ??? ?},
?? ??? ??? ?/**
?? ??? ??? ? * 打開日歷彈窗
?? ??? ??? ? */
?? ??? ??? ?open() {
?? ??? ??? ??? ?// 彈窗模式并且清理數據
?? ??? ??? ??? ?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() {
?? ??? ??? ??? ?this.aniMaskShow = false
?? ??? ??? ??? ?this.$nextTick(() => {
?? ??? ??? ??? ??? ?setTimeout(() => {
?? ??? ??? ??? ??? ??? ?this.show = false
?? ??? ??? ??? ??? ??? ?this.$emit('close')
?? ??? ??? ??? ??? ?}, 300)
?? ??? ??? ??? ?})
?? ??? ??? ?},
?? ??? ??? ?/**
?? ??? ??? ? * 確認按鈕
?? ??? ??? ? */
?? ??? ??? ?confirm() {
?? ??? ??? ??? ?this.setEmit('confirm')
?? ??? ??? ??? ?this.close()
?? ??? ??? ?},
?? ??? ??? ?/**
?? ??? ??? ? * 變化觸發
?? ??? ??? ? */
?? ??? ??? ?change() {
?? ??? ??? ??? ?if (!this.insert) return
?? ??? ??? ??? ?this.setEmit('change')
?? ??? ??? ?},
?? ??? ??? ?/**
?? ??? ??? ? * 選擇月份觸發
?? ??? ??? ? */
?? ??? ??? ?monthSwitch() {
?? ??? ??? ??? ?let {
?? ??? ??? ??? ??? ?year,
?? ??? ??? ??? ??? ?month
?? ??? ??? ??? ?} = this.nowDate
?? ??? ??? ??? ?this.$emit('monthSwitch', {
?? ??? ??? ??? ??? ?year,
?? ??? ??? ??? ??? ?month: Number(month)
?? ??? ??? ??? ?})
?? ??? ??? ?},
?? ??? ??? ?/**
?? ??? ??? ? * 派發事件
?? ??? ??? ? * @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 || {}
?? ??? ??? ??? ?})
?? ??? ??? ?},
?? ??? ??? ?/**
?? ??? ??? ? * 選擇天觸發
?? ??? ??? ? * @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) { //放開這個注釋，只能選擇當月可選的日期
?? ??? ??? ??? ??? ?this.init(date)
?? ??? ??? ??? ??? ?this.change()
?? ??? ??? ??? ??? ?return
?? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ?this.calendar = weeks
?? ??? ??? ??? ??? ?// 設置多選
?? ??? ??? ??? ??? ?this.cale.setMultiple(this.calendar.fullDate)
?? ??? ??? ??? ??? ?this.weeks = this.cale.weeks
?? ??? ??? ??? ??? ?this.change()
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?/**
?? ??? ??? ? * 回到今天
?? ??? ??? ? */
?? ??? ??? ?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()
?? ??? ??? ?},
?? ??? ??? ?/**
?? ??? ??? ? * 上年
?? ??? ??? ? */
?? ??? ??? ?preYear() {
?? ??? ??? ??? ?const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'year').fullDate
?? ??? ??? ??? ?this.setDate(preDate)
?? ??? ??? ??? ?this.monthSwitch()
?? ??? ??? ?},
?? ??? ??? ?/**
?? ??? ??? ? * 上個月
?? ??? ??? ? */
?? ??? ??? ?pre() {
?? ??? ??? ??? ?const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
?? ??? ??? ??? ?this.setDate(preDate)
?? ??? ??? ??? ?this.monthSwitch()
?? ??? ??? ?},
?? ??? ??? ?/**
?? ??? ??? ? * 下個月
?? ??? ??? ? */
?? ??? ??? ?next() {
?? ??? ??? ??? ?const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
?? ??? ??? ??? ?this.setDate(nextDate)
?? ??? ??? ??? ?this.monthSwitch()
?? ??? ??? ?},
?? ??? ??? ?/**
?? ??? ??? ? * 下年
?? ??? ??? ? */
?? ??? ??? ?nextYear() {
?? ??? ??? ??? ?const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'year').fullDate
?? ??? ??? ??? ?this.setDate(nextDate)
?? ??? ??? ??? ?this.monthSwitch()
?? ??? ??? ?},
?? ??? ??? ?/**
?? ??? ??? ? * 設置日期
?? ??? ??? ? * @param {Object} date
?? ??? ??? ? */
?? ??? ??? ?setDate(date) {
?? ??? ??? ??? ?this.cale.setDate(date)
?? ??? ??? ??? ?this.weeks = this.cale.weeks
?? ??? ??? ??? ?this.nowDate = this.cale.getInfo(date)
?? ??? ??? ?}
?? ??? ?}
?? ?}
</script>

<style lang="scss" scoped>
?? ?.uni-calendar {
?? ??? ?/* #ifndef APP-NVUE */
?? ??? ?display: flex;
?? ??? ?/* #endif */
?? ??? ?flex-direction: column;
?? ?}

?? ?.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 === '初一'?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>

<script>
?? ?import {
?? ??? ?initVueI18n
?? ?} from '@dcloudio/uni-i18n'
?? ?import messages from './i18n/index.js'
?? ?const {
?? ??? ?t
?? ?} = initVueI18n(messages)
?? ?export default {
?? ??? ?emits: ['change'],
?? ??? ?props: {
?? ??? ??? ?weeks: {
?? ??? ??? ??? ?type: Object,
?? ??? ??? ??? ?default () {
?? ??? ??? ??? ??? ?return {}
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?calendar: {
?? ??? ??? ??? ?type: Object,
?? ??? ??? ??? ?default: () => {
?? ??? ??? ??? ??? ?return {}
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?selected: {
?? ??? ??? ??? ?type: Array,
?? ??? ??? ??? ?default: () => {
?? ??? ??? ??? ??? ?return []
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?lunar: {
?? ??? ??? ??? ?type: Boolean,
?? ??? ??? ??? ?default: false
?? ??? ??? ?}
?? ??? ?},
?? ??? ?computed: {
?? ??? ??? ?todayText() {
?? ??? ??? ??? ?return t("uni-calender.today")
?? ??? ??? ?},
?? ??? ?},
?? ??? ?methods: {
?? ??? ??? ?choiceDate(weeks) {
?? ??? ??? ??? ?console.log("+++item+++ weeks = "+JSON.stringify(weeks))
?? ??? ??? ??? ?this.$emit('change', weeks)
?? ??? ??? ?}
?? ??? ?}
?? ?}
</script>

<style lang="scss" scoped>
?? ?.uni-calendar-item__weeks-box {
?? ??? ?flex: 1;
?? ??? ?/* #ifndef APP-NVUE */
?? ??? ?display: flex;
?? ??? ?/* #endif */
?? ??? ?flex-direction: column;
?? ??? ?justify-content: center;
?? ??? ?align-items: center;
?? ?}

?? ?.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
?? ?} = {}) {
?? ??? ?// 當前日期
?? ??? ?this.date = this.getDate(new Date()) // 當前初入日期
?? ??? ?// 打點信息
?? ??? ?this.selected = selected || [];
?? ??? ?// 范圍開始
?? ??? ?this.startDate = startDate
?? ??? ?// 范圍結束
?? ??? ?this.endDate = endDate
?? ??? ?this.range = range
?? ??? ?// 多選狀態
?? ??? ?this.cleanMultipleStatus()
?? ??? ?// 每周日期
?? ??? ?this.weeks = {}
?? ??? ?// this._getWeek(this.date.fullDate)
?? ?}
?? ?/**
?? ? * 設置日期
?? ? * @param {Object} date
?? ? */
?? ?setDate(date) {
?? ??? ?this.selectDate = this.getDate(date)
?? ??? ?this._getWeek(this.selectDate.fullDate)
?? ?}

?? ?/**
?? ? * 清理多選狀態
?? ? */
?? ?cleanMultipleStatus() {
?? ??? ?this.multipleStatus = {
?? ??? ??? ?before: '',
?? ??? ??? ?after: '',
?? ??? ??? ?data: []
?? ??? ?}
?? ?}

?? ?/**
?? ? * 重置開始日期
?? ? */
?? ?resetSatrtDate(startDate) {
?? ??? ?// 范圍開始
?? ??? ?this.startDate = startDate

?? ?}

?? ?/**
?? ? * 重置結束日期
?? ? */
?? ?resetEndDate(endDate) {
?? ??? ?// 范圍結束
?? ??? ?this.endDate = endDate
?? ?}

?? ?/**
?? ? * 獲取任意時間
?? ? */
?? ?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) // 獲取AddDayCount天后的日期
?? ??? ??? ??? ?break
?? ??? ??? ?case 'month':
?? ??? ??? ??? ?if (dd.getDate() === 31) {
?? ??? ??? ??? ??? ?dd.setDate(dd.getDate() + AddDayCount)
?? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ?dd.setMonth(dd.getMonth() + AddDayCount) // 獲取AddDayCount天后的日期
?? ??? ??? ??? ?}
?? ??? ??? ??? ?break
?? ??? ??? ?case 'year':
?? ??? ??? ??? ?dd.setFullYear(dd.getFullYear() + AddDayCount) // 獲取AddDayCount天后的日期
?? ??? ??? ??? ?break
?? ??? ?}
?? ??? ?const y = dd.getFullYear()
?? ??? ?const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 獲取當前月份的日期，不足10補0
?? ??? ?const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 獲取當前幾號，不足10補0
?? ??? ?return {
?? ??? ??? ?fullDate: y + '-' + m + '-' + d,
?? ??? ??? ?year: y,
?? ??? ??? ?month: m,
?? ??? ??? ?date: d,
?? ??? ??? ?day: dd.getDay()
?? ??? ?}
?? ?}

?? ?/**
?? ? * 獲取上月剩余天數
?? ? */
?? ?_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
?? ?}
?? ?/**
?? ? * 獲取本月天數
?? ? */
?? ?_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)
?? ??? ??? ?// 是否今天
?? ??? ??? ?let isDay = fullDate === nowDate
?? ??? ??? ?// 獲取打點信息
?? ??? ??? ?let info = this.selected && this.selected.find((item) => {
?? ??? ??? ??? ?if (this.dateEqual(nowDate, item.date)) {
?? ??? ??? ??? ??? ?return item
?? ??? ??? ??? ?}
?? ??? ??? ?})

?? ??? ??? ?// 日期禁用
?? ??? ??? ?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
?? ?}
?? ?/**
?? ? * 獲取下月天數
?? ? */
?? ?_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
?? ?}

?? ?/**
?? ? * 獲取當前日期詳情
?? ? * @param {Object} date
?? ? */
?? ?getInfo(date) {
?? ??? ?if (!date) {
?? ??? ??? ?date = new Date()
?? ??? ?}
?? ??? ?const dateInfo = this.canlender.find(item => item.fullDate === this.getDate(date).fullDate)
?? ??? ?return dateInfo
?? ?}

?? ?/**
?? ? * 比較時間大小
?? ? */
?? ?dateCompare(startDate, endDate) {
?? ??? ?// 計算截止時間
?? ??? ?startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
?? ??? ?// 計算詳細項的截止時間
?? ??? ?endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
?? ??? ?if (startDate <= endDate) {
?? ??? ??? ?return true
?? ??? ?} else {
?? ??? ??? ?return false
?? ??? ?}
?? ?}

?? ?/**
?? ? * 比較時間是否相等
?? ? */
?? ?dateEqual(before, after) {
?? ??? ?// 計算截止時間
?? ??? ?before = new Date(before.replace('-', '/').replace('-', '/'))
?? ??? ?// 計算詳細項的截止時間
?? ??? ?after = new Date(after.replace('-', '/').replace('-', '/'))
?? ??? ?if (before.getTime() - after.getTime() === 0) {
?? ??? ??? ?return true
?? ??? ?} else {
?? ??? ??? ?return false
?? ??? ?}
?? ?}

?? ?/**
?? ? * 獲取日期范圍內所有日期
?? ? * @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
?? ?}
?? ?/**
?? ? * 計算陰歷日期顯示
?? ? */
?? ?getlunar(year, month, date) {
?? ??? ?return CALENDAR.solar2lunar(year, month, date)
?? ?}
?? ?/**
?? ? * 設置打點
?? ? */
?? ?setSelectInfo(data, value) {
?? ??? ?this.selected = value
?? ??? ?this._getWeek(data)
?? ?}

?? ?/**
?? ? * ?獲取多選狀態
?? ? */
?? ?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)
?? ?}

?? ?/**
?? ? * 獲取每周數據
?? ? * @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)), // 上個月末尾幾天
?? ??? ??? ?currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // 本月天數
?? ??? ??? ?nextMonthDays: [], // 下個月開始幾天
?? ??? ??? ?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 = {}
?? ??? ?// 拼接數組 ?上個月開始幾天 + 本月天數+ 下個月開始幾天
?? ??? ?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 init(date) {
?? ?// ?? ?if (!this.instance) {
?? ?// ?? ??? ?this.instance = new Calendar(date);
?? ?// ?? ?}
?? ?// ?? ?return this.instance;
?? ?// }
}

export default Calendar
?

2.組件uni-calendar的引用

在script標簽中添加

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

components: {
?? ??? ??? ?calendar
?? ??? ?},

?3.在template中使用組件

<calendar :date="date" :selected="selected" :start-date="'2019-3-2'" :end-date="'2019-5-20'"
?? ??? ??? ?class="calendar_box" @change="change" :lunar="true"></calendar>

參數	說明
date	初始當前日期
selected	數組，打開簽到日期，用于做標記的[{date:"2021-09-17"}]
start-date	可選日期的開始時間
end-date	可選日期的結束時間，默認是到今天
@change	監聽日歷點擊事件
lunar	是否展示陰歷日期

總體代碼：

<template>
?? ?<view class="content">
?? ??? ?<calendar :date="date" :selected="selected" :start-date="'2019-3-2'" :end-date="'2020-5-20'"
?? ??? ??? ?class="calendar_box" @change="change" :lunar="true"></calendar>

?? ?</view>
</template>

<script>
?? ?import calendar from "../../comment/uni-calendar/uni-calendar.vue"
?? ?export default {
?? ??? ?components: {
?? ??? ??? ?calendar
?? ??? ?},
?? ??? ?data() {
?? ??? ??? ?return {
?? ??? ??? ??? ?date: "", //初始日期
?? ??? ??? ??? ?selected: [], //打點日期，實際開發中，這里需要請求后端接口，拿取數據后在進行渲染
?? ??? ??? ?}
?? ??? ?},
?? ??? ?onReady() {
?? ??? ??? ?var _this = this
?? ??? ??? ?// console.log("getTime = " + _this.getTime())
?? ??? ??? ?_this.date = _this.getTime()
?? ??? ?},
?? ??? ?methods: {
?? ??? ??? ?// 日期改變
?? ??? ??? ?change(e) {
?? ??? ??? ??? ?var _this = this
?? ??? ??? ??? ?var fulldate = e.fulldate
?? ??? ??? ??? ?console.log("change e = " + JSON.stringify(e));
?? ??? ??? ??? ?if (e.extraInfo.date) {
?? ??? ??? ??? ??? ?var checkDate = e.extraInfo.date
?? ??? ??? ??? ??? ?console.log("e.extraInfo.date ++++++ " + JSON.stringify(checkDate));
?? ??? ??? ??? ??? ?for (var i = 0; i < _this.selected.length; i++) {
?? ??? ??? ??? ??? ??? ?if (checkDate == _this.selected[i].date) {
?? ??? ??? ??? ??? ??? ??? ?_this.selected.splice(i, 1)
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ?console.log("e.extraInfo.date 111111 " + JSON.stringify(e.extraInfo.date));
?? ??? ??? ??? ??? ?_this.selected.push({
?? ??? ??? ??? ??? ??? ?date: fulldate
?? ??? ??? ??? ??? ?})
?? ??? ??? ??? ?}
?? ??? ??? ??? ?console.log("_this.selected = " + JSON.stringify(_this.selected));

?? ??? ??? ?},
?? ??? ??? ?// 獲取當前日期并格式化
?? ??? ??? ?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>

<style>
?? ?.content {
?? ??? ?display: flex;
?? ??? ?flex-direction: column;
?? ??? ?justify-content: center;
?? ??? ?width: 100%;
?? ??? ?height: 100%;
?? ?}
</style>
?

demo下載

總結

以上是生活随笔為你收集整理的uni-app 自定义选择日期2（2021-09-16）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。