Datepicker jQuery UI　前月、翌月リンクの前後に矢印を表示する

datepicker.css　一部抜粋　※cssで「::before、::after」を設定して矢印を記載する

datepicker.css

/* 大枠 */
.ui-widget-content {
    border: 1px solid #dddddd;
    background-color: #e6e6ff;
}
/* 年月選択ヘッダー */
.ui-widget-header {
    border: 1px solid #dddddd;
    background-color: #e6e6ff;
    color: #333333;
    font-weight: bold;
}
/* 翌月・前月リンク */
.ui-icon {
	/* 翌月・前月リンクのサイズ */
    width: 50px;
    height: 20px;
}
.ui-datepicker .ui-datepicker-prev span {
	margin-left: -15px;		/* 前月テキストと矢印の表示位置 */
	text-align: right;		/* 前月テキストを右寄せ */
}
.ui-datepicker .ui-datepicker-next span {
	margin-left: -35px;		/* 翌月テキストと矢印の表示位置 */
	text-align: left;		/* 翌月テキストを左寄せ */
}
/* 左矢印 */
span.ui-icon.ui-icon-circle-triangle-w::before {
	position: absolute;
	width: 0;
	height: 0;
	border-right: 7px solid #6a64B3;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	margin-left: -10px;
	margin-top: 5px;
	content: "";
}
/* 右矢印 */
span.ui-icon.ui-icon-circle-triangle-e::after {
	position: absolute;
    content: "";
	width: 0;
	height: 0;
	border-left: 7px solid #6a64B3;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	margin-left: 2px;
	margin-top: 5px;
}


.ui-icon-circle-triangle-w,
.ui-icon-circle-triangle-e {
	/* アンダーラインを表示 */
	text-decoration: underline;
}
.ui-icon-circle-triangle-w:hover,
.ui-icon-circle-triangle-e:hover {
	/* アンダーラインを日表示 */
	text-decoration: none;
}

.ui-datepicker-prev .ui-icon, .ui-datepicker-next .ui-icon {
	background-image: none;    /* アイコン非表示 */
}
.ui-datepicker .ui-icon {
	text-indent: 0px;    /* 前月・翌月テキスト表示 */
	font-weight: normal;
}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
	width: 3em;
	height: 1.6em;
	color: blue;
	border: 1px solid #e6e6ff;
}
.ui-datepicker-prev:hover {
	cursor: pointer;
	font-weight: normal;
	background-color: #e6e6ff;
	top: 2px;
	left: 2px;
}
.ui-datepicker-next:hover {
	cursor: pointer;
	font-weight: normal;
	background-color: #e6e6ff;
	top: 2px;
	right: 2px;
}


/* 年と月のプルダウンの配置を微調整 */
.ui-datepicker-title{
   display: flex;
   justify-content: center;
   -webkit-justify-content: center;
}
.ui-datepicker select.ui-datepicker-year{
	margin-right: 0.1rem;
	width: auto;
}
.ui-datepicker select.ui-datepicker-month{
	margin-left: 0.3rem;
	width: auto;
}
.ui-datepicker{
	font-size: 100%;
}

/* 日付テーブル */
.ui-datepicker table {
	background-color: #ffffff;
	border:1px solid #000;
}
/* カレンダーテーブル設定 */
.ui-datepicker-calendar thead th, .ui-datepicker td {
	border:1px solid #000;
}
/* 曜日ヘッダー */
.ui-datepicker-calendar thead th {
    padding: 0.0em 0.0em;
}
/* 日曜日 */
.ui-datepicker-calendar thead th.ui-datepicker-week-end:first-child span {
	display: block;
	border: 1px solid #ffe6ff;
	background-color: #ffe6ff;
}
/* 土曜日 */
.ui-datepicker-calendar thead th.ui-datepicker-week-end:last-child span {
	display: block;
	border: 1px solid #cce6ff;
	background-color: #cce6ff;
}
/* 平日 */
.ui-datepicker-calendar thead th span {
	display: block;
	background-color: #ffffff;
/*	border: 1px solid #c5c5c5;
	background-color: #f6f6f6; */
	padding: 2px 1px;
}


/* カレンダーテーブル設定 */
.ui-datepicker td span,.ui-datepicker td a  {
	text-align: center;
}
.ui-datepicker td a  {
	text-align: center;
	text-decoration: underline;  /*リンクの下線を表示 */
}
.ui-datepicker td a:hover  {
	text-decoration: none;  /*リンクの下線を表示 */
}
/* 当月 */
/* 日曜日 */
td.sunday {
	background-color: #ffe6ff;
}
td.sunday:hover {
	background-color: #ffceff;
}
.sunday a.ui-state-default {
	background-color: #ffe6ff;
	border: 1px solid #ffe6ff;
	color: blue;
}
.sunday a.ui-state-default:hover {
	background-color: #ffceff;
	border: 1px solid #ffceff;
}
/* 土曜日 */
td.saturday {
	background-color: #cce6ff;
}
td.saturday:hover {
	background-color: #b5dbff;
}
.saturday a.ui-state-default {
	background-color: #cce6ff;
	border: 1px solid #cce6ff;
	color: blue;
}
.saturday a.ui-state-default:hover {
	background-color: #b5dbff;
	border: 1px solid #b5dbff;
	color: blue;
}
/* 平日 */
td.weekday:hover {
	background-color: #f6f6f6;
}
.weekday a.ui-state-default {
    background-color: #ffffff;
	border: 1px solid transparent;
	color: blue;
}
.weekday a.ui-state-default:hover {
	background-color: #f6f6f6;
	border: 1px solid #f6f6f6;
	border: 1px solid transparent;
}
/* 選択日 */
.ui-datepicker-current-day a.ui-state-default {
    background-color: #007fff;
	border: 1px solid #007fff;
    color: #ffffff;
	border: 1px solid transparent;
}
.ui-datepicker-current-day a.ui-state-default:hover {
    background-color: #007fff;
    color: #ffffff;
	border: 1px solid transparent;
}
/* 今日 */
.ui-widget-content .ui-datepicker-today  .ui-state-default {
  border: 1px solid #fad42e;
  background-color: #faf1c8;
  color: #B9CDDD;
  font-weight: bold;
}
.ui-widget-content .ui-datepicker-today  .ui-state-default:hover {
    background-color: #fad42e;
}

/* 当月 */
/* 日曜日 */
.sunday span.ui-state-default {
	background-color: #ffe6ff;
	border: 1px solid transparent;
}
/* 土曜日 */
.saturday span.ui-state-default {
	background-color: #cce6ff;
	border: 1px solid transparent;
}
/* 平日 */
.weekday span.ui-state-default {
    background-color: #ffffff;
    font-weight: normal;
	border: 1px solid transparent;
}
.ui-datepicker-other-month span.ui-state-default {
	color: transparent; /* 他の月の文字を透明にする */
}

/* 非活性日の透明度設定 */
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
    opacity: .35;
    filter: Alpha(Opacity=35);
    background-image: none;
}