作成日: 2019/06/17 最終更新日: 2022/08/04
文書種別
使用方法
詳細
C1InputDateの既定のカレンダーをカスタムカレンダーに置き換え、customizeDateなどの必要なオプションを設定することにより、土日や祝日など特定の日付の色を変更することが可能です。
◎サンプルコード(aspx)
◎サンプルコード(aspx)
<script type="text/javascript">
$(document).ready(function () {
$("#C1InputDate1").c1inputdate({
dropDownOpen: function (e) {
$(".wijmo-wijcalendar.wijmo-wijobserver-visibility").eq(0).css("display", "none");
$(".wijmo-wijcalendar.wijmo-wijobserver-visibility").eq(0).parent("div").append("<div id='calendar1'></div>");
$("#calendar1").wijcalendar({
$(document).ready(function () {
$("#C1InputDate1").c1inputdate({
dropDownOpen: function (e) {
$(".wijmo-wijcalendar.wijmo-wijobserver-visibility").eq(0).css("display", "none");
$(".wijmo-wijcalendar.wijmo-wijobserver-visibility").eq(0).parent("div").append("<div id='calendar1'></div>");
$("#calendar1").wijcalendar({
culture: "ja-JP",
titleFormat: "yyyy年M月",
customizeDate: function ($daycell, date, dayType, hover,preview) {
if (date.getMonth() === 6 && date.getDate() === 15) //7月15日の場合
{
$daycell.find('a').css('color', 'magenta');
return true;
}
else if (date.getDay() === 0) //日曜日の場合
{
$daycell.find('a').css('color', 'red');
return true;
}
else if (date.getDay() === 6) //土曜日の場合
{
$daycell.find('a').css('color', 'blue');
return true;
}
return false;
},
afterSelect: function (e, data) {
$("#C1InputDate1").c1inputdate("option", "date",data.date);
$("#calendar1").remove();
}
});
$("#calendar1").wijcalendar("selectDate", $("#C1InputDate1").c1inputdate("option", "date"));
$("#calendar1").wijcalendar("option", "displayDate", ("#C1InputDate1").c1inputdate("option", "date"));
}
})
})
</script>
・・・
<wijmo:C1InputDate ID="C1InputDate1" runat="server"></wijmo:C1InputDate>
titleFormat: "yyyy年M月",
customizeDate: function ($daycell, date, dayType, hover,preview) {
if (date.getMonth() === 6 && date.getDate() === 15) //7月15日の場合
{
$daycell.find('a').css('color', 'magenta');
return true;
}
else if (date.getDay() === 0) //日曜日の場合
{
$daycell.find('a').css('color', 'red');
return true;
}
else if (date.getDay() === 6) //土曜日の場合
{
$daycell.find('a').css('color', 'blue');
return true;
}
return false;
},
afterSelect: function (e, data) {
$("#C1InputDate1").c1inputdate("option", "date",data.date);
$("#calendar1").remove();
}
});
$("#calendar1").wijcalendar("selectDate", $("#C1InputDate1").c1inputdate("option", "date"));
$("#calendar1").wijcalendar("option", "displayDate", ("#C1InputDate1").c1inputdate("option", "date"));
}
})
})
</script>
・・・
<wijmo:C1InputDate ID="C1InputDate1" runat="server"></wijmo:C1InputDate>
関連情報
旧文書番号
84072