jquery
【原创】移动端仿iOS日期时间选择控件
作者: whooyun发表于: 2017-03-24 10:38
HTML结构
<input id="datetime">CSS文件
.gearDate{font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 10px; background-color: rgba(0, 0, 0, 0.2); display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9900; overflow: hidden; -webkit-animation-fill-mode: both; animation-fill-mode: both}
.date_ctrl{vertical-align: middle; background-color: #fff; color: #000; margin: 0; height: auto; width: 100%; position: absolute; left: 0; bottom: 0; z-index: 9901; overflow: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0)}
.slideInUp{-webkit-animation: slideInUp .3s; animation: slideInUp .3s;}
@-webkit-keyframes slideInUp{from{-webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0)} to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0)}}
@keyframes slideInUp{from{-webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0)} to{-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0)}}
.ym_roll,
.date_roll,
.datetime_roll,
.time_roll{display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: auto; overflow: hidden; background-color: transparent; -webkit-mask: -webkit-gradient(linear, 0% 50%, 0% 100%, from(#debb47), to(rgba(36, 142, 36, 0))); -webkit-mask: -webkit-linear-gradient(top, #debb47 50%, rgba(36, 142, 36, 0))}
.ym_roll>div,
.date_roll>div,
.datetime_roll>div,
.time_roll>div{font-size: 2.3em; height: 10em; float: left; background-color: transparent; position: relative; overflow: hidden; -webkit-box-flex: 4; -webkit-flex: 4; -ms-flex: 4; flex: 4}
.ym_roll>div .gear,
.date_roll>div .gear,
.datetime_roll>div .gear,
.time_roll>div .gear{width: 100%; float: left; position: absolute; z-index: 9902; margin-top: -4em}
.date_roll_mask{-webkit-mask: -webkit-gradient(linear, 0% 40%, 0% 0%, from(#debb47), to(rgba(36, 142, 36, 0))); -webkit-mask: -webkit-linear-gradient(bottom, #debb47 50%, rgba(36, 142, 36, 0)); padding: 0}
.date_roll>div:nth-child(2){-webkit-box-flex: 2; -webkit-flex: 2; -ms-flex: 2; flex: 2}
.date_roll>div:nth-child(1),
.datetime_roll>div:nth-child(1){-webkit-box-flex: 4; -webkit-flex: 4; -ms-flex: 4; flex: 4}
.datetime_roll>div:first-child{-webkit-box-flex: 6; -webkit-flex: 6; -ms-flex: 6; flex: 6}
.datetime_roll>div:last-child{-webkit-box-flex: 6; -webkit-flex: 6; -ms-flex: 6; flex: 6}
.date_grid{position: relative; top: 4em; width: 100%; height: 2em; margin: 0; box-sizing: border-box; z-index: 0; border-top: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7}
.date_grid>div{color: #000; position: absolute; right: 0; top: 0; font-size: .8em; line-height: 2.5em}
.date_roll>div:nth-child(3) .date_grid>div{left: 42%}
.datetime_roll>div .date_grid>div{right: 0}
.datetime_roll>div:first-child .date_grid>div{left: auto; right: 0%}
.datetime_roll>div:last-child .date_grid>div{left: 50%}
.time_roll>div:nth-child(1) .date_grid>div{right: 1em}
.ym_roll>div:nth-child(1) .date_grid>div{right: .1em}
.ym_roll>div .date_grid>div,
.time_roll>div .date_grid>div{right: 5em}
.date_btn{color: #0575f2; font-size: 1.6em; line-height: 1em; text-align: center; padding: .8em 1em}
.date_btn_box:before,
.date_btn_box:after{content: ''; position: absolute; height: 1px; width: 100%; display: block; background-color: #96979b; z-index: 15; -webkit-transform: scaleY(0.33); transform: scaleY(0.33)}
.date_btn_box{display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; background-color: #f1f2f4; position: relative}
.date_btn_box:before{left: 0; top: 0; -webkit-transform-origin: 50% 20%; transform-origin: 50% 20%}
.date_btn_box:after{left: 0; bottom: 0; -webkit-transform-origin: 50% 70%; transform-origin: 50% 70%}
.date_roll>div:nth-child(1) .gear{text-indent: 20%}
.date_roll>div:nth-child(2) .gear{text-indent: -20%}
.date_roll>div:nth-child(3) .gear{text-indent: -55%}
.datetime_roll>div .gear{width: 100%; text-indent: -25%}
.datetime_roll>div:first-child .gear{text-indent: -10%}
.datetime_roll>div:last-child .gear{text-indent: -50%}
.ym_roll>div .gear,
.time_roll>div .gear{width: 100%; text-indent: -70%}
.ym_roll>div:nth-child(1) .gear,
.time_roll>div:nth-child(1) .gear{width: 100%; text-indent: 10%}
.tooth{height: 2em; line-height: 2em; text-align: center}
JS文件
<script src="datePicker.js"></script>
var calendar = new datetime(); calendar.init({ 'trigger': '#datetime', /*按钮选择器，用于触发弹出插件*/ 'type': 'date', /*模式：date日期；datetime日期时间；time时间；ym年月；*/ 'minDate': '1900-1-1', /*最小日期*/ 'maxDate': '2100-12-31', /*最大日期*/ });