js日期控件 (补助计算器页面)

简介: js日期控件 (补助计算器页面)


记录最近在搞的一个单页面计算器。主要坑点在于日期控件。还有一开始我用px 单位。在安卓平板显示偏小,所以用rem来代替。设置html中的 font-size 大小就可以等比例缩放了。

   首先呢,我开发的这个页面的是 vue模版,用CDN 引入vue 依赖,然后提供给安卓平台使用的。安卓端,用webview 显示我的页面。 


  一开始我用 <input type='date'> 这个来显示和使用日期控件的。在安卓 webview 使用的时候,会调用安卓的日期控件。坑点一,这样的日期控件字体太小,而且居左显示了,安卓开发人员无法调大字体和调位置。所以这个放弃了。 


  本来想省事,结果没得逞,那就改用iview 的日期控件,这里显示的字体图标,我在github下载对应的iconfont.css,iconfont.svg,iconfont.ttf,iconfont.woff 等文件。   在chrome 显示良好,在安卓平台调用的时候,触发了input事件,把键盘弹出来了。input 封装在 iview 的日期控件<DatePicker> 里面,不好折腾,还有iview 也不适配移动端。又放弃了。


找一个适配移动端的ui框架, 有 vant.ui ,weui,mint.ui 等等  ,mint-ui用的次数比较多,所以选这个。用CDN 引入css, js 文件等。这是一个滚轮的方式的。一开始 UI觉得也可以。先用着。隔天来个图,把这个推翻了。又要找日期控件了。

在网上找了 ,layui 的一个 laydate 日期控件,这个是用js是实现的,可以绑定在div上,这样就不用对input作处理,兼容性好。美观。 使用简单。所以就用这个了。

传送门 https://www.layui.com/laydate/

如下:
image.png

相关文章
|
2月前
|
开发框架 JavaScript 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
44 5
|
16天前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
17 2
前端JS读取文件内容并展示到页面上
|
16天前
|
JavaScript 前端开发
js 回到页面顶部
本文提供了一个JavaScript函数`scrollToTop`,用于平滑滚动页面回到顶部。该函数利用`requestAnimationFrame`和`window.scrollTo`方法逐步减少滚动条距离,直到页面完全回到顶部。
26 1
|
1月前
|
JavaScript 前端开发
js怎么定位不同的页面元素
在JavaScript中,有多种方法定位和选择页面元素。
|
13天前
|
JavaScript 前端开发
[收藏]用JavaScript让弹出页面以最小化的形式出现在状态栏中
[收藏]用JavaScript让弹出页面以最小化的形式出现在状态栏中
|
14天前
|
JavaScript 前端开发
js登录注册简单tab切换页面(含前台表单验证)
文章介绍了如何使用HTML、CSS和JavaScript创建一个简单的登录注册页面,并实现Tab切换效果。包括了表单验证,点击登录或注册按钮时,可以切换显示相应的表单。同时提供了完整的前端代码和实现效果图。
|
2月前
|
JavaScript 前端开发
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
|
2月前
|
JavaScript 前端开发
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
32 2
|
2月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
29 2
|
2月前
|
JavaScript 前端开发 API
js全屏,监听页面是否全屏
js全屏,监听页面是否全屏
47 4