HTML5 自定义日历控件

ys_datetime_selector.css

.ys-datetime-selector{
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-color:rgba(0,0,0,0.3);
    z-index: 999;
}

.ys-datetime-selector.display-hide{
    transform: translate3d(100%,0,0);
    -webkit-transform: translate3d(100%,0,0);
    visibility: hidden;
}

.ys-datetime-selector .ys-datetime-selector-content{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
}

/* ======================================== ys-datetime-operation-bar ======================================== */
.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-operation-bar{
    height:45px;
    line-height: 44px;
    border-bottom:1px solid #e0e0e0;
    text-align: center;
}

.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-operation-bar span{
    color:#333;
    font-size:16px;
}
.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-operation-bar a{
    position:absolute;
    top:0;
    bottom:0;
    padding:0 15px;
    font-size:16px;
    color:#4e9dcf;
}
.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-operation-bar a.ys-datetime-cancel-btn{left:0;}
.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-operation-bar a.ys-datetime-ok-btn{right:0;}

/* ======================================== ys-datetime-blocks ======================================== */
.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks{
    position:relative;
    height:170px;
    -webkit-mask-box-image: -webkit-linear-gradient(top, rgba(0,0,0,0.2), rgba(0,0,0,0.4) 20%,rgba(0,0,0,0.6) 39%,white 40%, white 60%,rgba(0,0,0,0.6) 41%, rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.2));
    -webkit-mask-box-image: linear-gradient(to top, rgba(0,0,0,0.2), rgba(0,0,0,0.2), rgba(0,0,0,0.4) 20%,rgba(0,0,0,0.6) 39%,white 40%, white 60%,rgba(0,0,0,0.6) 41%, rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.2));
}

.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks:before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    height:1px;
    background-color:#cdcdcd;
    top:68px;
}

.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    height:1px;
    background-color:#cdcdcd;
    bottom:68px;
}

.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks>div{
    width:33.333%;
    float:left;
}

.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks>div.block-hide{
    display:none;
}

.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks>div.width-50{
    width:50%;
}

.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks>div.width-100{
    width:100%;
}

.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks .swiper-container{
    height:170px;
}
.ys-datetime-selector .ys-datetime-selector-content .ys-datetime-blocks .swiper-container .swiper-slide{
    height:34px;
    line-height: 34px;
    text-align: center;
}

