<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script>
$(function(){
$("#demo").dateDropper();
})
</script>
</head>
<body>
<h1>dateDropper Demosu!</h1>
<input type="text" id="demo">
</body>
</html>
//////////////////////////////////////
// DATEDROPPER Version 1 //
// Last Updates: 15/02/2015 //
// //
// Made with love by //
// Felice Gattuso //
//////////////////////////////////////
$.fn.dateDropper=function(e){if(this.is("input")&&"text"==this.attr("type")){var i=(new Date).getFullYear(),a=(new Date).getDate(),s=(new Date).getMonth(),t=$.extend({animate_current:!0,animation:"fadein",color:"#f87a54",format:"m/d/Y",lang:"en",lock:!1,maxYear:i,minYear:1970,placeholder:"Select date",years_multiple:!1},e),r=this,_=$(".dd_wrap").length+1,o=function(d){return!(d%4||!(d%100)&&d%400)},f=100,u=/^#[0-9A-F]{6}$/i.test(t.color),c=function(d){return d.toString().substr(0,3)+t.years_multiple},v=0;u||(t.color="#f87a54"),t.maxYear<i&&(i=t.maxYear),$('<div class="dd_wrap" id="dd_'+_+'"><div class="dd_overlay"></div><div class="dd_"></div></div>').appendTo("body");var m=$("#dd_"+_),p=m.find(".dd_");dd_overlay=m.find(".dd_overlay"),$(window).on("resize",function(){p.css({top:r.offset().top+(r.height()+12),left:r.offset().left+(r.width()/2-f/2)-2})}),$("<style>#dd_"+_+" .dd_ .dd_submit,#dd_"+_+" .dd_ .dd_r_ ul li { background-color: "+t.color+"; } #dd_"+_+" .dd_ .dd_d_ .dd_sl_ ul li em , #dd_"+_+" .dd_ .dd_d_ .dd_sl_ ul li.dd_sunday{ color: "+t.color+"; }</style>").appendTo("head"),r.attr({readonly:"readonly"}).addClass("dd_locked").val(t.placeholder),p.append('<div class="dd_sw_ dd_m_"><a class="dd_nav_ dd_prev_"></a><a class="dd_nav_ dd_next_"></a><div class="dd_sl_"></div></div>'),p.append('<div class="dd_sw_ dd_d_"><a class="dd_nav_ dd_prev_"></a><a class="dd_nav_ dd_next_"></a><div class="dd_sl_"></div></div>'),p.append('<div class="dd_sw_ dd_y_"><a class="dd_nav_ dd_prev_"></a><a class="dd_nav_ dd_next_"></a><div class="dd_sl_"></div></div>'),t.years_multiple&&p.append('<div class="dd_r_"></div>'),p.append('<div class="dd_submit"></div>');var b=p.find(".dd_m_"),h=p.find(".dd_d_"),C=(p.find(".dd_y_w"),p.find(".dd_y_")),y=p.find(".dd_r_"),g=p.find(".dd_submit");switch(t.lang){case"it":var w=["Gennaio","Febbraio","Marzo","Aprile","Maggio","Giugno","Luglio","Agosto","Settembre","Ottobre","Novembre","Dicembre"],k=["Domenica","Lunedì","Martedì","Mercoledì","Giovedì","Venerdì","Sabato"];break;case"es":var w=["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],k=["Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Samedi"];break;case"de":var w=["Januar","Februar","Marz","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"],k=["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"];break;case"fr":var w=["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"],k=["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"];break;default:var w=["January","February","March","April","May","June","July","August","September","October","November","December"],k=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]}b.find(".dd_sl_").append("<ul></ul>");for(var L=1;12>=L;L++)months=w[L-1].substr(0,3),b.find("ul").append('<li value="'+L+'">'+months+"</li>");h.find(".dd_sl_").append("<ul></ul>");for(var S=1;31>=S;S++)ddd=10>S?"0"+S:S,h.find("ul").append('<li value="'+S+'">'+ddd+"<em ></em></li>");C.find(".dd_sl_").append("<ul></ul>");for(var J=t.minYear;J<=t.maxYear;J++)bissextile_return=o(J),C.find("ul").append('<li value="'+J+'" data-filter="'+bissextile_return+'">'+J+"</li>");if(t.years_multiple){y.append("<ul></ul>");for(var Y=t.minYear;Y<=t.maxYear;Y++){var A=Y%t.years_multiple;0==A&&y.find("ul").append('<li value="'+Y+'"></li>')}var T=f/y.find("li").length;y.find("li").css({width:T+"%"}),y.find("li[value="+c(i)+"]").addClass("dd_sltd_")}var z=function(){h.find("li").eq(a-1).addClass("dd_sltd_"),b.find("li").eq(s).addClass("dd_sltd_"),C.find("li[value="+i+"]").addClass("dd_sltd_"),t.years_multiple&&y.find("li[value="+c(i)+"]").addClass("dd_sltd_")},N=function(){b.find(".dd_sl_").animate({scrollLeft:s*f},1200,"swing"),setTimeout(function(){h.find(".dd_sl_").animate({scrollLeft:(a-1)*f},1200,"swing"),setTimeout(function(){C.find(".dd_sl_").animate({scrollLeft:C.find(".dd_sl_ li[value="+i+"]").index()*f},1200,"swing")},200)},400)},O=function(){b.find(".dd_sl_").scrollLeft(s*f),h.find(".dd_sl_").scrollLeft((a-1)*f),C.find(".dd_sl_").scrollLeft(C.find(".dd_sl_ li[value="+i+"]").index()*f)},q=function(){b.find(".dd_sl_").scrollLeft(b.find("li.dd_sltd_").index()*f),h.find(".dd_sl_").scrollLeft(h.find("li.dd_sltd_").index()*f),C.find(".dd_sl_").scrollLeft(C.find("li.dd_sltd_").index()*f)};switch(z(),t.format){case"Y":b.hide(),h.hide();break;case"m":C.hide(),y.hide(),h.hide()}var G=function(){var e=h.find("li.dd_sltd_").attr("value"),l=b.find("li.dd_sltd_").attr("value"),i=C.find("li.dd_sltd_").attr("value"),a=y.find("li.dd_sltd_"),s=C.find("li.dd_sltd_").attr("data-filter");"true"==s&&"2"==l?(h.find("ul").width(29*f),(30==e||31==e)&&(h.find("li").removeClass("dd_sltd_"),h.find("li[value=29]").addClass("dd_sltd_"))):"true"!=s&&"2"==l?(h.find("ul").width(28*f),(29==e||30==e||31==e)&&(h.find("li").removeClass("dd_sltd_"),h.find("li[value=28]").addClass("dd_sltd_"))):"11"==l||"4"==l||"6"==l||"9"==l?(h.find("ul").width(30*f),31==e&&(h.find("li").removeClass("dd_sltd_"),h.find("li[value=30]").addClass("dd_sltd_"))):h.find("ul").width(31*f),h.find("li").each(function(){tod=$(this).attr("value"),d=new Date(l+"/"+tod+"/"+i),x=d.getDay(),0==x?$(this).addClass("dd_sunday"):$(this).removeClass("dd_sunday"),$(this).find("em").html(k[x])}),t.years_multiple&&(next=a.next("li"),prev=a.prev("li"),i>=next.attr("value")?(v=next.attr("value"),y.find("li").removeClass("dd_sltd_"),next.addClass("dd_sltd_")):v>i&&(v=prev.attr("value"),y.find("li").removeClass("dd_sltd_"),prev.addClass("dd_sltd_")))},V=function(d){r.val(d),p.addClass("dd_fadeout").removeClass("dd_"+t.animation),setTimeout(function(){p.hide().removeClass("dd_fadeout"),m.hide()},300)},E=function(){p.addClass("dd_alert").removeClass("dd_"+t.animation),setTimeout(function(){p.removeClass("dd_alert")},500)};t.years_multiple&&y.find("li").on("click",function(){y.find("li").removeClass("dd_sltd_"),$(this).addClass("dd_sltd_");var d=$(this).attr("value");v=d,C.find(".dd_sl_").stop().animate({scrollLeft:C.find("li[value="+d+"]").index()*f},1200,"swing"),C.find("li").removeClass("dd_sltd_"),C.find("li[value="+d+"]").addClass("dd_sltd_"),G()}),p.find(".dd_sw_").each(function(){var d=$(this).find(".dd_sl_"),e=$(this).find(".dd_nav_"),l=d.find("li.dd_sltd_").index()*f,i=function(){scroll_left=d.scrollLeft(),scroll_left>=l+f/2&&(l+=f),scroll_left<=l-f/2&&(l-=f)};$(this).hover(function(){e.show()},function(){e.hide()}),d.find("ul").width(d.find("li").length*f),d.on("scroll mousemove",function(){i()}),e.click(function(){obj=$(this).hasClass("dd_next_")?d.find("li.dd_sltd_").next("li"):d.find("li.dd_sltd_").prev("li"),obj.length&&(d.stop().animate({scrollLeft:obj.index()*f},200),d.find("li").removeClass("dd_sltd_"),obj.addClass("dd_sltd_"),G())}),d.on("touchend",function(){d.stop().animate({scrollLeft:l},200);var e=l/f;d.find("li").removeClass("dd_sltd_"),d.find("li").eq(e).addClass("dd_sltd_"),G()}),d.find("li").click(function(){d.animate({scrollLeft:$(this).index()*f},200),d.find("li").removeClass("dd_sltd_"),$(this).addClass("dd_sltd_")})}),G(),r.click(function(){m.show(),p.css({top:r.offset().top+(r.height()+12),left:r.offset().left+(r.width()/2-f/2)-2}).show().addClass("dd_"+t.animation),r.hasClass("dd_locked")?(r.removeClass("dd_locked"),0!=t.animate_current?N():O()):q()}),dd_overlay.click(function(){p.addClass("dd_fadeout").removeClass("dd_"+t.animation),setTimeout(function(){p.hide().removeClass("dd_fadeout"),m.hide()},300)}),g.click(function(){var d=h.find("li.dd_sltd_").attr("value"),e=b.find("li.dd_sltd_").attr("value"),r=C.find("li.dd_sltd_").attr("value");if(10>d&&(d="0"+d),10>e&&(e="0"+e),x=new Date(e+"/"+d+"/"+r),x=x.getDay(),j=d.substr(1),D=k[x].substr(0,3),l=k[x],n=e.substr(1),M=w[n-1].substr(0,3),F=w[n-1],str=t.format.replace(/\b(Y)\b/i,r).replace(/\b(m)\b/i,e).replace(/\b(d)\b/i,d).replace(/\b(D)\b/i,D).replace(/\b(j)\b/i,j).replace(/\b(l)\b/i,l).replace(/\b(F)\b/i,F).replace(/\b(M)\b/i,M).replace(/\b(n)\b/i,n),t.lock){d1d=a,d1d<10&&(d1d="0"+d1d),d1m=s+1,d1m<10&&(d1m="0"+d1m),d1y=i;var _=Date.parse(d1y+"-"+d1m+"-"+d1d)/1e3,o=Date.parse(r+"-"+e+"-"+d)/1e3;"from"==t.lock?_>o?E():V(str):o>_?E():V(str)}else V(str)})}};
.dd_wrap a,.dd_wrap img,.dd_wrap ul,.dd_wrap li,.dd_wrap div {
margin:0;
padding:0;
list-style:none;
-webkit-box-sizing: initial !important;
-moz-box-sizing: initial !important;
box-sizing: initial !important;
}
/* wrap */
.dd_wrap {
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
outline: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
display:none;
z-index:99;
}
.dd_overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index:1;
}
/* window */
.dd_ {
border: 2px solid #020202;
background: #FFF;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
position: absolute;
width: 100px;
display: none;
z-index: 10;
box-shadow: 0 0px 0px 6px rgba(0,0,0,0.05);
-webkit-box-shadow: 0 0px 0px 6px rgba(0,0,0,0.05);
-moz-box-shadow: 0 0px 0px 6px rgba(0,0,0,0.05);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.dd_:after {
content: "";
width: 10px;
height: 10px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-sand-transform: rotate(45deg);
background: #FFF;
top: -7px;
left: 50%;
margin-left: -4px;
position: absolute;
border-top: 2px solid #020202;
border-left: 2px solid #020202;
border-radius: 1px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
}
/* swiper */
.dd_ .dd_sw_ {
width:100px;
overflow:hidden;
position:relative;
}
.dd_ .dd_sw_ .dd_sl_ {
overflow-x:scroll;
overflow-y:hidden;
}
.dd_ .dd_sw_ .dd_sl_ ul {
padding:0;
margin:0;
list-style:none;
color:inherit;
font-size:inherit;
font-family: sans-serif;
}
.dd_ .dd_sw_ .dd_sl_ li {
width:100px;
float:left;
text-align:center;
font-weight:bold;
cursor:pointer;
}
.dd_ li.dd_sltd_{
position:relative;
}
/* nativagion buttons */
.dd_ .dd_sw_ .dd_nav_ {
position:absolute;
width:20px;
height:100%;
color:#ccc;
font-size:12px;
text-align:center;
z-index:11;
top:0;
cursor:pointer;
display:none;
background-size:12px 12px !important;
}
.dd_ .dd_sw_ .dd_nav_.dd_prev_ {
left:0;
background:url(http://felicegattuso.com/projects/datedropper/js/datedropper/icons/prev.png) center no-repeat;
}
.dd_ .dd_sw_ .dd_nav_.dd_next_ {
right:0;
background:url(http://felicegattuso.com/projects/datedropper/js/datedropper/icons/next.png) center no-repeat;
}
/* month */
.dd_ .dd_m_ {
font-size:24px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.dd_ .dd_m_,.dd_ .dd_m_ .dd_sl_ ul,.dd_ .dd_m_ .dd_sl_ ul li {
height:30px;
}
.dd_ .dd_m_ .dd_sl_ ul li {
line-height:30px;
}
/* day */
.dd_ .dd_d_ {
font-size:44px;
border-bottom: 1px solid #e8e8e8;
border-top: 1px solid #e8e8e8
}
.dd_ .dd_d_,.dd_ .dd_d_ .dd_sl_ ul,.dd_ .dd_d_ .dd_sl_ ul li {
height:60px;
}
.dd_ .dd_d_ .dd_sl_ ul li {
line-height:48px; position:relative;
}
.dd_ .dd_d_ .dd_sl_ ul li em {
position:absolute;
bottom:2px;
left:10px;
right:10px;
text-align:center;
font-style:normal;
font-size:14px;
line-height:normal;
color:#a5cedb;
}
/* year */
.dd_ .dd_y_ {
font-size:18px;
position:relative;
}
.dd_ .dd_y_,.dd_ .dd_y_ .dd_sl_ ul,.dd_ .dd_y_ .dd_sl_ ul li {
height:30px;
}
.dd_ .dd_y_ .dd_sl_ ul li {
line-height:30px;
}
/* range */
.dd_ .dd_r_ {
height:8px;
overflow:hidden;
padding:0 2px;
}
.dd_ .dd_r_ ul {
list-style:none;
margin:0;
padding:0;
}
.dd_ .dd_r_ ul li {
float:left;
background: #020202;
position:relative;
cursor:pointer;
box-shadow: inset 0 0 0 2px #FFF;
height:8px;
}
.dd_ .dd_r_ ul li.dd_sltd_ {
background:#020202!important;
}
.dd_ .dd_d_ .dd_sl_{
height:80px;
}
.dd_ .dd_y_ .dd_sl_,.dd_ .dd_m_ .dd_sl_{
height:50px;
}
/* sybmit */
.dd_ .dd_submit {
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
margin:2px;
color:#fff;
text-align:center; padding:6px 0;
cursor:pointer;
height:20px;
background-image:url(http://felicegattuso.com/projects/datedropper/js/datedropper/icons/done.png);
background-position: center;
background-repeat:no-repeat;
background-size:16px 16px;
}
/* effects */
@-webkit-keyframes dd_bounce {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
20% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
30% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
60% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
70% {
-webkit-transform: scale3d(.95, 1.05, 1);
transform: scale3d(.95, 1.05, 1);
}
80% {
-webkit-transform: scale3d(1.05, .95, 1);
transform: scale3d(1.05, .95, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes dd_bounce {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
20% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
30% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
60% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
70% {
-webkit-transform: scale3d(.95, 1.05, 1);
transform: scale3d(.95, 1.05, 1);
}
80% {
-webkit-transform: scale3d(1.05, .95, 1);
transform: scale3d(1.05, .95, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.dd_.dd_bounce {
-webkit-animation-name: dd_bounce;
animation-name: dd_bounce;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
@-webkit-keyframes dd_fadein {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes dd_fadein {
0% {opacity: 0;}
100% {opacity: 1;}
}
.dd_.dd_fadein {
-webkit-animation-name: dd_fadein;
animation-name: dd_fadein;
-webkit-animation-duration: .3s;
animation-duration: .3s;
}
@-webkit-keyframes dd_fadeout {
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes dd_fadeout {
0% {opacity: 1;}
100% {opacity: 0;}
}
.dd_.dd_fadeout {
-webkit-animation-name: dd_fadeout;
animation-name: dd_fadeout;
-webkit-animation-duration: .3s;
animation-duration: .3s;
}
@-webkit-keyframes dd_dropdown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -30%, 0);
transform: translate3d(0, -30%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes dd_dropdown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -30%, 0);
transform: translate3d(0, -30%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.dd_.dd_dropdown {
-webkit-animation-name: dd_dropdown;
animation-name: dd_dropdown;
-webkit-animation-duration: .5s;
animation-duration: .5s;
}
@-webkit-keyframes dd_alert {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
@keyframes dd_alert {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
25% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
50% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
}
.dd_alert {
-webkit-animation-name: dd_alert;
animation-name: dd_alert;
-webkit-animation-duration: .5s;
animation-duration: .5s;
}