Datepicker jQuery UI カスタマイズ例２

2020/7/15 html

・「monthSuffix」を作成して”月”をリストから外出しする。 

<div class="ui-triangle-left">と<div class="ui-triangle-right">を作成して、前月と翌月のリンク矢印を作成する。</div></div>

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/jquery-ui.css">
  <link rel="stylesheet" href="css/customize_4.css">
  <script type="text/javascript" src="js/jquery-1.12.4.min.js">
</script>
  <script type="text/javascript" src="js/jquery-ui-customize.js">
</script>
  <script type="text/javascript" src="js/customize_4.js">
</script>

</head>
<body>
<div>FromDate: <input type="text" id="fromdate" value="20180603"></div>
<div>ToDate: <input type="text" id="todate" value="20200805"></div>

<div>Date: <input type="text" id="datepicker" value="2020年6月10日"></div>

</body>
</html>

customize.js

    $( function() {
  
    var selectableMinDate = toDate(document.getElementById('fromdate').value); // 選択可能な日付範囲の最小値
    var selectableMaxDate = toDate(document.getElementById('todate').value); // 選択可能な日付範囲の最大値

  
    $( "#datepicker" ).datepicker({
        showOn: "button",
        buttonImage: "img/cal-32.png",
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true,
        dateFormat: 'yy年m月d日',
        minDate: selectableMinDate,
        maxDate: selectableMaxDate,
        showButtonPanel: false, // ボタンパネルを表示
        gotoCurrent: false,     // ボタンパネルに当日日付のボタン表示
        prevText: '前月',
        nextText: '翌月',
        monthNames: [ "1","2","3","4","5","6","7","8","9","10","11","12" ],
        monthNamesShort: [ "1","2","3","4","5","6","7","8","9","10","11","12" ],
        dayNames: [ "日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日" ],
        dayNamesShort: [ "日","月","火","水","木","金","土" ],
        dayNamesMin: [ "日","月","火","水","木","金","土" ],
        weekHeader: "週",
        firstDay: 0,
        isRTL: false,
        showMonthAfterYear: true,
        showOtherMonths: true,
        selectOtherMonths: false,
        yearSuffix: "年",
        monthSuffix: "月",
        beforeShowDay: function(date) {
            // 日曜日
            if (date.getDay() == 0) {
                return [true, 'sunday'];
            }
            // 土曜日
            if (date.getDay() == 6) {
                return [true, 'saturday'];
            }
            // 平日
            return [true, 'weekday'];
        }
        
    });
  } );

// str: 日付文字列（yyyyMMdd）
function toDate (str) {
  var arr = (str.substr(0, 4) + '/' + str.substr(4, 2) + '/' + str.substr(6, 2)).split('/');
  return new Date(arr[0], arr[1] - 1, arr[2]);
};

jquery-ui-customize.js（カスタマイズ）

	this.regional[ "" ] = { // Default regional settings
		closeText: "Done", // Display text for close link
		prevText: "Prev", // Display text for previous month link
		nextText: "Next", // Display text for next month link
		currentText: "Today", // Display text for current month link
		monthNames: [ "January","February","March","April","May","June",
			"July","August","September","October","November","December" ], // Names of months for drop-down and formatting
		monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ], // For formatting
		dayNames: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ], // For formatting
		dayNamesShort: [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ], // For formatting
		dayNamesMin: [ "Su","Mo","Tu","We","Th","Fr","Sa" ], // Column headings for days starting at Sunday
		weekHeader: "Wk", // Column header for week of the year
		dateFormat: "mm/dd/yy", // See format options on parseDate
		firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ...
		isRTL: false, // True if right-to-left language, false if left-to-right
		showMonthAfterYear: false, // True if the year select precedes month, false for month then year
		yearSuffix: "", // Additional text to append to the year in the month headers
		monthSuffix: "" // Additional text to append to the year in the month headers
	};

～抜粋～
			monthHtml += "</select>";
			monthHtml += this._get( inst, "monthSuffix" );
