jQuery的日历选择器的CSS样式

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 
}

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

来源

2017-07-07 core114

请问您可以创建一个[最小，完整和可验证示例]（http://stackoverflow.com/help/mcve）？ –

先生好吧，即时新的堆栈溢出， – core114

您可以使用stackoverflow中的JavaScript/HTML/CSS代码片段（CTLR + M），或者您可以使用[jsFiddle]（https://jsfiddle.net/）。我已经为你创建了一个片段：[jsFiddle here]（https://jsfiddle.net/40hye90d/） –

试试这个，

这里我使用的引导日期为分页程序日历水平。

jsFiddle for same。

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>

来源

2017-07-07 06:24:14

谢谢你sir :) – core114

很高兴帮助:)如果你觉得它对你有用，请标记为未来参考的答案以及.. @ core114 –

哦对不起，先生，即时通讯新用户在堆栈溢出社区 – core114

jQuery的日历选择器的CSS样式

回答

相关问题