/* ================================================== page animation start ================================================== */
.ys-datetime-selector .datetime-selector-animated{
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/* datetime-selector-slide-down-in */
.ys-datetime-selector .datetime-selector-slide-down-in{
    animation-name:datetime-selector-slide-down-in;
    -webkit-animation-name:datetime-selector-slide-down-in;
}

@keyframes datetime-selector-slide-down-in {
    from{
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    to{
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@-webkit-keyframes datetime-selector-slide-down-in {
    from{
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    to{
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

/* datetime-selector-slide-down-out */
.datetime-selector-slide-down-out{
    animation-name:datetime-selector-slide-down-out;
    -webkit-animation-name:datetime-selector-slide-down-out;
}

@keyframes datetime-selector-slide-down-out {
    from{
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    to{
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}
@-webkit-keyframes datetime-selector-slide-down-out {
    from{
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    to{
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

ys_datetime_selector.js

(function($){

    var container = $(".ys-datetime-selector");
    var currentYear = new Date().getFullYear();
    var currentMonth = new Date().getMonth()+1;
    var currentDate = new Date().getDate();
    var currentDayCount = getMaxDateInMonth(currentYear,currentMonth);
    var yearSwiper =null;
    var monthSwiper =null;
    var dateSwiper =null;
    var callback = function(year,month,date){};

    var html =  "<div class=‘ys-datetime-selector display-hide‘>    "+
                "  <div class=‘ys-datetime-selector-content‘>          "+
                "     <div class=‘ys-datetime-operation-bar‘>         "+
                "        <a class=‘ys-datetime-cancel-btn‘>取消</a>"+
                "        <span>选择日期</span>                     "+
                "        <a class=‘ys-datetime-ok-btn‘>确定</a>    "+
                "     </div>                                        "+
                "     <div class=‘ys-datetime-blocks‘>              "+
                "        <div class=‘ys-datetime-year-block‘>      "+
                "           <div class=‘swiper-container‘>        "+
                "              <div class=‘swiper-wrapper‘></div>"+
                "           </div>                                "+
                "        </div>                                    "+
                "        <div class=‘ys-datetime-month-block‘>     "+
                "           <div class=‘swiper-container‘>        "+
                "              <div class=‘swiper-wrapper‘></div>"+
                "           </div>                                "+
                "        </div>                                    "+
                "        <div class=‘ys-datetime-date-block‘>      "+
                "           <div class=‘swiper-container‘>        "+
                "              <div class=‘swiper-wrapper‘></div>"+
                "           </div>                                "+
                "        </div>                                    "+
                "        <div style=‘clear:both;‘></div>           "+
                "     </div>                                        "+
                "  </div>                                            "+
                "</div>                                               ";

    /* ======================================== initialize the page view ======================================== */
    function render(){
        container = $(html).appendTo("body");

        yearSwiper = new Swiper(".ys-datetime-year-block .swiper-container", {
            direction : "vertical",
            freeMode:true,
            freeModeSticky:true,
            slidesPerView: "auto",
            onTransitionEnd:function(swiper){
                var activeIndex = swiper.activeIndex;
                var slidesLen = swiper.slides.length;
                if(activeIndex<20){
                    var firstYear = parseInt($(swiper.slides[0]).attr("data-year"));
                    var prevYears = [];
                    for(var i=firstYear-1;i>=firstYear-100;i--){
                        prevYears.push("<div class=‘swiper-slide‘ data-year=‘"+i+"‘>"+i+"年</div>");
                    }
                    swiper.prependSlide(prevYears);
                }else if(slidesLen-activeIndex<20){
                    var lastYear = parseInt($(swiper.slides[slidesLen-1]).attr("data-year"));
                    var nextYears = [];
                    for(var i=lastYear+1;i<=lastYear+100;i++){
                        nextYears.push("<div class=‘swiper-slide‘ data-year=‘"+i+"‘>"+i+"年</div>");
                    }
                    swiper.appendSlide(nextYears);
                }

                // 计算这个月有多少天
                currentYear = parseInt($(swiper.slides[activeIndex+2]).attr("data-year"));
                updateDateSwiper();

            }
        });
        var yearSlides = [];
        for(var i=currentYear-2;i<=currentYear+102;i++){
            yearSlides.push("<div class=‘swiper-slide‘ data-year=‘"+i+"‘>"+i+"年</div>");
        }
        var prevYears = [];
        for(var i=currentYear-3;i>currentYear-100;i--){
            prevYears.push("<div class=‘swiper-slide‘ data-year=‘"+i+"‘>"+i+"年</div>");
        }
        yearSwiper.appendSlide(yearSlides);
        yearSwiper.prependSlide(prevYears);

        monthSwiper = new Swiper(".ys-datetime-month-block .swiper-container", {
            direction :"vertical",
            freeMode:true,
            freeModeMomentumRatio:0.2,
            loop:true,
            loopAdditionalSlides:24,
            freeModeSticky:true,
            slidesPerView:"auto",
            onTransitionEnd:function(swiper){
                var activeIndex = swiper.activeIndex;
                if(isNaN(activeIndex)){
                    return;
                }
                // 计算这个月有多少天
                currentMonth = parseInt($(swiper.slides[activeIndex+2]).attr("data-month"));
                updateDateSwiper();
            }
        });
        var monthSlides=[];
        for(var i=1;i<=12;i++){
            monthSlides.push("<div class=‘swiper-slide‘ data-month=‘"+i+"‘>"+i+"月</div>");
        }
        monthSwiper.appendSlide(monthSlides);
        monthSwiper.appendSlide(monthSlides);
        monthSwiper.appendSlide(monthSlides);

        dateSwiper = new Swiper(".ys-datetime-date-block .swiper-container", {
            direction :"vertical",
            loop : true,
            freeMode:true,
            freeModeMomentumRatio:0.2,
            freeModeSticky:true,
            slidesPerView:"auto",
            onTransitionEnd:function(swiper){
                var activeIndex = swiper.activeIndex;
                if(isNaN(activeIndex)){
                    return;
                }
                // 计算这个月有多少天
                currentDate = parseInt($(swiper.slides[activeIndex+2]).attr("data-date"));
            }
        });
        var dateSlides=[];
        for(var i=1;i<=currentDayCount;i++){
            dateSlides.push("<div class=‘swiper-slide‘ data-date=‘"+i+"‘>"+i+"日</div>");
        }
        dateSwiper.appendSlide(dateSlides);
    }

    /* ======================================== bind events ======================================== */
    function bindEvents(){
        container.on("click",".ys-datetime-cancel-btn",function(e){
            e.stopPropagation();
            e.preventDefault();
            container.find(".ys-datetime-selector-content").addClass("datetime-selector-slide-down-out");
        });

        container.on("click",".ys-datetime-ok-btn",function(e){
            e.stopPropagation();
            e.preventDefault();

            callback(currentYear,currentMonth,currentDate);
            container.find(".ys-datetime-selector-content").addClass("datetime-selector-slide-down-out");
        });

        container.find(".ys-datetime-selector-content").on("animationend webkitAnimationEnd",function(){
            if($(this).hasClass("datetime-selector-slide-down-out")){
                container.addClass("display-hide");
            }
            $(this).removeClass("datetime-selector-slide-down-in").removeClass("datetime-selector-slide-down-out");
        });
    }

    var initialized = false;
    function init(){
        if(initialized){
            return;
        }
        initialized = true;
        render();
        bindEvents();
    }

    /* ======================================== common methods ======================================== */
    function getMaxDateInMonth(year,month){
        var date = new Date();
        date.setFullYear(year);
        date.setMonth(month);
        date.setDate(0);
        return date.getDate();
    }

    function updateDateSwiper(){
        var nextDayCount = getMaxDateInMonth(currentYear,currentMonth);
        if(currentDayCount>nextDayCount){
            for(var i=currentDayCount-1;i>=nextDayCount;i--){
                dateSwiper.removeSlide(i);
            }

        }else if(currentDayCount<nextDayCount){
            for(var i=currentDayCount+1;i<=nextDayCount;i++){
                dateSwiper.appendSlide("<div class=‘swiper-slide‘ data-date=‘"+i+"‘>"+i+"日</div>");
            }
        }
        currentDayCount = nextDayCount;

        currentDate = parseInt($(dateSwiper.slides[dateSwiper.activeIndex+2]).attr("data-date"));

    }

    function showDateTime(options){
        options = options||{};
        var year = options.year;
        var month = options.month;
        var date = options.date;

        var type = options.type||"year-month-date";
        if(type=="year-month-date"){
            container.find(".ys-datetime-year-block").removeClass("block-hide").removeClass("width-50").removeClass("width-100");
            container.find(".ys-datetime-month-block").removeClass("block-hide").removeClass("width-50").removeClass("width-100");
            container.find(".ys-datetime-date-block").removeClass("block-hide").removeClass("width-50").removeClass("width-100");
        }else if(type=="year-month"){
            container.find(".ys-datetime-date-block").addClass("block-hide");
            container.find(".ys-datetime-year-block").addClass("width-50").removeClass("width-100").removeClass("block-hide");
            container.find(".ys-datetime-month-block").addClass("width-50").removeClass("width-100").removeClass("block-hide");
        }else if(type=="year"){
            container.find(".ys-datetime-date-block").addClass("block-hide");
            container.find(".ys-datetime-month-block").addClass("block-hide");
            container.find(".ys-datetime-year-block").addClass("width-100");
        }

        callback = options.callback||callback;
        currentYear = year||currentYear;
        currentMonth = month||currentMonth;
        currentDate = date||currentDate;

        var yearSlidesLength = yearSwiper.slides.length;
        var minYear = parseInt($(yearSwiper.slides[2]).attr("data-year"));
        var maxYear = parseInt($(yearSwiper.slides[yearSlidesLength-3]).attr("data-year"));
        if(currentYear<minYear){
            var prevYears = [];
            for(var i=minYear-3;i>currentYear-20;i--){
                prevYears.push("<div class=‘swiper-slide‘ data-year=‘"+i+"‘>"+i+"年</div>");
            }
            yearSwiper.prependSlide(prevYears);
            yearSwiper.slideTo(17);
        }else if(currentYear>maxYear){
            var nextSlides = [];
            for(var i=maxYear+2;i<=currentYear+20;i++){
                nextSlides.push("<div class=‘swiper-slide‘ data-year=‘"+i+"‘>"+i+"年</div>");
            }
            yearSwiper.appendSlide(nextSlides);
            yearSwiper.slideTo(currentYear-minYear+1);
        }else{
            yearSwiper.slideTo(currentYear-minYear);
        }

        monthSwiper.slideTo(currentMonth-3);
        dateSwiper.slideTo(currentDate-3);

        container.removeClass("display-hide");
        container.find(".ys-datetime-selector-content").addClass("datetime-selector-animated").addClass("datetime-selector-slide-down-in");
    }

    var DateTimeWidget = {
        show:function(options){
            init();
            showDateTime(options);
        }
    };

    window.DateTimeWidget = DateTimeWidget;
})(jQuery);

datetime.html

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <!-- 导入CSS -->
    <link href="dist/css/swiper.min.css" rel="stylesheet">
    <link href="css/common/ys_datetime_selector.css" rel="stylesheet">

    <!-- 导入JS -->
    <script src="dist/js/jquery-1.11.3.min.js"></script>
    <script src="dist/js/swiper.jquery.min.js"></script>

</head>
<body>

    <script src="js/common/ys_datetime_selector.js"></script>
    <script>
        DateTimeWidget.show({
            year:2018,
            month:12,
            date:31,
//            type:"year",
            callback:function(year,month,date){
                console.log(year+"年"+month+"月"+date+"日");
            }
        });
    </script>
</body>
</html>

时间： 2024-10-12 08:11:10

HTML5 自定义日历控件的相关文章

javascript实例学习之六—自定义日历控件

基于之前上篇博客轻量级jquery,tool.js和base.js.自定义开发的base_datePicker插件,效果类似于jquery_ui的datePicker插件 //基于Base.js以及tool.js做的日历插件 $().extend('datePicker', function() { //生成日历插件 var $yearSpan; var $monthSpan; var tds; var $prevBtn; var $nextBtn; var $lastTr; var $date

自定义日历控件-CalendarView

转载请注明出处: http://blog.csdn.net/forwardyzk/article/details/43056675 我们在开发中会遇到使用到日历控件,下面就介绍一个自定义日历控件. 思路: 1.自定义类CalendarView继承LinearLayout,使用布局文件,显示布局. 2.使用ViewFlipper,里面添加GridView,当月的日期. 3.使用手势GestureDetector,控制ViewFlipper的滑动. calen_calendar.xml <span

安卓自定义日历控件

尊重作者劳动成果,转载请注明出处:http://blog.csdn.net/baiyuliang2013/article/details/37732149 最近,因工作需要,需要实现自定义日历控件功能,主要应用于软件中的酒店入住时间选择功能,进入日历后,可选择入住时间,及离开时间,选择完成后,再次进入日历时,会显示上次选中的结果,默认选择日期是在距当前日期三个月内,三个月以外的均以灰色显示,且不可点击.本篇实现的效果是高仿某软件的界面效果: 某软件界面效果: 本篇实现的效果: 另外,对于日期选择

IOS自定义日历控件的简单实现(附思想及过程)

因为程序要求要插入一个日历控件,该空间的要求是从当天开始及以后的六个月内的日历,上网查资料基本上都说只要获取两个条件(当月第一天周几和本月一共有多少天)就可以实现一个简单的日历,剩下的靠自己的简单逻辑就OK了,下面开始自己从开始到完成的整个过程 1,首先做NSDate类目,扩展一些方法让日期之间转换更加方便 #import <Foundation/Foundation.h> @interface NSDate (LYWCalendar) #pragma mark - 获取日 - (NSInte

【无私分享】干货！！！一个炫酷的自定义日历控件，摆脱日历时间选择烦恼，纯福利~

最近公司项目中有一个按日期查看信息的功能,楼主本想用之前用的wheelView将就使用的,不过产品经理有个新要求,就是点击按钮弹出的日期选择对话框必须显示农历节假日,周几什么的.这可就难为人了,倘若使用之前的滚动时间选择器,无疑是难以实现的,楼主辗转反侧,冥思苦想,却不得正果. 好吧,去网上下了几个OA系统一用就有了idea,突然想到手机自带的日历~~,oh,year,日历就有这功能,瞧瞧,我靠,这个东西,咋做. 仔细一瞧,似乎用GridView可以实现,额,二话不说就开干.折腾了半天都没弄好,

android 自定义日历控件

日历控件View: [java] view plaincopyprint? /** * 日历控件功能:获得点选的日期区间 * */ public class CalendarView extends View implements View.OnTouchListener { private final static String TAG = "anCalendar"; private Date selectedStartDate; private Date selectedEndD

Android自定义组件之日历控件-精美日历实现（内容、样式可扩展）

需求我们知道,Android系统本身有自带的日历控件,网络上也有很多开源的日历控件资源,但是这些日历控件往往样式较单一,API较多,不易于在实际项目中扩展并实现出符合具体样式风格的,内容可定制的效果.本文通过自定义日历控件,实现了在内容和样式上可高度扩展的精美日历demo,有需要的Android应用开发人员可迅速移植并按需扩展实现. 在某个应用中,需要查询用户的历史考勤记录,根据实际考勤数据在日历中标记出不同的状态(如正常出勤.请假.迟到等),并在页面中显示相应的说明文字. 效果实现的效果如

开源日历控件DatePicker源码解析

在一些项目开发中,会使用日历去标识事务,所以根据美工出的效果图,我们可以采用不同的方法去实现.比如通过GridView扣扣你敢.自定义View实现日历控件,这些都是我们解决问题的手段,我也实现过一个自定义日历控件(Android自定义控件之日历控件55993)),由于我只是粗糙的进行实现,并没有进行过多的在控件的可扩展性上进行打磨设计,所以在本篇文章中,我秉着学习的态度分析下爱哥的鼎力巨作DatePicker-DatePicker. DatePicker开源项目地址:[https://githu

Jquery自定义扩展方法（二）--HTML日历控件

一.概述研究了上节的Jquery自定义扩展方法,自己一直想做用jquery写一个小的插件,工作中也用到了用JQuery的日历插件,自己琢磨着去造个轮子--HTML5手机网页日历控件,废话不多说,先看看效果图吧效果图很简单,代码封装在JQuery中,网页端只需要要调用即可: 二.Jquery自定义实体对象 Jquery可以自定义函数function,有没有可以定义实体对象,里面封装方法那?查询了一下资料发现,是可以的,不仅能够封装属性,还可以写自己的方法,调用模板代码如下: $.Calende