～抜粋～

		prev = ( this._canAdjustMonth( inst, -1, drawYear, drawMonth ) ?
			"<a class='ui-datepicker-prev ui-corner-all' data-handler='prev' data-event='click'" +
			" title='" + prevText + "'><div class='ui-triangle-left'></div><span class='ui-icon ui-icon-circle-triangle-" + ( isRTL ? "e" : "w" ) + "'>" + prevText + "</span></a>" :
			( hideIfNoPrevNext ? 
			"" : 			"<a class='ui-datepicker-prev ui-corner-all ui-state-disabled' title='" + prevText + "'><div class='ui-triangle-left'></div><span class='ui-icon ui-icon-circle-triangle-" + ( isRTL ? "e" : "w" ) + "'>" + prevText + "</span></a>" ) );

		nextText = this._get( inst, "nextText" );
		nextText = ( !navigationAsDateFormat ? nextText : this.formatDate( nextText,
			this._daylightSavingAdjust( new Date( drawYear, drawMonth + stepMonths, 1 ) ),
			this._getFormatConfig( inst ) ) );

		next = ( this._canAdjustMonth( inst, +1, drawYear, drawMonth ) ?
			"<a class='ui-datepicker-next ui-corner-all' data-handler='next' data-event='click'" +
			" title='" + nextText + "'><span class='ui-icon ui-icon-circle-triangle-" + ( isRTL ? "w" : "e" ) + "'>" + nextText + "</span><div class='ui-triangle-right'></div></a>" :
			( hideIfNoPrevNext ? "" : "<a class='ui-datepicker-next ui-corner-all ui-state-disabled' title='" + nextText + "'><span class='ui-icon ui-icon-circle-triangle-" + ( isRTL ? "w" : "e" ) + "'>" + nextText + "</span><div class='ui-triangle-right'></div></a>" ) );

customize.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: 40px;
    height: 20px;
}
.ui-datepicker-prev, .ui-datepicker-next {
	position: relative;
}
.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-next span {
	position: absolute;
	margin-left: -23px;    /* 翌月テキスト表示位置を矢印の左に表示 */
}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
	width: 3em;
	height: 1.6em;
	color: #6a64B3;
}
.ui-datepicker-prev:hover {
	cursor: pointer;
	font-weight: normal;
	background-color: #e6e6ff;
}
.ui-datepicker-next:hover {
	cursor: pointer;
	font-weight: normal;
	background-color: #e6e6ff;
}
/* 矢印 */
.ui-triangle-right {
	position: absolute;
    content: "";
	width: 0;
	height: 0;
	border-left: 7px solid #6a64B3;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	margin-left: 35px;
	margin-top: 9px;
}
.ui-triangle-left {
	position: absolute;
	width: 0;
	height: 0;
	border-right: 7px solid #6a64B3;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	margin-left: 7px;
	margin-top: 9px;
}
/*
.ui-triangle-left {
	display: inline-block;
	border-style: solid;
	border-width: 7px 12px 7px 0;
	border-color: transparent #000 transparent transparent;
	position: absolute;
	left: 50%;
	margin-left: -22px;
	top: 50%;
	margin-top: -4px;
}
.ui-triangle-right {
	display: inline-block;
	border-style: solid;
	border-width: 7px 0 7px 12px;
	border-color: transparent transparent transparent #000;
	position: absolute;
	left: 50%;
	margin-left: 10px;
	top: 50%;
	margin-top: -4px;
}
*/
/* 年と月のプルダウンの配置を微調整 */
.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;
}
/* 曜日ヘッダー */
.ui-datepicker-calendar thead th {
    padding: .2em .07em;
}
/* 日曜日 */
.ui-datepicker-calendar thead th.ui-datepicker-week-end:first-child span {
	display: block;
    color: #ff0000;
	background-color: #ffffff;
/*	border: 1px solid #c5c5c5;
	background-color: #ffe6ff; */
}
/* 土曜日 */
.ui-datepicker-calendar thead th.ui-datepicker-week-end:last-child span {
	display: block;
    color: #0000ff;
	background-color: #ffffff;
/*	border: 1px solid #c5c5c5;
	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;
/*	text-decoration: underline;  リンクの下線を表示 */
}
/* 当月 */
/* 日曜日 */
.sunday a.ui-state-default {
	background-color: #ffe6ff;
}
.sunday a.ui-state-default:hover {
	background-color: #ffceff;
}
/* 土曜日 */
.saturday a.ui-state-default {
	background-color: #cce6ff;
}
.saturday a.ui-state-default:hover {
	background-color: #b5dbff;
}
/* 平日 */
.weekday a.ui-state-default {
    background-color: #f6f6f6;
}
.weekday a.ui-state-default:hover {
	background-color: #dbdbdb;
}
/* 選択日 */
.ui-datepicker-current-day a.ui-state-default {
    background-color: #007fff;
    color: #ffffff;
}
.ui-datepicker-current-day a.ui-state-default:hover {
    background-color: #007fff;
    color: #ffffff;
}
/* 今日 */
.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;
}
/* 土曜日 */
.saturday span.ui-state-default {
	background-color: #cce6ff;
}
/* 平日 */
.weekday span.ui-state-default {
    background-color: #f6f6f6;
    font-weight: normal;
}
.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;
}

スポンサーリンク
google 6948682462
google 6948682462

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

しますけ

スポンサーリンク
google 6948682462