Jquery UI 日历 // 按月份更改背景图片

Question

我正在使用 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>

Answer 1

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

 $('#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);
}

Answer 2

这应该可以解决问题：

  $('#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>

Answer 3

添加 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

Jquery UI 日历 // 按月份更改背景图片

Jquery UI Calendar // Change Background Image by month

javascript

jquery

html

css

jquery-ui-datepicker