时间选择器插件

喜欢ヅ旅行 2022-01-26 07:11 477阅读 0赞

开发工具与关键技术：vs与jquery
    
    作者：戴怡斌 
    
    撰写时间：2019年5月25日

时间插件在设置页面和设置软件的时候运用特别多，比如，打LOL的时候，右上角就有记录你玩了多长时间。还可以帮你记住重要日子，父母的生日，自己的生日，高考学子距离高考的日期，等等。

还有就是每个手机，电脑上的时间都跟时间插件有关。

如果自己敲代码的话，太麻烦了，所以就会有这种插件(也可以说是偷懒，但好用)，

其实能灵活的运用插件也是一门技术，不仅要学会怎么敲代码还有学会运用插件，任重而道远。

想要制作时间选择器，就要有思路，思路的第一种就是获取电脑上的时间，第二种就是当你进入某个事件或特定场景中开始计时(目前就只学的这两种)。

第一种页面上比较多。第二种当然就是游戏上面运用的多，

时间插件在网上能搜到，我用的是layui里面的时间插件。

这个列子是最简单的一种，在文本框加个id和class

![在这里插入图片描述][20190528143407586.png]  
这一种是最简单的，你只要在敲下图这几句代码就可以了。

写js代码要明白自己写的是什么，很像渲染表格。  
![在这里插入图片描述][20190528143433595.png]

重要的事情说三遍，太简单了，很适用的一种最简单的时间选择器。

elem: '#shijian'：这#就不多说了，id要一样。

最简单的一种就已经完成了，点击这个文本框弹出时间选择器。  
![在这里插入图片描述][20190528143511625.png]  
如果你不想你的时间格式跟我一样也可以换，也就是自定义模式，自己定义日期格式。

format: 'yyyy年MM月dd日'：加上这一句代码就可以换格式，yyy代表年份，MM代表月份，dd代表日期，记住就可以了。
    
    有很多种格式：y/m/d. y-m-d. 你也可以倒着写：d-m-y.

一个y代表一个数字，四个y意思就是：至少四位数，2000.当然如果没有四位数那就补零。

时间选择器到这里就敲完了。

[20190528143407586.png]: /images/20220126/4e9b76a7a65e484294990c1e67fcbbf1.png
[20190528143433595.png]: /images/20220126/c3e1f0abc0dd4f54b5274159d11efe67.png
[20190528143511625.png]: /images/20220126/0a32f10a3e07405f8339a231fcbc49f0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，477人围观）

还没有评论，来说两句吧...

相关阅读

相关时间选择器

1、创建一个时间选择器的类 2、在主页中使用该类创建一个时间选择器的类 package com.nf.bottomdemo.utils; im

你的名字/ 2023年08月17日 17:09/ 0 赞/ 72 阅读

相关时间选择器

$("order_timestart").datetimepicker({ format: 'yyyy-mm-dd', autoclose: t

谁践踏了优雅/ 2023年06月10日 04:28/ 0 赞/ 3 阅读

相关 elementui 时间件选择器 zuijinwunian

pickerOptions: \{ disabledDate (time) \{ var startDate = new D

深碍√TFBOYSˉ_/ 2022年12月17日 11:53/ 0 赞/ 249 阅读

相关【Vue.js】Vue.js组件库Element中的时间选择器、日期选择器、日期时间选择器和颜色选择器

1、TimePicker 时间选择器用于选择或输入日期。固定时间点提供几个固定的时间点供用户选择。 ![20200831145158463.png_pi

比眉伴天荒/ 2022年12月02日 13:53/ 0 赞/ 1441 阅读

相关 uniapp颜色选择器插件

颜色选择器地址 https://ext.dcloud.net.cn/plugin?id=403 导入 / 颜色选择器 / im

谁借莪１个温暖的怀抱￠/ 2022年12月01日 05:19/ 0 赞/ 589 阅读

相关 jQuery创意日期时间选择插件

[下载地址][Link 1]使用jQuery实现的时间日期选择插件，选择年月日和选择时分的样式不同，但是设计创意精美。 ![1631392809.png][] dd:

待我称王封你为后i/ 2022年09月11日 03:29/ 0 赞/ 264 阅读

相关 LayDate 时间选择插件的使用介绍

使用实例： \[html\] view plain copy print ? [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][

我会带着你远行/ 2022年06月16日 09:46/ 0 赞/ 997 阅读

相关 java Swing 时间选择器控件

效果图: ![这里写图片描述][SouthEast]![这里写图片描述][SouthEast 1]![这里写图片描述][SouthEast 2] 简要说明: 一个视图

╰半橙微兮°/ 2022年06月13日 06:48/ 0 赞/ 1191 阅读

相关 mobiscroll插件滑动时间选择效果

![70][] 此插件的特点是可以适用于手机端滑动选择时间，类似于原生插件下载地址 [https://download.csdn.net/download/lianzha

末蓝、/ 2022年05月23日 10:26/ 0 赞/ 286 阅读

相关时间选择器插件

开发工具与关键技术：vs与jquery 作者：戴怡斌撰写时间：2019年5月25日时间插件在设置页面和设置软件的时候运用特别

喜欢ヅ旅行/ 2022年01月26日 07:11/ 0 赞/ 478 阅读