jQuery 日历选择器 css 样式

Question

  var calendarPicker2 = $("#dsel2").calendarPicker({
    monthNames:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    dayNames: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    useWheel:true,
   
    years:0,
    months:0,
    days:5,
    showDayArrows:false,
    callback:function(cal) {
    
    }});

.calBox {
  background-color: white;
  padding: 2px;
  -moz-border-radius: 4px;
  text-align: center;
  color: black;
}

.calElement {
  margin: 1px;
  display: inline-block;
  overflow:hidden;
}

.calYear {
    font-size: 20px;
    /* border-bottom: 1px dashed #c3c3c3; */
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.calYear .calElement {
  border: 1px solid #999999;
}

.calMonth {
  border-bottom: 1px dashed #666;
  padding-bottom: 5px;
  margin-bottom: 5px;
}

.calMonth .calElement {
  font-size: 14px;
  border: 1px solid #999999;
}

.calDay {
}

.calDay .calElement {
  font-size: 12px;
  border: 1px solid #999999;
}




span.calElement.next:hover, span.calElement.prev:hover {

  cursor: pointer;
}

.calDay .calElement .dayNumber {
  font-size: 20px;
}


.calElement.selected {
  background-color: #53585f;
 
 border-radius: 23px
}

span.calElement:hover {
  background-color: #404040;

border-radius: 23px;
  cursor: pointer;
}

.calElement.today {
 
border-radius: 23px
}

<a href="calendarPicker.html#" onclick="calendarPicker2.changeDate(new Date())"></a>
<div id="dsel2" style="width:340px"></div>
<br>
<span id="wtf"></span>

我有一个 jQuery 日历，我尝试在我需要的时候更改 css，我附上了两张图片 image 01 是我需要的，image 02 是最新的查看，我需要如何更改为 image 01 Image-01

Image-02

这是我的代码部分 HTML

<a href="calendarPicker.html#" onclick="calendarPicker2.changeDate(new Date())"></a>
<div id="dsel2" style="width:340px"></div>
<br>
<span id="wtf"></span>

日历脚本

<script type="text/javascript">
var calendarPicker2 = $("#dsel2").calendarPicker({
    monthNames:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    dayNames: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    useWheel:true,
    //callbackDelay:500,
    years:0,
    months:0,
    days:5,
    showDayArrows:false,
    callback:function(cal) {

    }});

</script>

CSS

.calBox {
  background-color: white;
  padding: 2px;
  -moz-border-radius: 4px;
  text-align: center;
  color: black;
}

.calElement {
  margin: 1px;
  display: inline-block;
  overflow:hidden;
}

.calYear {
    font-size: 20px;
    /* border-bottom: 1px dashed #c3c3c3; */
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.calYear .calElement {
  border: 1px solid #999999;
}

.calMonth {
  border-bottom: 1px dashed #666;
  padding-bottom: 5px;
  margin-bottom: 5px;
}

.calMonth .calElement {
  font-size: 14px;
  border: 1px solid #999999;
}

.calDay {
}

.calDay .calElement {
  font-size: 12px;
  border: 1px solid #999999;
}




span.calElement.next:hover, span.calElement.prev:hover {

  cursor: pointer;
}

.calDay .calElement .dayNumber {
  font-size: 20px;
}


.calElement.selected {
  background-color: #53585f;

 border-radius: 23px
}

span.calElement:hover {
  background-color: #404040;

border-radius: 23px;
  cursor: pointer;
}

.calElement.today {

border-radius: 23px
}

js

jQuery.fn.calendarPicker = function(options) {
  // --------------------------  start default option values --------------------------
  if (!options.date) {
    options.date = new Date();
  }

  if (typeof(options.years) == "undefined")
    options.years=1;

  if (typeof(options.months) == "undefined")
    options.months=3;

  if (typeof(options.days) == "undefined")
    options.days=4;

  if (typeof(options.showDayArrows) == "undefined")
    options.showDayArrows=true;

  if (typeof(options.useWheel) == "undefined")
    options.useWheel=true;

  if (typeof(options.callbackDelay) == "undefined")
    options.callbackDelay=500;

  if (typeof(options.monthNames) == "undefined")
    options.monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

  if (typeof(options.dayNames) == "undefined")
    options.dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];


  // --------------------------  end default option values --------------------------

  var calendar = {currentDate: options.date};
  calendar.options = options;

  //build the calendar on the first element in the set of matched elements.
  var theDiv = this.eq(0);//$(this);
  theDiv.addClass("calBox");

  //empty the div
  theDiv.empty();


  var divYears = $("<div>").addClass("calYear");
  var divMonths = $("<div>").addClass("calMonth");
  var divDays = $("<div>").addClass("calDay");


  theDiv.append(divYears).append(divMonths).append(divDays);

  calendar.changeDate = function(date) {
    calendar.currentDate = date;

    var fillYears = function(date) {
      var year = date.getFullYear();
      var t = new Date();
      divYears.empty();
      var nc = options.years*2+1;
      var w = parseInt((theDiv.width()-4-(nc)*4)/nc)+"px";
      for (var i = year - options.years; i <= year + options.years; i++) {
        var d = new Date(date);
        d.setFullYear(i);
        var span = $("<span>").addClass("calElement").attr("millis", d.getTime()).html(i).css("width",w);
        if (d.getYear() == t.getYear())
          span.addClass("today");
        if (d.getYear() == calendar.currentDate.getYear())
          span.addClass("selected");
        divYears.append(span);
      }
    }

    var fillMonths = function(date) {
      var month = date.getMonth();
      var t = new Date();
      divMonths.empty();
      var oldday = date.getDay();
      var nc = options.months*2+1;
      var w = parseInt((theDiv.width()-4-(nc)*4)/nc)+"px";
      for (var i = -options.months; i <= options.months; i++) {
        var d = new Date(date);
        var oldday = d.getDate();
        d.setMonth(month + i);

        if (d.getDate() != oldday) {
          d.setMonth(d.getMonth() - 1);
          d.setDate(28);
        }
        var span = $("<span>").addClass("calElement").attr("millis", d.getTime()).html(options.monthNames[d.getMonth()]).css("width",w);
        if (d.getYear() == t.getYear() && d.getMonth() == t.getMonth())
          span.addClass("today");
        if (d.getYear() == calendar.currentDate.getYear() && d.getMonth() == calendar.currentDate.getMonth())
          span.addClass("selected");
        divMonths.append(span);

      }
    }

    var fillDays = function(date) {
      var day = date.getDate();
      var t = new Date();
      divDays.empty();
      var nc = options.days*2+1;
      var w = parseInt((theDiv.width()-4-(options.showDayArrows?12:0)-(nc)*4)/(nc-(options.showDayArrows?2:0)))+"px";
      for (var i = -options.days; i <= options.days; i++) {
        var d = new Date(date);
        d.setDate(day + i)
        var span = $("<span>").addClass("calElement").attr("millis", d.getTime())
        if (i == -options.days && options.showDayArrows) {
          span.addClass("prev");
        } else if (i == options.days && options.showDayArrows) {
          span.addClass("next");
        } else {
          span.html("<span class=dayNumber>" + d.getDate() + "</span><br>" + options.dayNames[d.getDay()]).css("width",w);
          if (d.getYear() == t.getYear() && d.getMonth() == t.getMonth() && d.getDate() == t.getDate())
            span.addClass("today");
          if (d.getYear() == calendar.currentDate.getYear() && d.getMonth() == calendar.currentDate.getMonth() && d.getDate() == calendar.currentDate.getDate())
            span.addClass("selected");
        }
        divDays.append(span);

      }
    }

    var deferredCallBack = function() {
      if (typeof(options.callback) == "function") {
        if (calendar.timer)
          clearTimeout(calendar.timer);

        calendar.timer = setTimeout(function() {
          options.callback(calendar);
        }, options.callbackDelay);
      }
    }


    fillYears(date);
    fillMonths(date);
    fillDays(date);

    deferredCallBack();

  }

  theDiv.click(function(ev) {
    var el = $(ev.target).closest(".calElement");
    if (el.hasClass("calElement")) {
      calendar.changeDate(new Date(parseInt(el.attr("millis"))));
    }
  });


  //if mousewheel
  if ($.event.special.mousewheel && options.useWheel) {
    divYears.mousewheel(function(event, delta) {
      var d = new Date(calendar.currentDate.getTime());
      d.setFullYear(d.getFullYear() + delta);
      calendar.changeDate(d);
      return false;
    });
    divMonths.mousewheel(function(event, delta) {
      var d = new Date(calendar.currentDate.getTime());
      d.setMonth(d.getMonth() + delta);
      calendar.changeDate(d);
      return false;
    });
    divDays.mousewheel(function(event, delta) {
      var d = new Date(calendar.currentDate.getTime());
      d.setDate(d.getDate() + delta);
      calendar.changeDate(d);
      return false;
    });
  }


  calendar.changeDate(options.date);

  return calendar;
};

Answer 1

试试这个，

这里我使用水平日历的 bootstrap 日期分页器。

同样的 jsFiddle。

https://jsfiddle.net/40hye90d/3/

根据您的要求使用下面的 js。

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepaginator/1.1.0/bootstrap-datepaginator.js"></script>

要在日历中启用日期选择，请使用以下代码。

    <script type="text/javascript">
        $(function() {              
            $('#paginator').datepaginator({selectedDate:'2017-07-07',startDate:'2017-01-01',endDate:'2017-12-30'});
        });
    </script>