Jquery UI Calendar // 按月更改背景图像

【问题标题】：Jquery UI Calendar // Change Background Image by monthJquery UI Calendar // 按月更改背景图像
【发布时间】：2016-04-07 14:09:22
【问题描述】：

我正在使用 jQuery UI 日期选择器，我正在尝试根据所选月份进行背景更改。

我在 12 个月内创建了 12 个课程。所选月份已具有背景。 我使用了“onChangeMonthYear: function(year, month, inst) { ... }”并没有从那里得到很好的结果。

有什么建议或建议吗？

$(document).ready(function(){
  
  $('#calendar').datepicker({
    inline: true,
    firstDay: 7,
    showOtherMonths: true,
    dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    });
 
  var month = $('.ui-datepicker-month').text().toLowerCase();
  $('.calendar_img').addClass(month);
})
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
}
.page .page_content {
  display: table-cell;
  vertical-align: middle;
  padding: 80px 0;
}

.calendar_container {
  display: flex;
  width: 605px;
  min-height: 400px;
  box-shadow: 4px 5px 18px 0px rgba(0, 0, 0, 0.3);
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
}
.calendar_container .calendar_img {
  float: left;
  position: relative;
  width: 250px;
  min-height: 400px;
  background-color: #f4f8f1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.calendar_container .calendar_data {
  float: left;
}

.ui-datepicker,
.ui-datepicker table,
.ui-datepicker tr,
.ui-datepicker td,
.ui-datepicker th {
  margin: 0;
  padding: 0;
  border: none;
  border-spacing: 0;
}

.ui-datepicker {
  display: none;
  width: 355px;
  min-height: 400px;
  padding: 28px 24px;
  cursor: default;
  font-size: 14px;
  text-transform: uppercase;
}

