您现在的位置是:网站首页>>前端技术>>html+css+js

使用weeklyCalendar实现周历控件

发布时间:2020-07-27 17:28:49作者:wangjian浏览量:36点赞量:0

    weeklyCalendar的github地址:https://github.com/smallsea2016/weeklyCalendar

    处理后的weeklyCalendar控件的css和js:

    链接:https://pan.baidu.com/s/1VlODqkzGVajXnvULKEAV5Q 

    提取码:k9x2

    weeklyCalendar控件的简单使用:

    1:引入js/css(这里注意如果你使用的github下载的空间,其css信息在html中)

    <link rel="stylesheet" href="/weeklyCalendar/weeklyCalendar.css">
    <script src="/weeklyCalendar/weeklyCalendar.js"></script>

    2:html:

    <div id="j_weeklyCalendar" class="myWeeklyCanlendar">
        <div class="datetime_header">
            <a href="javascript:;" title="上一周" class="prev_icon" role="prev_week"></a>
            <span><b role="year_selector"></b>年<b role="month_selector"></b>月</span><span style="margin-left: 20px;display: none">第<b role="week_selector"></b>周</span>
            <a href="javascript:;" title="下一周" class="next_icon" role="next_week"></a>
        </div>
        <ul role="weeks_ch" class="weeklyBox"></ul>
        <ul role="weeklyCanlendarView" class="weeklyCanlendarBox"></ul>
    </div>

    3:js:

    weeklyCalendar('#j_weeklyCalendar',{
        //点击日期回调
        clickDate:function(dateTime){
            console.log(dateTime);
        }
    });

    根据如上我们可以实现周历控件:

    image.png

    点击日期后我们可以在控制台看到我们点击的具体日期信息

    image.png

    我们还可以设置默认日期,只需要配置defaultDate参数即可,如:

    weeklyCalendar('#j_weeklyCalendar',{
        defaultDate:'2021-05-20',
        //点击日期回调
        clickDate:function(dateTime){
            console.log(dateTime);
        }
    });

    我们还可以设置禁用日期,只需要配置disabledDate参数即可,如:

    weeklyCalendar('#j_weeklyCalendar',{
        disabledDate:['2020-07-18','2020-07-19','2020-07-20'],
        //点击日期回调
        clickDate:function(dateTime){
            console.log(dateTime);
        }
    });

    如上我们就可以使用weeklyCalendar实现周历控件

0 +1