Jquery Datepicker是一個(gè)非常常用的日期選擇器,可以方便地讓用戶在網(wǎng)頁上選擇日期。不過默認(rèn)情況下,Datepicker樣式有點(diǎn)單調(diào),下面我們就來看看如何通過更改顏色,讓它更加美觀。
$( function() { $("#datepicker").datepicker({ //date picker代碼 }); //通過改變ui-datepicker-header類的背景色來調(diào)整顏色 $(".ui-datepicker-header").css("background-color", "#5bc0de"); $(".ui-datepicker-prev, .ui-datepicker-next").css("background-color", "#5bc0de"); $(".ui-datepicker-calendar td a").hover(function() { $(this).css("background-color", "#5bc0de"); }, function() { $(this).removeAttr("style"); }); });
以上代碼中,我們通過css()方法直接修改.ui-datepicker-header的背景顏色,同時(shí)還通過選擇器修改了前進(jìn)和后退按鈕的背景顏色。另外,我們在"a"標(biāo)簽的hover事件里也加入了顏色變化效果,讓選中的日期更加醒目。
通過以上方法,我們可以輕松地調(diào)整Datepicker的顏色,使它更加美觀。當(dāng)然,具體顏色的選擇需要根據(jù)具體項(xiàng)目需求來決定。