Cocos Creator 日历 |
您所在的位置：网站首页 › 翻转日历日期设置 › Cocos Creator 日历 |
Cocos Creator 日历
|
效果图
界面有点丑(我很丑，但我很优秀)，可自行优化。 对于日历实现没有什么难度,需要说的就是 定义三个全局属性,分别是 显示模式: 年、月、日 三种; 当前日期: 即现在的日期; 选择日期: 即页面上选择的日期;然后分别实现日(天),月,年.尽量复用组件.比如月组件实现可重复利用日组件,年组件实现可重复利用月组件.具体实现看完整代码:除此之外实现了一个格式化日期的脚本 DatePlus.ts export default class DatePlus { // 日期 private date: Date; public constructor(date?: Date) { this.date = date ? date : new Date(); } /** * 格式化 * @param fmt * @returns */ public format(fmt: string = 'yyyy-mm-dd'): string { let _date = this.date; var o = { 'M+': _date.getMonth() + 1, //月份 'd+': _date.getDate(), //日 'h+': _date.getHours(), //小时 'm+': _date.getMinutes(), //分 's+': _date.getSeconds(), //秒 'q+': Math.floor((_date.getMonth() + 3) / 3), //季度 S: _date.getMilliseconds(), //毫秒 }; // 获取年份 // ① if (/(y+)/i.test(fmt)) { fmt = fmt.replace(RegExp.$1, (_date.getFullYear() + '').substr(4 - RegExp.$1.length)); } for (var k in o) { // ② if (new RegExp('(' + k + ')', 'i').test(fmt)) { fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)); } } return fmt; } }使用方式: let datePlus = new DatePlus(new Date()); // 输出2021年04月15日 console.log(datePlus.format('yyyy年mm月dd日'));工具类: 工具类中实现了 判断是否闰年、深拷贝 Date对象、获取下一年、下一月、下一日、上一年、上一月、上一日等方法. Util.ts export class Util { /** * 是否闰年 * @param year 年份 * @returns */ public static isLeapYear(year: number) { var date = new Date(year, 1, 29); return date.getDate() === 29; } /** * 深拷贝时间 * @param date * @returns */ public static cloneDate(date: Date): Date { return new Date(date.valueOf()); } /** * 下一日、下一周、下一月、下一年 * @param date 待处理时间 * @param type 类型 * @returns */ public static nextDate(date: Date, type: CALENDAR = CALENDAR.DAY): Date { let year = date.getFullYear(); let month = date.getMonth(); let day = date.getDate(); switch (type) { case CALENDAR.YEAR: { // 1 // date = new Date(date.setFullYear(year + 1)); // 2 优化版 year++; date = new Date(year, month + 1, 0); if (day |
【本文地址】