.点击年份马上关闭窗口并且赋值

html代码:

<div class="layui-form-item">
<label class="layui-form-label">年份</label>
<div class="layui-input-block">
<input type="text" id="year" name="year" class="layui-input">
</div>
</div>

jq代码:

//这个js是用于按年份查询的日期控件

layui.use(["laydate"], function () {

var laydate = laydate = layui.laydate;
laydate.render({
elem: '#year',// 指定元素
type: 'year',//自由选择时间
format: 'yyyy年',
// min: "",
// max: 7,
showBottom: false,
change: function(value, date, endDate){ //点击后事件回调
$('#year').val(value);//点击完赋值
$('#layui-laydate1').remove();//立即关闭窗口
}
});
});

2.起始月份

html代码:

<div class="layui-form-item" id="m" style="display:none;">
<label class="layui-form-label">起始月份</label>
<div class="layui-input-block">
<input type="text" id="month" name="month" class="layui-input">
</div>
</div>

js代码:

laydate.render({
elem: '#month'
,type: 'month'
,format:'M月'
,theme: '#molv'
,range: true
});

layui之laydate的更多相关文章

  1. layui ri laydate的常规使用,并且日期最大不能超过当前日期

    laydate的常规使用,分为两种方式实现日期组件 一.在 layui 模块中使用 下载layui   地址 :https://www.layui.com/  引入资源路径 js 和 css 通过下面 ...

  2. layUI中layDate控件兼容性问题(手机端没有效果,不显示)

    使用layDate插件发现在PC端无问题,然而在适配移动端时,发现点击input时,laydate渲染出的时间控件有时候没有反应,后发现只需在render里加入trigger: 'click',即可以 ...

  3. 日期时间组件 - layui.laydate

    全部参数 一.核心方法:laydate(options); options是一个对象,它包含了以下key: '默认值' { elem: '#id', //需显示日期的元素选择器 event: 'cli ...

  4. layui(一)——layDate组件常见用法

    和 layer 一样,我们可以在 layui 中使用 layDate,也可直接使用 layDate 独立版,可按照实际需求来选择.options整理如下: layui.use('laydate', f ...

  5. 关于layui的日期和时间组件laydate闪屏的坑

    https://blog.csdn.net/liangwenli_/article/details/82786713 jsp页面: <input type="text" cl ...

  6. layui 时间插件laydate中动态设置改变min和max值

    <div class="layui-inline"> <label class="layui-form-label">申请时间</ ...

  7. layui中时间插件laydate的使用

    1.加载layui.js 2.html部分 <div class="layui-inline"> <label class="layui-form-la ...

  8. 日期控件,layui

    <link rel="stylesheet" href="<%=path%>/layui/css/layui.css" type=" ...

  9. layui框架部分功能介绍

    注意:代码的所有功能都没有导入layui的css样式 一,分页功能 layui框架分页使用,其实layui分页非常简单只需要传入一个总页数就可以很好运用这个功能 下面就看一下我对layui框架分页的介 ...

随机推荐

  1. 2020牛客寒假算法基础集训营4-D子段异或

    思路 CODE #include <bits/stdc++.h> #define dbg(x) cout << #x << "=" <&l ...

  2. win10中安装jdk1.8

    一.JDK下载 两种方法,第一种是从官网下载:第二种是拿来主义,小拿直接给你网盘地址.不过,作为java新手,最好还是学会去官网下载. 官网下载的文件才是最安全的,从不靠谱第三方下载有可能安装包有缺失 ...

  3. PHP 冷知识

    1,执行Linux命令 <?php $a =`ls -a /`; // execute linux command echo '<pre>'.$a; 2.为变量起别名 <?ph ...

  4. 小白月赛22 F: 累乘数字

    F:累乘数字 考察点: 思维,高精度 坑点 : 模拟就 OK 析题得侃: 如果你思维比较灵敏:直接输出这个数+ d 个 "00"就行了 当然,我还没有那么灵敏,只能用大数来搞了 关 ...

  5. 【转载】Cadence验证仿真工具IUS和IES

    本博客转自: cadence验证仿真工具IUS和IES | 骏的世界http://www.lujun.org.cn/?p=3714 cadence验证仿真工具IUS和IES cadence,有两大验证 ...

  6. AtCoder Beginner Contest 154 题解

    人生第一场 AtCoder,纪念一下 话说年后的 AtCoder 比赛怎么这么少啊(大雾 AtCoder Beginner Contest 154 题解 A - Remaining Balls We ...

  7. HTTPClient模拟Get和Post请求

    一.模拟Get请求(无参) 首先导入HttpClient依赖 <dependency> <groupId>org.apache.httpcomponents</group ...

  8. Public Key Retrieval is not allowed

    链接MySQL数据库报错: 数据库连接url中添加对应属性的支持.allowPublicKeyRetrieval=true&useSSL=false url: jdbc:mysql://loc ...

  9. Linux - pip 安装使用说明

    简介 pip类似RedHat里面的yum,安装Python包非常方便.本节详细介绍pip的安装.以及使用方法 方案一 wget https://bootstrap.pypa.io/get-pip.py ...

  10. gogs迁移至gitlab

    一.先来聊一聊迁移的思路,不管是gogs迁移至gitlab,还是gitlab迁移至gogs,亦或gitlab迁移至gitlab,手动迁移的步骤都是如下图所示(在gitlab上新建一个空项目就会有这样的 ...