.ui-datepicker-header {
  position: relative;
  padding-bottom: 10px;
}
.ui-datepicker-header .ui-datepicker-prev,
.ui-datepicker-header .ui-datepicker-next {
  position: absolute;
  right: 0px;
  z-index: 2;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border: 2px solid #cccccc;
  border-radius: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8px 14px;
}
.ui-datepicker-header .ui-datepicker-prev:hover,
.ui-datepicker-header .ui-datepicker-next:hover {
  border-color: #ff5c5d;
}
.ui-datepicker-header .ui-datepicker-prev span,
.ui-datepicker-header .ui-datepicker-next span {
  display: block;
  text-indent: -9999px;
}
.ui-datepicker-header .ui-datepicker-prev {
  background-image: url(http://ruibogasdesign.net/img/icons/angle-left.png);
}
.ui-datepicker-header .ui-datepicker-next {
  top: 35px;
  background-image: url(http://ruibogasdesign.net/img/icons/angle-right.png);
}

.ui-datepicker-title {
  text-align: left;
  margin-left: -38px;
  margin-top: -13px;
}

.ui-datepicker-month {
  font-size: 56px;
  line-height: 68px;
  position: relative;
  display: block;
  color: #000000;
  font-family: 'Playfair Display', serif;
  text-transform: initial;
  letter-spacing: 0.06em;
}

.ui-datepicker-year {
  color: #000000;
  letter-spacing: 0.1em;
  margin-left: -4px;
}

.ui-datepicker-calendar th {
  padding-top: 14px;
  padding-bottom: 14px;
  font-weight: 900;
  text-align: center;
  color: #cccccc;
}

.ui-datepicker-calendar td {
  padding: 0 4px;
  text-align: center;
  line-height: 26px;
}

.ui-datepicker-calendar .ui-state-default {
  display: block;
  width: 36px;
  height: 36px;
  line-height: 34px;
  outline: none;
  text-decoration: none;
  color: #000000;
  border: 2px solid transparent;
  border-radius: 100%;
}
.ui-datepicker-calendar .ui-state-default:hover {
  border-color: #cccccc;
}

.ui-datepicker-calendar .ui-state-active {
  color: #000000;
  border: 2px solid #ff5c5d;
  border-radius: 100%;
}
.ui-datepicker-calendar .ui-state-active:hover {
  border-color: #ff5c5d;
}

.ui-datepicker-other-month .ui-state-default {
  color: #cccccc;
}

/*Calendar Backgrounds*/
.january {
  background-image: url(https://images.unsplash.com/photo-1437862180810-0f9f8e2f3621?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=7d4b13544e5fe9f40be2c775bdfb52ce);
}

.february {
  background-image: url(https://images.unsplash.com/photo-1431373878197-8da4e53be0c6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=602847644ff6a1b9abff589f7904f6f3);
}

.march {
  background-image: url(https://images.unsplash.com/photo-1457301473530-d6d4d4d7b824?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c40d1876fd6bc4aaaaadc419d31af9d4);
}

.april {
  background-image: url(https://images.unsplash.com/photo-1429448125515-a8aaa800303c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=7ade279da82368d7a8789ba224f1d93f);
}

.may {
  background-image: url(https://images.unsplash.com/photo-1437608934325-e1c3dfc74544?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=cfa0826e7668c44c5fa1dd8f9043ff34);
}

.june {
  background-image: url(https://images.unsplash.com/photo-1443242977742-25943754d269?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=424589bfae93f8ba1495991fed70d368);
}

.july {
  background-image: url(https://images.unsplash.com/photo-1424112908919-49d7a3e04482?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=9c6ebb8df685632d0be6b2351688795b);
}

.august {
  background-image: url(https://images.unsplash.com/photo-1447878035468-f6464b327023?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c828f730335938db337a51876e4548d2);
}

.september {
  background-image: url(https://images.unsplash.com/photo-1421749810611-438cc492b581?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=6cf5c5e54ebe49a76b78b7e17ca3dd47);
}

.october {
  background-image: url(https://images.unsplash.com/photo-1445964047600-cdbdb873673d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c6665e8c83154faddeb6b9d253871486);
}

.november {
  background-image: url(https://images.unsplash.com/photo-1445366526762-3646e5bf3beb?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=ca885a894d19c4c02e41a40261612a16);
}

.december {
  background-image: url(https://images.unsplash.com/photo-1449885164684-02f9f7f1caa5?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c2181322b4f76ea401db340c4fd89583);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,700|Roboto:400,300,500,700,900' rel='stylesheet' type='text/css'>

<div class="page">
  <div class="page_content">
    <div class="calendar_container">
      <div class="calendar_img"></div>
      <div class="calendar_data">
        <div id="calendar"></div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

    标签： javascript jquery html css jquery-ui-datepicker


    【解决方案1】：

    添加 onChangeMonthYear 事件处理程序，从回调中获取选定的月份（记住是月份 -1），删除所有月份的类并添加选定的类。

    $(document).ready(function() {

  $('#calendar').datepicker({
    inline: true,
    firstDay: 7,
    showOtherMonths: true,
    dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    onChangeMonthYear: changeBackground

  });


  function changeBackground(year, month, obj) {
    var months = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"
    ];

    months.forEach(function(value) {
      $('.calendar_img').removeClass(value);
    });

    $('.calendar_img').addClass(months[month - 1]);
  }

  var month = $('.ui-datepicker-month').text().toLowerCase();
  $('.calendar_img').addClass(month);

})

    您不能在回调中使用$('.ui-datepicker-month').text().toLowerCase()，因为该事件已引发（在此之前）小部件更改了值

    这里是JSFiddle

    【讨论】：

    • 谢谢麦克斯！你真的帮了很多忙。非常有效的解决方案！ ;)
    • 很高兴为您提供帮助 ;-)
    • 你帮了大忙！感谢您的宝贵时间；）
    【解决方案2】：

    将更改事件添加到日期选择器。

     $('#calendar').datepicker({
    inline: true,
    firstDay: 7,
    showOtherMonths: true,
    dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    onChangeMonthYear: changeBackground
    });

function changeBackground(year, month, widget){
 var month = $('.ui-datepicker-month').text().toLowerCase();
 $('.calendar_img').addClass(month);
}

    【讨论】：

      【解决方案3】：

      这应该可以解决问题：

        $('#calendar').datepicker({
    inline: true,
    firstDay: 7,
    showOtherMonths: true,
    dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    onChangeMonthYear: function(year, month, widget) {
      var month_name = $('.ui-datepicker-month').text().toLowerCase();
      $('.calendar_img').addClass(month_name);
    }
  });


      $(document).ready(function(){
  
  $('#calendar').datepicker({
    inline: true,
    firstDay: 7,
    showOtherMonths: true,
    dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    onChangeMonthYear: function(year, month, widget) {
      var month_name = $('.ui-datepicker-month').text().toLowerCase();
      $('.calendar_img').addClass(month_name);
    }
  });
 
   var month_name = $('.ui-datepicker-month').text().toLowerCase();
   $('.calendar_img').addClass(month_name);
  
});//END document.ready
      * {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
}
.page .page_content {
  display: table-cell;
  vertical-align: middle;
  padding: 80px 0;
}

.calendar_container {
  display: flex;
  width: 605px;
  min-height: 400px;
  box-shadow: 4px 5px 18px 0px rgba(0, 0, 0, 0.3);
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
}
.calendar_container .calendar_img {
  float: left;
  position: relative;
  width: 250px;
  min-height: 400px;
  background-color: #f4f8f1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.calendar_container .calendar_data {
  float: left;
}

.ui-datepicker,
.ui-datepicker table,
.ui-datepicker tr,
.ui-datepicker td,
.ui-datepicker th {
  margin: 0;
  padding: 0;
  border: none;
  border-spacing: 0;
}

.ui-datepicker {
  display: none;
  width: 355px;
  min-height: 400px;
  padding: 28px 24px;
  cursor: default;
  font-size: 14px;
  text-transform: uppercase;
}

.ui-datepicker-header {
  position: relative;
  padding-bottom: 10px;
}
.ui-datepicker-header .ui-datepicker-prev,
.ui-datepicker-header .ui-datepicker-next {
  position: absolute;
  right: 0px;
  z-index: 2;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border: 2px solid #cccccc;
  border-radius: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8px 14px;
}
.ui-datepicker-header .ui-datepicker-prev:hover,
.ui-datepicker-header .ui-datepicker-next:hover {
  border-color: #ff5c5d;
}
.ui-datepicker-header .ui-datepicker-prev span,
.ui-datepicker-header .ui-datepicker-next span {
  display: block;
  text-indent: -9999px;
}
.ui-datepicker-header .ui-datepicker-prev {
  background-image: url(http://ruibogasdesign.net/img/icons/angle-left.png);
}
.ui-datepicker-header .ui-datepicker-next {
  top: 35px;
  background-image: url(http://ruibogasdesign.net/img/icons/angle-right.png);
}

.ui-datepicker-title {
  text-align: left;
  margin-left: -38px;
  margin-top: -13px;
}

.ui-datepicker-month {
  font-size: 56px;
  line-height: 68px;
  position: relative;
  display: block;
  color: #000000;
  font-family: 'Playfair Display', serif;
  text-transform: initial;
  letter-spacing: 0.06em;
}

.ui-datepicker-year {
  color: #000000;
  letter-spacing: 0.1em;
  margin-left: -4px;
}

.ui-datepicker-calendar th {
  padding-top: 14px;
  padding-bottom: 14px;
  font-weight: 900;
  text-align: center;
  color: #cccccc;
}

.ui-datepicker-calendar td {
  padding: 0 4px;
  text-align: center;
  line-height: 26px;
}

.ui-datepicker-calendar .ui-state-default {
  display: block;
  width: 36px;
  height: 36px;
  line-height: 34px;
  outline: none;
  text-decoration: none;
  color: #000000;
  border: 2px solid transparent;
  border-radius: 100%;
}
.ui-datepicker-calendar .ui-state-default:hover {
  border-color: #cccccc;
}

.ui-datepicker-calendar .ui-state-active {
  color: #000000;
  border: 2px solid #ff5c5d;
  border-radius: 100%;
}
.ui-datepicker-calendar .ui-state-active:hover {
  border-color: #ff5c5d;
}

.ui-datepicker-other-month .ui-state-default {
  color: #cccccc;
}

/*Calendar Backgrounds*/
.january {
  background-image: url(https://images.unsplash.com/photo-1437862180810-0f9f8e2f3621?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=7d4b13544e5fe9f40be2c775bdfb52ce);
}

.february {
  background-image: url(https://images.unsplash.com/photo-1431373878197-8da4e53be0c6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=602847644ff6a1b9abff589f7904f6f3);
}

.march {
  background-image: url(https://images.unsplash.com/photo-1457301473530-d6d4d4d7b824?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c40d1876fd6bc4aaaaadc419d31af9d4);
}

.april {
  background-image: url(https://images.unsplash.com/photo-1429448125515-a8aaa800303c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=7ade279da82368d7a8789ba224f1d93f);
}

.may {
  background-image: url(https://images.unsplash.com/photo-1437608934325-e1c3dfc74544?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=cfa0826e7668c44c5fa1dd8f9043ff34);
}

.june {
  background-image: url(https://images.unsplash.com/photo-1443242977742-25943754d269?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=424589bfae93f8ba1495991fed70d368);
}

.july {
  background-image: url(https://images.unsplash.com/photo-1424112908919-49d7a3e04482?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=9c6ebb8df685632d0be6b2351688795b);
}

.august {
  background-image: url(https://images.unsplash.com/photo-1447878035468-f6464b327023?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c828f730335938db337a51876e4548d2);
}

.september {
  background-image: url(https://images.unsplash.com/photo-1421749810611-438cc492b581?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=6cf5c5e54ebe49a76b78b7e17ca3dd47);
}

.october {
  background-image: url(https://images.unsplash.com/photo-1445964047600-cdbdb873673d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c6665e8c83154faddeb6b9d253871486);
}

.november {
  background-image: url(https://images.unsplash.com/photo-1445366526762-3646e5bf3beb?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=ca885a894d19c4c02e41a40261612a16);
}

.december {
  background-image: url(https://images.unsplash.com/photo-1449885164684-02f9f7f1caa5?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c2181322b4f76ea401db340c4fd89583);
}
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,700|Roboto:400,300,500,700,900' rel='stylesheet' type='text/css'>

<div class="page">
  <div class="page_content">
    <div class="calendar_container">
      <div class="calendar_img"></div>
      <div class="calendar_data">
        <div id="calendar"></div>
      </div>
    </div>
  </div>
</div>

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 2016-01-09
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-03-16
        • 2011-06-02
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode