laydate日期时间插件年选择器和年月选择器实现不用点击确定

laydate日期时间插件只有是日期的时候才不用点确定，年选择器和年月选择器的时候必须点确定才能选中。用起来很不方便，这里在不改变源代码的情况实现不用点击确定。

1.年选择器实现

<input type="text" name="year" id="year" placeholder="yyyy-MM" class="layui-input"  >

js代码

layui.use('laydate', function(){var laydate = layui.laydate;var initYear;laydate.render({elem: '#year',type: 'year',/* ready和change函数是为了实现选择年份时不用点确定直接关闭  */ready: function(date){ // 控件在打开时触发，回调返回一个参数：初始的日期时间对象initYear = date.year;},change: function(value, date, endDate){ // 年月日时间被切换时都会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象var selectYear = date.year;var differ = selectYear-initYear;if (differ != 15 && differ != -15) {if($(".layui-laydate").length){$("#year").val(value);$(".layui-laydate").remove();}}initYear = selectYear;}});
});

2.年月选择器实现

<input type="text" name="yearMonth" id="yearMonth" placeholder="yyyy-MM" class="layui-input"  >

js代码

layui.use('laydate', function(){var laydate = layui.laydate;var initYear;laydate.render({elem: '#yearMonth',type: 'month',/* ready和change函数是为了实现选择年月时不用点确定直接关闭  */ready: function(date){ // 控件在打开时触发，回调返回一个参数：初始的日期时间对象initYear = date.year;},change: function(value, date, endDate){ // 年月日时间被切换时都会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象var selectYear = date.year;var differ = selectYear-initYear;if (differ == 0) {if($(".layui-laydate").length){$("#yearMonth").val(value);$(".layui-laydate").remove();}}initYear = selectYear;}});
});

laydate日期时间插件年选择器和年月选择器实现不用点击确定相关推荐

laydate日期时间插件实现不用点击确定
使用laydate时间插件,想要改变插件原本的内容,这让人很头疼,可是需求提出来了我们能说什么....本次就是在不改变插件源码的基础上,改变插件样式. <div> <ul clas ...
layDate日期选择插件
在日常的网页开发过程中,日期组件已经成为不可或缺的组件之一.同时,随着广大杰出攻城狮的不懈努力,也出现了很多优秀的日期组件,其中我个人觉得 layDate 日期组件是一个非常不错的组件,简洁易用,样式 ...
layui 日期重置_日期时间插件--日期时间组件文档 - layui.laydate
样式: /*这里我引的是我本地的js*/ layui.use('laydate', function () { var laydate = layui.laydate; var start = { / ...
单独使用 laydate 日期时间组件
layui 日期和时间组件官方文档需要注意几点: 下载压缩包后,复制整个 laydate 文件夹放到项目中,里面的文件不要改动位置,否则会报错: 在移动端使用时,要给 input 添加 readon ...
Mint-UI 的 DatetimePicker 日期时间插件的安装与使用
简介:Mint-UI是饿了么出品的基于vue的移动端组件库(element-ui是桌面端) 官网:http://mint-ui.github.io/docs/#/zh-cn2 项目环境:vue-cli ...
日期时间选择插件 - laydate.js
日期时间选择插件 laydate.js 1. 引入JS. 官网:http://laydate.layui.com <script type="text/javascript" ...
layui日期时间选择器
layui_日期时间选择选择器基本选择器效果年选择器效果年月选择器效果时间选择器效果日期加时间选择器效果可能会出现的bug解决选择器在看案例之前,先来看一下日期选择器的参数 ...
jQuery日期和时间插件 datetimepicker
获取插件Demo文件方式: 关注微信公众号"快乐干饭人的外卖券",发送"日期时间插件"6个字给公众号,免费获取代码网盘链接.(注意文字不要写错哟!) date ...
工作笔记---js时间插件的使用
工作中用到日期时间插件,需要精确到秒,总结工作所得,标记... 第一种,jquery-datapicker(默认是年月日),加上扩展jquery-ui-timepicker-addon.js(可以实现 ...

laydate日期时间插件年选择器和年月选择器实现不用点击确定

1.年选择器实现

2.年月选择器实现

laydate日期时间插件年选择器和年月选择器实现不用点击确定相关推荐

最新文章

热门文章