基于layui日历记事本(原创)

所属分类:输入-日期和时间

 58566  398  查看评论 (15)
分享到微信朋友圈
X
基于layui日历记事本(原创) ie兼容8

注:因加载外部json文件,需要在服务器端预览,本地预览会有跨域问题。

更新时间:2019-10-15 22:41:26

更新说明修复IE浏览器不兼容问题,目前IE并不支持ES6语法。

兼容IE

laydateNote.jsES6版本

laydateNoteES6.js新增,展示列表功能:

配置如下,由于引用了模板引擎,建议,html布局代码参照一下内容,样式布局可自行修改。

fine: '.laydateNotebook', //这里是展示div,默认不写则是关闭展示功能html 
<!--详细记事本-->     
<div class = "laydateNotebook" > 
    <div class = "box" > 
    </div>
</div > 
<!--容器-->   
<scriptt type="text/html" id="fineTpl">
    <ul class="layui-timeline"> {{each lists v i }}
        <li class="layui-timeline-item"> <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">{{v.time}}</h3>
                <p> {{v.value}} </p>
            </div>
        </li> {{/each}}
        <li class="layui-timeline-item"> <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <div class="layui-timeline-title">...</div>
            </div>
        </li>
    </ul>
</scriptt>

新增请求参数:

param:'',默认为空,//这里参数是请求数据ajax的data参数,示例:param:{ id:1 }优化回调函数,方便ajax请求:

done: function(data, chooseData, type) {
    //回调数据,这里发送你的请求ajax       
    console.log(data, chooseData, type)
}

type:就是你要发送的ajax请求方式,

‘post’:添加数据的ajax请求方式

‘’:删除数据的ajax请求方式

  'patch’:修改数据的ajax请求方式



更新时间:2019-06-19 09:50:51

更新说明:代码重构,基于最新Layui框架订制。


使用说明

引入css:

<link rel="stylesheet" href="./layui/css/layui.css" /> 
<link rel="stylesheet" href="./css/date.css" />

引入js

<script src="./layui/layui.js"></script>

html:

<!--容器-->  
<div class="layui-inline" id="test-n2"></div> 
<!--容器-->

js:初始化 

layui.extend({
    laydateNote: './js/layui-notebook'
    //layui-notebook.js的相对路径,
}).use(['laydateNote'], function() {
    //调用 
    let {
        laydateNote
    } = layui
    //初始化插件,这是es6格式,
    //es3格式:
    var laydateNote = layui.laydateNote laydateNote({
        elem: '#test-n2',
        //容器id,CLass
        url: 'test2.json',
        //异步数据接口,本地浏览时可不设置 sort: 'up', 
        //日期排序,默认不设置不排序,up 日期升序,down 日期降序
        done(data) {
            //回调数据,这里发送你的请求
            ajax console.log(data)
        }
    })
})

插件路径不懂的可以参考官网

https://www.layui.com/doc/base/modules.html,

其他疑问可咨询Q:1194891819 (备注问题说明,个人由于很忙,可能不会第一时间回复...)


更新时间:2018/7/27 下午1:39:54

更新说明:数据格式更改位JSONArray。数据按时间正序排列(默认排列方式位正序,倒序已注释。)。可在console查看数据。


发布时间:2018-6-1 0:59

首先感谢贤心大神的layui 前端框架。
该插件完全由layui前端框架二次开发完成,基于独立插件laydate5.0。不考虑页面样式的同学们也可以去官方下载独立的laydate插件。
不懂的同学可以加QQ:1194891819询问哦

相关插件-日期和时间

jQuery日历插件

简洁、优雅的日历插件。
  日期和时间
 78060  519

zepto移动端时间选择插件

简单的移动端时间选择,去掉年显示,适合线上预定下单
  日期和时间
 53055  383

jQuery bootstrap酒店日期插件

基于bootstrap日期插件实现,时间区间选择,预定日期禁用
  日期和时间
 56831  366

jQuery备忘录

日期选择支持备忘录
  日期和时间
 49031  373

讨论这个项目(15)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    0
    2020/9/7 22:26:43
    我的无法保存内容是啥情况,刷新后就又没有了
        ??0
        2020/12/30 17:51:15
        本身就不能保存的 ,你需要存入你的数据库 没在浏览器本地
    回复
    夜星明 0
    2020/5/15 16:19:20
    兼容移动端,点个赞
        0
        2020/9/7 22:28:29
        帅哥问一下,为啥我的无法保存我填入的内容,刷新后就又没了
    回复
    雨Y(^_^)Y记俐 0
    2019/11/15 16:11:28
    大哥,能给下,没有被压缩过,没加密的js吗?如果能给的话,这是我的邮箱1242093572@qq.com,谢谢! 回复
    いぬ や しゃ 0
    2019/10/21 13:57:14
    能不能填入备注后。备注和日期都是显示?
        雨Y(^_^)Y记俐0
        2019/11/15 16:09:41
        您好,我也想要这样的效果,您做出来了吗
    回复
    Lyl路缘 0
    2018/9/26 16:17:18
    怎么没有当日前日期的样式状态,怎么加上去?
        Lyl路缘0
        2018/9/28 10:01:21
        除了火狐其它浏览器不兼容
    回复
    无君子不养艺人 0
    2018/8/31 14:50:54
    怎么在里面加个时间段 回复
    砍柴者 0
    2018/7/28 9:49:25
    求解:可以标注某个日期,多加几个关注点吗 回复
    无缘不聚 0
    2018/6/19 18:04:47
    能限制当前只显示35天吗 回复
    小冷 0
    2018/6/1 10:04:46
    双击弹出,更易用
        颠覆世界的一个人0
        2018/6/4 16:51:19
        这个可以自己改
    回复
    SiriBen 0
    2018/6/1 10:01:43
    不错,效果挺好,并且兼容移动端,点个赞 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复