首页
学习
活动
专区
圈层
工具
发布

教你一招 实现10分钟内轻松将图鸟UI组件迁移到H5

id=7088 下载好之后,可以看到如下的目录结构,勾选出来的目录就是图鸟UI组件的目录。进入该目录,找到名为tn-calendar的目录,下面的tn-calendar.vue文件就是源代码。...业务修改 前面的效果预览图,可以看到是修改了默认的底部文字和日期左右的切换选项。我们先来看看底部文字是如何实现的。...底部文字,我是采用的后端接口返回,无非就是把图鸟的每一个月的日期和接口的文字做了一个匹配。例如图鸟UI原本是支持农历显示,我直接将农历的文字替换为接口返回的文本信息。...month = arr[1]; //获取当前日期的月份 var day = arr[2] || '01'; //获取当前日期的日 var month2 = parseInt(month...var month = arr[1]; //获取当前日期的月份 var day = arr[2] || '01'; //获取当前日期的日 var month2 = parseInt

76110

用react手写一个简单的日历

设计(以最常用的按月份的日历) 日历其实大家都很熟悉,一切的设计都是从功能出发,这是根本。日历的功能分为两大块。 日历头部:当前年份/月份。 日历主体:当前月份的具体的日期信息。...所以上面的代码还要依赖于日历的排放顺序。 这里的排放顺序将是日历组件的第一个可被调用者控制的参数。这里我的设想是将该参数的传入值与date.getDay()匹配。...0:周日 1:周一 ..... 5:周五 6:周六 所以上面的公式为: date.setDate(date.getDate() - date.getDay() + x) 但是这里的x值加了之后的日期如果大于当前月份的第一天...,那就需要将当前得到的日期数值再减去7天,这个原因就不用说明了吧。...1,每次得到下一天的日期。

4.4K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    整天用 Calendar 日历组件,不如自己手写一个吧!

    因为 Date 的 month 是从 0 开始计数的,取值是 0 到 11: 而日期 date 是从 1 到 31。...除了日期外,也能通过 getFullYear、getMonth 拿到年份和月份: 还可以通过 getDay 拿到星期几。...value 参数设置为 date 的初始值: 我们试试看: 年月是对了,但是日期对不对我们也看不出来,所以还得加点选中样式: 现在就可以看到选中的日期了: 没啥问题。...你经常用的 Canlendar 或者 DatePicker 组件就是这么实现的, 当然,这些组件除了本月的日期外,其余的地方不是用空白填充的,而是上个月、下个月的日期。...这个也很简单,拿到上个月、下个月的天数就知道填什么日期了。

    1.2K40

    与 DeepSeek 共创页面:时间范围控制功能的合作与实现

    与 DeepSeek 共创页面:时间范围控制功能的合作与实现 本文将分享我与 DeepSeek 合作,如何在 Vue 项目中使用 Element Plus 的 el-date-picker 组件实现时间范围选择...selectTimeRange('year')" > 年 div> div>el-date-picker:用于选择日期范围,v-model 绑定到...}; }, methods: { // 根据选择的时间范围设置日期 selectTimeRange(range) { this.selectedTimeRange =...selectTimeRange 方法:根据用户选择的“日”、“月”、“年”动态设置日期范围。日范围:设置为当天。月范围:设置为当前月的第一天和最后一天。年范围:设置为当前年的第一天和最后一天。...active 类:高亮显示当前选中的按钮。hover 效果:鼠标悬停时改变背景色。4. 合作总结 通过与 DeepSeek 的合作,我们高效地完成了时间范围控制功能的开发。

    52110

    万能工具大全——简单记账本

    前言 我们可以通过算法来完成很多很多的功能,所以就有了一个想法,将各类工具都写出来,当然是尽可能的,毕竟未来无限可期,很多功能是我们当前还想不到的,为了最为靠谱的方法来完成,这里选择的语言为 HTML...来完成,别看只是简单的页面操作,但是里面都是各类算法来完成的,并且有很多的js库,做起来会很方便,能节约很多的时间,本系列文章会很多,有些标题命名可能不太合适,如果你用到了,感觉不好找可以在文章下面留言...,我看到了后会进行对应的修改,希望本系列文章能给大家提供到各种各样的遍历。...收支记录管理 快速记账:通过"记一笔"按钮,快速添加收入或支出记录 双向记账:支持收入和支出两种类型的记账方式 分类管理:预设多种收入和支出分类,便于财务分析 日期记录:可选择任意日期进行记账,支持补录历史交易...(收入或支出) 输入交易金额 选择适当的分类 设置交易日期(默认为今天) 添加备注信息(可选) 点击"保存"按钮完成记录 查看和筛选交易 在"收支明细"卡片中查看所有交易记录 使用"筛选"下拉菜单选择查看全部

    21710
    领券