button_card手搓万年历

消逝

1、主UI界面教程跳转：HA彩平图UI分享（2024-11-08更新代码架构）-保姆级教程！
2、部分数据来源本论坛：node-red本地计算万年历流程+万年历卡片
3、部分数据来源：lunar (6tail.cn)





------------以下正文----------
1、新建辅助元素-计数器：counter.year（范围1900到2100）
2、新建辅助元素-输入选择表：input_select.month（添加选项：01、02、03……10、11、12）
3、新建辅助元素-输入日期时间值，选择日期：input_datetime.datetap
4、NR流，导入配置Server和Device，原计划配置一个实体+多属性的，但是UI界面不刷新，只能换成单个实体，所以实体有点多

游客，如果您要查看本帖隐藏内容请回复

5、（UI是普通的仪表盘模式的）放置UI代码

游客，如果您要查看本帖隐藏内容请回复

6、（UI是yaml文件形式的）放置UI代码

xiaoshi-ui.yaml放置：         \config\dashboards\xiaoshi-ui.yaml
time.yaml放置：                 \config\dashboards\ui\time.yaml
lunar.yaml放置：                \config\dashboards\popup\lunar.yaml
lunar_calendar.yaml放置：\config\dashboards\popup\lunar_calendar.yaml
calendar.yaml放置：          \config\dashboards\button_templates\calendar.yaml

复制代码

游客，如果您要查看本帖隐藏内容请回复

7、调整你喜欢的配色

          #####################   时间/日期    #####################
          - type: custom:button-card  
            variables: 
              font_color_main: red    ##黄历部分，重点加粗部分颜色 
              font_color: black       ##黄历部分，普通部分颜色
              font_color_icon: white   ##黄历部分，4神位图形里的颜色
              font_calendar: black      ##日历部分，主要文本字体的颜色
              font_calendar_min: Grey   ##日历部分，次要文本字体的颜色 
              font_calendar_icon: black ##日历部分，翻页按键的颜色
              background_max: OldLace   ##深色部分颜色
              background_min: FloralWhite  ##浅色部分颜色 
              background_icon: red         ##图形部分颜色 
              background_tap_max: rgb(127,255,212,0.8)      ##选中日期的颜色-深色
              background_tap_min: rgb(127,255,212,0.3)      ##选中日期的颜色-浅色
              line_lunar: NavajoWhite           ##黄历边框浅色
              line_calendar : NavajoWhite       ##日历边框浅色

复制代码

dj01

66666666666666

龙柒爸爸

厉害6666

watter

厉害6666 过来学习的

flamestsui

支持。手搓太耗时了

hhh.

这个日期选择的设计真不错。

直接使用“input_datetime.datetap”直接输出给农历计算节点， 只需要一个function节点就可以实现全部输出，这样会精简很多代码。

例：  const lunarDate = lunar.Lunar.fromDate(new Date(msg.payload));      可以尝试一下。

心之向阳

厉害，button card是不得不越过的大山

消逝

hhh. 发表于 2024-11-9 00:49
这个日期选择的设计真不错。

直接使用“input_datetime.datetap”直接输出给农历计算节点， 只需要一个fun ...

我主要是对这个时间戳是真不熟悉，我试试

消逝

hhh. 发表于 2024-11-9 00:49
这个日期选择的设计真不错。

直接使用“input_datetime.datetap”直接输出给农历计算节点， 只需要一个fun ...

var dateTime = msg.datetime + "T00:00:00";
var lunarDate = Lunar.Lunar.fromDate(new Date(dateTime));  //获取点击数后的函数头
我就是这么写的啊，只是要拼一个"T00:00:00"，要不然好像不行

消逝

hhh. 发表于 2024-11-9 00:49
这个日期选择的设计真不错。

直接使用“input_datetime.datetap”直接输出给农历计算节点， 只需要一个fun ...

我那个 农历部分不复杂，基本还是用的你得教程里的代码，
我加了日历那部分代码有点复杂，要定位日期位置（1号显示在哪个格子，在定位出其他格子应该显示几号）