mdui
mdui copied to clipboard
zdhxiong
我用mdui自己写了一个简单的日历组件
- 在提交 issue 之前，请搜索相关内容是否已被提出。
- 请确保你使用的是最新版的 mdui，当前最新版为 0.4.3
这是一个（可多选）
- [] bug 反馈
- [ ] 功能建议
- [x] 新组件或新特性
- 使用平台：Android、iOS、Windows
- 浏览器及版本：Chrome 58.0.3029.110 (64-bit)
代码
https://gitee.com/lijialong1313/house/raw/master/mdui-calendar/index.html
演示效果
http://lijialong1313.gitee.io/house/mdui-calendar/index.html
这是一个我用mdui写的一个简单的日历，适配了小屏幕和大屏幕的版本。
求轻喷QwQ，我们目前正在用在微信公众号上，结合活动报名程序一起，可以将个人的在线日历显示出来
建议……展开后180°旋转箭头，旋转方向不限。
噗嗤，这个准备内容改掉的，因为mdui的卡片好像不能容纳特别多的信息而且也不明显。不过你的提议很好，我看下能不能加动画效果
应该还算可以吧...
轻喷的话还是建议改改日历的布局啥的，在我电脑的屏幕上看着很宽很别扭...
这个我脑阔有点疼，不知道怎么样在电脑模式下也有良好的效果。因为google日历在这个方面上参考的不多，而且……mdui的圆形按钮如果放在大屏幕上很丑
噗嗤，这个准备内容改掉的，因为mdui的卡片好像不能容纳特别多的信息而且也不明显。不过你的提议很好，我看下能不能加动画效果
我没有考虑这个问题，我用的是mdui对话框
应该还算可以吧... 轻喷的话还是建议改改日历的布局啥的，在我电脑的屏幕上看着很宽很别扭...
这个我脑阔有点疼，不知道怎么样在电脑模式下也有良好的效果。因为google日历在这个方面上参考的不多，而且……mdui的圆形按钮如果放在大屏幕上很丑
其实实际上没必要考虑这些，因为 datepicker 本身就是一个小控件，做这么大反而不合适。
如果你是想要做成一个小控件的话（即让用户选择日期后生成字符串返回），可以参考这里的设计思路： https://github.com/zdhxiong/mdui/issues/1#issuecomment-557785950
或者你只是想做一个全屏的日历的话... 大概可以想象为将日历页面的宽屏版本放大。因为电脑屏幕就是这么大，没有其他的改进方式了。
或者也可以按照 @Marksteinsong 的思路直接使用 mdui-dialog，这样可以直接忽略屏幕适配问题。在 dialog 原有的基础上改写部分 css 使其宽度和高度合适，然后再分别设计移动端和电脑端日历的样式（例如电脑端日历是左右切换的，移动端则是上下切换等），总之这总比放在宽屏幕下不知所措的情况（也根本无所措）要少一些尴尬。
噗嗤，这个准备内容改掉的，因为mdui的卡片好像不能容纳特别多的信息而且也不明显。不过你的提议很好，我看下能不能加动画效果
经观察，为按钮设置CSS：
button{
transition: transform .3s ease;
}
button.expanded{/*展开的按钮*/
transform: rotate(90deg);
}
或许有效。
@Subilan @Marksteinsong
我直接抄了给的那个链接，自己重新做了一个但是没做功能，可以看一下。
演示地址：http://lijialong1313.gitee.io/house/mdui-calendar/date.html
里面有部分html代码注释掉的，注释掉的部分就是我实现这个日历选择器里面的代码。
我考虑是宽屏（PC）后类似G家的日历一样，直接变成左右结构。
虽然我的代码写的挺烂的（真的是烂，我知道），不过相对其他暂时还没有利用这个组件做的mdui的日历（不是日历选择器），我这个或许能稍微抛砖引玉一下