[jquery] jquery datepickerで特定の日付の背景色を変更する方法
2019.12.02
2019.12.02
質問内容
jquery datePickerの日付に背景色を設定する方法を教えてください。
多くのチュートリアルに従いましたが、満足のいく結果が得られませんでした。
ベストアンサー
jQueryUIdatepickerの「beforeShowDay関数」を使用して、日付の背景を変更するコードとスクリーンショットを次に示します。
$(document).ready(function() { var SelectedDates = {}; SelectedDates[new Date('04/05/2016')] = new Date('04/05/2016'); SelectedDates[new Date('05/04/2017')] = new Date('05/04/2017'); SelectedDates[new Date('06/06/2018')] = new Date('06/06/2018'); $('#txtDate').datepicker({ beforeShowDay: function(date) { var Highlight = SelectedDates[date]; if (Highlight) { return [true, "Highlighted", Highlight]; } else { return [true, '', '']; } } }); });
body { font-family:Arial; font-size : 10pt; padding:5px; } .Highlighted a{ background-color : Green !important; background-image :none !important; color: White !important; font-weight:bold !important; font-size: 12pt; }
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> <input type='text' id='txtDate' />
動作デモ: http://jsfiddle.net/jquerybyexample/cqf9d/?utm_source=website&utm_medium=embed&utm_campaign=cqf9d
原文