基于layui日历记事本特效插件

基于layui日历记事本特效插件

一款基于layui框架的一款简单的日历日期记事本。该插件完全由layui前端框架二次开发完成,基于独立插件laydate5.0。不考虑页面样式的同学们也可以去官方下载独立的laydate插件。

使用方法
在页面引入需要用到的layui.js文件

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

日历插件调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function loding_date(date_value,data){
 
  laydate.render({
    elem: '#test-n2'
    ,type: 'date'
    ,theme: 'grid'
    ,max: '2099-06-16 23:59:59'
    ,position: 'static'
    ,range: false
    ,value:date_value
    ,calendar: true
    ,btns:false
    ,done: function(value, date, endDate){
      console.log(value); //得到日期生成的值,如:2017-08-18
      console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
      console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
      //layer.msg(value)
       
      //调用弹出层方法
      date_chose(value,data);
       
    }
   , mark:data//重要json!
     
  });
}

编辑标注

1
2
3
4
5
6
7
8
9
10
11
12
13
function chose_moban(obj_date,markJson){
  //获取弹出层val
  var chose_moban_val = $('#text_book').val();
   
  $('#test-n2').html('');//重要!由于插件是嵌套指定容器,再次调用前需要清空原日历控件
    //添加属性
    markJson[obj_date] = chose_moban_val;
    console.log(JSON.stringify(markJson));
   
    //再次调用日历控件,
    loding_date(obj_date,markJson);//重要!,再标注一个日期后会刷新当前日期变为初始值,所以必须调用当前选定日期。
     
}

撤销选择

1
2
3
4
5
6
7
8
9
function chexiao(obj_date,markJson){
  //删除指定日期标注
  delete markJson[obj_date];
  console.log(JSON.stringify(markJson));
  //原理同添加一致
  $('#test-n2').html('');
  loding_date(obj_date,markJson);
 
}

文件信息:

    0

    发表评论