精华内容
下载资源
问答
  • 手机日历插件JS特效

    2019-11-08 23:15:57
    手机日历插件JS特效 手机日历插件JS特效 手机日历插件JS特效 手机日历插件JS特效 手机日历插件JS特效
  • 1、点我下载2、使用方法: <!--日历插件3个css--> <link href="../M

    1、点我下载

    2、使用方法:

     <!--日历插件3个css-->
    <link href="../Mobiscroll/mobiscroll.android-ics-2.5.2.css" rel="stylesheet">
    <link href="../Mobiscroll/mobiscroll.animation-2.5.2.css" rel="stylesheet">
    <link href="../Mobiscroll/mobiscroll.core-2.5.2.css" rel="stylesheet">
     <!--日历插件5个js-->
    <script src="../Mobiscroll/mobiscroll.core-2.5.2.js"></script>
    <script src="../Mobiscroll/mobiscroll.core-2.5.2-zh.js"></script>
    <script src="../Mobiscroll/mobiscroll.datetime-2.5.1.js"></script>
    <script src="../Mobiscroll/mobiscroll.datetime-2.5.1-zh.js"></script>
    <script src="../Mobiscroll/mobiscroll.android-ics-2.5.2.js"></script>

    3、初始化日历插件:

    $(function(){
            var currYear=(new Date().getFullYear());
            var opt={};
            opt.datetime={preset:'datetime'};
            opt.date={preset:'date'};
            opt.time={preset:'time'};
            opt.default={
                preset:'datetime',
                theme:'android-ics light',
                display:'bottom',
                modal:'scroller',
                lang:'zh',
                dateFormat:'yyyy-mm-dd',
                controls:['calendar'],
                startYear:currYear,
                endYear:currYear+50
            };
            var optTime= $.extend(opt['datetime'],opt['default']);
            $('#time').mobiscroll(optTime);
        })

    4、效果图:
    这里写图片描述

    这里写图片描述

    5、总结

    该插件方便年月日时分秒的控制,以及开始日期和结束日期的联动,无兼容问题。手机端日历优先使用该插件!

    PS:更新:demo(要求:开始时间最小为当前系统时间,最大为15天后;结束时间最小为选择的开始时间,最大为选择的开始时间的当天23点59分)
    html代码:

     <input type="text" id="startdate" class="form-control bgdate" placeholder="请输入开始时间 "/>
     <input type="text" id="enddate" class="form-control bgdate" placeholder="请输入结束时间 " disabled/>

    js代码:

      //初始化日历插件
        $(function() {
            var currYear = (new Date().getFullYear());
            var date = new Date();
            var nyear = date.getFullYear();
            var nmonth = date.getMonth();
            var nday = date.getDate();
            var nhour = date.getHours();
            var nminite = date.getMinutes();
            var now = new Date(nyear, nmonth, nday, nhour, nminite);//设置开始时间最小为现在
            var last = new Date(nyear, nmonth, nday + 15, 23, 59);//设置开始时间最大为15后
            var opt = {};
            opt.datetime1 = {
                preset: 'datetime',
                minDate: now,
                maxDate: last
            };
            opt.date = {
                preset: 'date'
            };
            opt.time = {
                preset: 'time'
            };
            opt.default = {
                preset: 'datetime',
                theme: 'android-ics light',
                display: 'bottom',
                modal: 'scroller',
                lang: 'zh',
                dateFormat: 'yyyy-mm-dd',
                onSelect:function(){
                    var val=$('#startdate').val();
                    able(val);//启用结束时间
                    if(val!=""){
                        var newDate=val.split('-').join('/');
                        var str1=new Date(newDate);
                        var first=val.split(' ')[0];
                        var first=first.split('-').join('/');
                        var str2=new Date(first+' 23:59');
                        opt.datetime2={
                            preset:'datetime',
                            minDate:str1,//设置结束时间最小为开始时间
                            maxDate:str2//设置结束时间最大为开始时间当天的23:59
                        };
                        var optTime2= $.extend(opt['datetime2'],opt['default']);
                        $('#enddate').mobiscroll(optTime2);
                    }
    //                checkTime(this);
                },
    
                controls: ['calendar'],
                startYear: currYear,
                endYear: currYear + 50
            };
            var optTime1 = $.extend(opt['datetime1'], opt['default']);
            $('#startdate').mobiscroll(optTime1);
        });
        //开启结束时间
        function able(element){
            if(element !=''){
                $('#enddate').removeAttr('disabled');
            }
        }

    6.配置API

            //下面注释部分是上面的参数可以替换改变它的样式
            // 直接写参数方法
            //$("#scroller").mobiscroll(opt).date(); 
            // Shorthand for: $("#scroller").mobiscroll({ preset: 'date' });
            //具体参数定义如下
            //{
            //preset: 'date', //日期类型--datatime --time,
            //theme: 'ios', //皮肤其他参数【android-ics light】【android-ics】【ios】【jqm】【sense-ui】【sense-ui】【sense-ui】
            //【wp light】【wp】
            //mode: "scroller",//操作方式【scroller】【clickpick】【mixed】
            //display: 'bubble', //显示方【modal】【inline】【bubble】【top】【bottom】
            //dateFormat: 'yyyy-mm-dd', // 日期格式
            //setText: '确定', //确认按钮名称
            //cancelText: '清空',//取消按钮名籍我
            //dateOrder: 'yymmdd', //面板中日期排列格
            //dayText: '日', 
            //monthText: '月',
            //yearText: '年', //面板中年月日文字
            //startYear: (new Date()).getFullYear(), //开始年份
            //endYear: (new Date()).getFullYear() + 9, //结束年份
            //showNow: true,
            //nowText: "明天",  //
            //showOnFocus: false,
            //height: 45,
            //width: 90,
            //rows: 3,
            //minDate: new Date()  从当前年,当前月,当前日开始}
    
    展开全文
  • 1、点我下载2、使用方法: <!-- 日历1个css文件--> <!-- 日历1个js文件--> <script src="../js/LCalendar.js" type="text/javascript" charset="ut

    1、点我下载

    2、使用方法:

        <!-- 日历1个css文件-->
        <link rel="stylesheet" type="text/css" href="../css/LCalendar.css" />
        <!-- 日历1个js文件-->
        <script src="../js/LCalendar.js" type="text/javascript" charset="utf-8"></script>
    

    3、demo:

    <!DOCTYPE html >
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
        <title>报修</title>
        <link href="../css/bootstrap.min.css" rel="stylesheet">
        <link href="../css/common.css" rel="stylesheet">
        <link href="../css/mend-detail-finished.css" rel="stylesheet">
        <!-- 日历1个css文件-->
        <link rel="stylesheet" type="text/css" href="../css/LCalendar.css" />
    
        <!--[if lt IE 9]>
        <script src="../js/html5shiv.min.js"></script>
        <script src="../js/respond.min.js"></script>
        <![endif]-->
        <script src="../js/jQuery-1.9.1.min.js"></script>
        <script src="../js/bootstrap.min.js"></script>
        <!-- 日历1个js文件-->
        <script src="../js/LCalendar.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //初始化LCalendar插件
            $(function () {
               //实例化一个LCalendar对象
                var calendar = new LCalendar();
                calendar.init({
                    'trigger': '#start_date', //标签id
                    'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
                    'minDate': (new Date().getFullYear()-3) + '-' + 1 + '-' + 1, //最小日期
                    'maxDate': (new Date().getFullYear()+3) + '-' + 12 + '-' + 31 //最大日期
                });
    
                //再实例化一个LCalendar对象
                var calendar = new LCalendar();
                calendar.init({
                    'trigger': '#end_date', //标签id
                    'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
                    'minDate': (new Date().getFullYear()-3) + '-' + 1 + '-' + 1, //最小日期
                    'maxDate': (new Date().getFullYear()+3) + '-' + 12 + '-' + 31 //最大日期
                });
            })
        </script>
        <style>
            td{height: 45px;}
            tr>td:first-child{border: 0;}
        </style>
    </head>
    <body style="height: 100%">
    <header>
        <p>
            <a class="back" href="javascript:;"></a>
            <span>搜索</span>
        </p>
    </header>
    <table class="my-table">
        <tr>
            <td width="30%">开始日期</td>
            <td width="70%"><input type="text" id="start_date" class="date-right" readonly/></td>
        </tr>
        <tr>
            <td width="30%">开始日期</td>
            <td width="70%"><input type="text" id="end_date" class="date-right" readonly/></td>
        </tr>
        <tr>
            <td width="30%">报修类别</td>
            <td width="70%" class="img-right top" style="background-position: 95% center;position: relative;">
                <span>总务后勤报修</span>
                <ul class="select">
                    <li class="option">电教设备报修</li>
                    <li class="option">总务后台报修</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td width="30%">处理状态</td>
            <td width="70%">
                <span class="state-type active">待分派<i class="icon">√</i></span>
                <span class="state-type">待维修<i class="icon">√</i></span>
                <span class="state-type">已完成<i class="icon">√</i></span>
            </td>
        </tr>
        <tr>
            <td width="30%">维修人员</td>
            <td width="70%" style="line-height: 40px;background-position: 95% center" class="img-right" >
                <span>李波</span>
                <a href="tel:123456" >
                    <img src="../images/phone.png" alt="" width="16" style="margin-bottom: 3px;margin-left: 20px;"/>
                </a>
            </td>
        </tr>
        <tr>
            <td width="30%">维修人员</td>
            <td width="70%" style="line-height: 40px;background-position: 95% center" class="img-right" >
                <span>李波</span>
                <a href="tel:123456" >
                    <img src="../images/phone.png" alt="" width="16" style="margin-bottom: 3px;margin-left: 20px;"/>
                </a>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <button class="btn-red" style="margin-top: 20px;margin-left: 30%;width: 70%;">开始搜索</button>
            </td>
        </tr>
    </table>
    <script >
        //功能:设置第一个input值为30天前的日期,第二个input值为今天日期,
        function getLastMonthYestdy(date){
            var date = new Date(); //        1    2    3    4    5    6    7    8    9   10    11   12月
            var daysInMonth = new Array([0],[31],[28],[31],[30],[31],[30],[31],[31],[30],[31],[30],[31]);
            var strYear = date.getFullYear();
            var strDay = date.getDate();
            var strMonth = date.getMonth()+1;
            if(strMonth<10)//给个位数的月、日补零
            {
                strMonth="0"+strMonth;
            }
            if(strDay<10)
            {
                strDay="0"+strDay;
            }
            now = strYear+"-"+strMonth+"-"+strDay;
            if(strYear%4 == 0 && strYear%100 != 0){//一、解决闰年平年的二月份天数   //平年28天、闰年29天//能被4整除且不能被100整除的为闰年
                daysInMonth[2] = 29;
            }
            if(strMonth - 1 == 0) //二、解决跨年问题
            {
                strYear -= 1;
                strMonth = 12;
            }
            else
            {
                strMonth -= 1;
            }
    //        strDay = daysInMonth[strMonth] >= strDay ? strDay : daysInMonth[strMonth];
            strDay = Math.min(strDay,daysInMonth[strMonth]);//三、前一个月日期不一定和今天同一号,例如3.31的前一个月日期是2.28;9.30前一个月日期是8.30
            if(strMonth<10)//给个位数的月、日补零
            {
                strMonth="0"+strMonth;
            }
            if(strDay<10)
            {
                strDay="0"+strDay;
            }
            datastr = strYear+"-"+strMonth+"-"+strDay;
            return datastr,now;
        }
        getLastMonthYestdy();
        console.log(datastr);//必须确保日期格式为:YYYY-MM-DD
        $("#start_date").val(datastr);//30天前的日期
        $("#end_date").val(now);//今天日期
    
    </script>
    
    <script >
        //显示
        $(".img-right.top").click(function (e) {
            e.stopPropagation();
            $(".select").slideToggle();
        });
        //隐藏
        $(document).click(function () {
            $(".select").slideUp();
        });
        $(".option").click(function (e) {
            //1、隐藏
            e.stopPropagation();
            $(this).parent().slideUp();
            //2、赋值
            var txt = $(this).text();
            $(".img-right.top span").text(txt);
        } )
    </script>
    <script >
        //处理状态切换: 选中/未选中
        $(".state-type").click(function () {
            $(this).toggleClass("active");
        })
    </script>
    </body>
    
    </html>
    

    4、效果图:

    这里写图片描述

    5、总结

    该插件为轻量级,压缩后只有10k,而且样式可以很方便的自定义,可以设置初始值。其中的年月日,都能够很流畅的滚动。

    展开全文
  • 先放bug:  bug出现原因:调出日期选择框时,点击空白区域,或点击“月”,“日” 字样时会出现此bug. 解决方案 :在引入的calendar.js文件中 加入一段代码:if(val !== val) return 即可 ...

    先放bug:  

    bug出现原因:调出日期选择框时,点击空白区域,或点击“月”,“日” 字样时会出现此bug.

    解决方案 :在引入的calendar.js文件中  加入一段代码:if(val !== val) return  即可

    附上 gitHub 地址:  https://github.com/xfhxbb/LCalendar

    展开全文
  • jQuery手机日历插件节假日,兼容Android、IOS等移动设备中的浏览器。
  • jQuery手机选择日期日历插件是一款jQuery基于calendar.js响应式日历插件,可选择年月日星期手机端日期选择代码。
  • calendar手机选择日期日历插件,这是一个手机日历模板,可以自动选择日期
  • jQuery手机选择日期日历插件是一款jQuery基于calendar.js响应式日历插件,可选择年月日星期手机端日期选择代码。
  • 多功能手机端日期日历插件mobiscroll,多功能手机端选择器插件,不仅仅支持日期日历选择, 还支持其他选项,多皮肤选择,多事件方式,触摸、点击,多国语言支持,非常强大的手机端 选择插件,推荐使用。
  • 有没有类似手机的可编辑日历插件有没有类似手机的可编辑日历插件…………
  • 时间日历插件,可以下载直接使用,使用方便
  • 多功能手机端日期日历插件mobiscroll,多功能手机端选择器插件,不仅仅支持日期日历选择, 还支持其他选项,多皮肤选择,多事件方式,触摸、点击,多国语言支持,非常强大的手机端 选择插件,推荐使用。 
  • vue--手机日历插件

    千次阅读 2018-11-30 16:33:04
    最近的一个项目需要写一个日历插件,对一些知识点有了新认识,所以记下方便以后的查阅   其中对日期函数有了更深入的了解:  var date = new Date();  date .getYear(); //获取当前年份(2位)  date ....

    最近的一个项目需要写一个日历插件,对一些知识点有了新认识,所以记下方便以后的查阅

     

    其中对日期函数有了更深入的了解:

        var date = new Date();
                   date .getYear(); //获取当前年份(2位)
                   date .getFullYear(); //获取完整的年份(4位,1970-????)
                   date .getMonth(); //获取当前月份(0-11,0代表1月)
                   date .getDate(); //获取当前日(1-31)
                   date .getDay(); //获取当前星期X(0-6,0代表星期天)
                   date .getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
                   date .getHours(); //获取当前小时数(0-23)
                   date .getMinutes(); //获取当前分钟数(0-59)
                   date .getSeconds(); //获取当前秒数(0-59)
                   date .getMilliseconds(); //获取当前毫秒数(0-999)
                   date .toLocaleDateString(); //获取当前日期
                   var mytime=date .toLocaleTimeString(); //获取当前时间
                    date .toLocaleString( ); //获取日期与时间

       下面的具体的代码:

    
    <table class="bgtable">
          <thead>
              <tr>
              <!--汉字表头-->
              <th v-for="(item,index) in daynamearr" :key="index">{{item}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(week, index) in theweek()" :key="index">
              <td v-for="(item, index) in week" :key="index" :class="{'gray': item.prevmonth || item.nextmonth}" @click="viewAttendance(item.day)">
                <div class="dot" :class="[item.correct == '正常' ? 'success' : (item.correct == '异常' ? 'warning' : (item.correct == '无' ? 'kong' :  'rest'))]">{{item.typesetting}}
                  </div>
            </tr>
          </tbody>
        </table>
    data() {
        return {
          daynamearr: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //本月的本期构成
          dayarr: [],
          arr: [],
        }
    }

     

    getCalendar(year, month, isClear) {
          if (isClear) {
            this.dayarr = [];
          }
          var themonth1stday = new Date(year, month - 1, 1).getDay(); 
          var y = month == 12 ? year + 1 : year;
          var m = month == 12 ? 1 : month;
          var themonthdaysamount = new Date(new Date(y, m, 1) - 1).getDate();
          var prevmonthlastday = new Date(
            new Date(year, month - 1, 1) - 1
          ).getDate();
          while (themonth1stday-- > 0) {
            this.dayarr.unshift({
              day: prevmonthlastday--,
              prevmonth: true,
              currentmonth: false
            });
          } //本月的日期
          var count = 0;
          while (themonthdaysamount--) {
            this.dayarr.push({
              day: ++count,
              currentmonth: true
            });
          }
          var c = 42 - this.dayarr.length;
          var count2 = 1;
          while (c-- > 0) {
            this.dayarr.push({
              day: count2++,
              nextmonth: true,
              currentmonth: false
            });
          }
          var _arr = [];
          for (var i = 0; i < 6; i++) {
            var _week = [];
            for (var j = 0; j < 7; j++) {
              _week.push(this.dayarr[i * 7 + j]);
            }
            _arr.push(_week);
          }
          
          this.arr = _arr
        },

    项目中还有一些其他小功能:计算上班的时间

    getWorkTime(time1, time2) {
          let dateDiff = time1 - time2;
          let dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); 
          let leave1 = dateDiff % (24 * 3600 * 1000); 
          let hours = Math.floor(leave1 / (3600 * 1000)); 
          let leave2 = leave1 % (3600 * 1000); 
          let minutes = Math.floor(leave2 / (60 * 1000)); 
          let leave3 = leave2 % (60 * 1000); 
          let seconds = Math.round(leave3 / 1000);
          return hours + "小时" + minutes + "分钟";
        },

    点击获取日期和星期

     getCurrentWeek(w) {
          let date = new Date();
          if(w == undefined) {
            w =date.getDay();
          }
         switch(w) {
           case 0: {
             this.currentWeek = "星期日";
           } break;
           case 1: {
              this.currentWeek = "星期一";
           } break;
           case 2: {
             this.currentWeek = "星期二";
           } break;
           case 3: {
             this.currentWeek = "星期三";
           } break;
           case 4: {
             this.currentWeek = "星期四";
           } break;
           case 5: {
             this.currentWeek = "星期五";
           } break;
           case 6: {
             this.currentWeek = "星期六";
           } break;
         }
        },

     

    展开全文
  • js手机端,H5端,自适应日历插件,内附有demo实例,简单易懂
  • jQuery手机日历考勤记录插件是一款可以选择年月日历,可以记录每日考勤打卡情况考勤记录插件
  • jQuery日历插件支持自定义样式 颜色 多选 单选日历 告别切换状态重置。告别样式太死板,可以联系我继续修改,联系邮箱: zd_9022952@163.com。邮件内容为:想添加什么样的功能等。使用方法:1、head引入css文件.text{...
  • 在原有的LCalendar-手机日历插件上进行优化,修复点击空白处显示NUN的Bug,增加在点击执行确认按钮事件之后的自定义函数,该函数将在最后执行,可用于其他自定义的校验等操作
  • Zebra日历插件

    2013-01-05 17:20:50
    一款很好的日历插件,我自己也用过了,整理了一下,可以用在手机和web端,都挺好的用的。
  • jQuery手机日历考勤记录插件是一款可以选择年月日历,可以记录每日考勤打卡情况考勤记录插件
  • 公众号:大师兄2016 安装日历 ... ... 在下拉菜单中选择应用 ... 安装Calendar插件 ...编辑日历 ...安装完成后,日历会出现在左上角菜单 ...导入日历文件(安卓手机) 选择日历右上角的设置 选择日程导入 选择本地日历文件.
  • 这是一款简单实用基于jQuery CSS3 html5实现的手机移动端入住日期和离店日期选择代码,手机端酒店预订日期选择日历插件。 js代码 [removed][removed] [removed] // var STATS_START_...
  • 这是一款使用jquery.calendario配合css3制作的全屏响应式jQuery日历插件。这款日历插件可用于移动设备、平板和手机。它采用流式布局,当屏幕足够小的时候只显示一列。
  • 日历插件使用心得

    2019-01-10 15:39:06
    日历插件使用心得 1.laydate(https://www.layui.com/laydate/) 这个插件好用样式也很好看,但是只能靠点击,不能实现手机的下拉选择,操作不便,不过可有多种样式选择 2.html自带得input type date...
  • jQuery带记事本功能的日历插件,主要是使用了jquery插件和另一个封装的日历插件jalendar.js来实现,示例index.html文件中是调用方法,这个日历插件外观设计精美,和Android手机中的很相似。同时这个插件还可以选择...
  • 我的网盘:http://pan.baidu.com/s/1jIib2Ay 转载于:https://www.cnblogs.com/liuhao-web/p/6592784.html

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 173
精华内容 69
关键字:

手机日历插件