一款jQuery-UI夏日风情的日期选择器控件

jQuery Datepicker summer vibe

jquery, widget, calendar

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2880
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

*,
*:before,
*:after {
    box-sizing: border-box;
}
html {
    font-size: 18px;
}
body {
    font-family: "Roboto", sans-serif;
    font-size: 1em;
    line-height: 1.6;
}
.datepicker {
    width: 400px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.2);
    margin: 50px auto;
    overflow: hidden;
}
.datepicker .datepicker-header {
    height: 250px;
    background-image: url("https://d13yacurqjgara.cloudfront.net/users/247458/screenshots/2135645/minimalistic_low_poly_style_summer_wallpaper_vector_illustration._small_island_in_the_middle_of_the_ocean_reflecting_in_the_water._tiny_boat_approaching_the_land_on_the_moonlight._flat_design.jpg");
    background-size: 100%;
}
.datepicker .ui-datepicker-inline {
    padding: 30px;
}
.datepicker .ui-datepicker-header {
    text-align: center;
    padding-bottom: 1em;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.datepicker .ui-datepicker-header .ui-datepicker-prev,
.datepicker .ui-datepicker-header .ui-datepicker-next {
    display: inline;
    float: left;
    cursor: pointer;
    font-size: 1.4em;
    padding: 0 10px;
    margin-top: -10px;
    color: #CCC;
}
.datepicker .ui-datepicker-header .ui-datepicker-next {
    float: right;
}
.datepicker .ui-datepicker-calendar {
    width: 100%;
    text-align: center;
}
.datepicker .ui-datepicker-calendar thead {
    color: #CCC;
}
.datepicker .ui-datepicker-calendar tr th,
.datepicker .ui-datepicker-calendar tr td {
    padding-bottom: .5em;
}
.datepicker .ui-datepicker-calendar a {
    color: #444;
    text-decoration: none;
    display: block;
    margin: 0 auto;
    width: 35px;
    height: 35px;
    line-height: 35px;
    border-radius: 50%;
    border: 1px solid transparent;
    cursor: pointer;
}
.datepicker .ui-datepicker-calendar .ui-state-highlight {
    border-color: #D24D57;
    color: #D24D57;
}

HTML

jQuery Datepicker summer vibe

jquery, widget, calendar

编辑器支持Emmet

快捷键

jQuery Datepicker summer vibe

jquery, widget, calendar

基于jQuery-UI实现的全屏自适应日期选择控件

jQuery UI 响应式的温度计风格的滑块控件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：