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>
原文地址：http://antlove.blog.51cto.com/10057557/1865958
