作者：海拥

在线预览：​​haiyong.site/demo/rili/​​

今天我们实现的是 jQuery 的简单 UI 样式

使用 HTML+CSS+JS 制作的夏日风格日历_jquery


实现步骤，首先我们需要创建一个存放日历的​​div​​，在HTML中放入如下代码：

<div class='datepicker'>
    <div class="datepicker-header"></div>
</div>

然后我们引入一些需要的JS：

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="///ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
  $(".datepicker").datepicker({
    prevText: '<i class="fa fa-fw fa-angle-left"></i>',
    nextText: '<i class="fa fa-fw fa-angle-right"></i>'
  });
});

上面我们放入了两个图标，是用来选择上月或者下个月的日历。

现在我们显示出的效果是这样：

使用 HTML+CSS+JS 制作的夏日风格日历_ajax_02

加入一些基本的CSS样式后效果如下：

*, *:before, *:after {
  box-sizing: border-box;
}

html {
  font-size: 18px;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 1em;
  line-height: 1.6;
}

使用 HTML+CSS+JS 制作的夏日风格日历_JavaScript_03

.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: 245px;
  background-image: url("https://haiyong.site/img/demo/summer.jpg");
  background-position: center center;
  background-size: 100%;
}

加上一张头图，并给它一个宽高，样式稍作调整，显示效果如下：

使用 HTML+CSS+JS 制作的夏日风格日历_jquery_04

调整了一下图片跟日历的排版：

.datepicker .ui-datepicker-inline {
  padding: 30px;
}
.datepicker .ui-datepicker-header {
  text-align: center;
  padding-bottom: 1em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

使用 HTML+CSS+JS 制作的夏日风格日历_前端_05

然后设置一下标题，日期改为灰色，首行的样式也换一下

.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: 0.5em;
}

使用 HTML+CSS+JS 制作的夏日风格日历_jquery_06

.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;
}

a 链接的样式改一下，然后将今天的日期标红圈出来

.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+CSS+JS 制作的夏日风格日历_JavaScript_07

到这里就大功告成了，小伙伴们也可以去试试，代码已经提交至马上掘金了，地址：