A customer wants to tune shotYearCutoff (cutting off the date properly for 2-digit year format) on Material Design UI, but MD datePicker is not capable of it for the moment. So we copied from jqExtension_axDate.js to the attached one and added the following code to onFocus.
(onFocus)
Code: Select all
/*
* Class Name Reference
*-------------------------------------------------
* jQuery UI Material Design
*-------------------------------------------------
* ui-datepicker-header md-datepicker__header
*-------------------------------------------------
* classList.add("foo")
* classList.remove("foo")
* classList.contains("foo")
*/
// class【md-axes】と【md-datepicker】を追加
var elm = document.getElementById("ui-datepicker-div");
var elms = document.getElementById("ui-datepicker-div").childNodes;
elm.classList.add("md-axes");
elm.classList.add("md-datepicker");
elm.classList.add("animated");
elm.classList.add("md-datepicker--portrait");
elm.classList.remove("terminalTheme");
elm.style.fontSize = "20px";
elm.style.border = "none";
// class【md-datepicker__header】と【md-datepicker__body】を追加
for( var i=0; i < elms.length; i++ ){
var el = elms[i];
var id = elms[i].id;
var c1Name = elms[i].className;
console.log("c1Name="+c1Name);
if ( el.classList.contains("ui-datepicker-header") ){
el.classList.add("md-axes");
el.classList.add("md-datepicker__header");
var cssStyleDeclaration = getComputedStyle( el, null );
var hColor = cssStyleDeclaration.getPropertyValue( "background-color" );
el.style.backgroundColor = hColor;
el.classList.remove("md-axes");
el.classList.remove("md-datepicker__header");
el.classList.remove("ui-widget-header");
el.style.width = "85%";
}
if ( el.classList.contains("ui-datepicker-calendar") ){
el.classList.add("animated");
el.classList.add("md-datepicker--portrait");
el.classList.add("md-datepicker__body");
el.classList.add("md-datepicker__viewHolder");
el.classList.add("md-datepicker__grid");
el.classList.add("md-datepicker__tr");
el.classList.remove("ui-datepicker-calendar");
el.style.color = "#555";
el.style.fontWeight = "nomal";
el.style.textAlign = "center";
el.style.width = "85%";
el.style.fontSize = "23px";
}
}
// 各要素のスタイルを設定
var elms2 = elm.getElementsByClassName('ui-state-default');
var array = Array.prototype.slice.call(elms2);
for( var j=0; j < array.length; j++ ){
var el2 = array[j];
if ( el2.classList.contains("ui-state-default" && "ui-state-active") ){
el2.style.border = "none";
el2.style.color = "white";
}
if ( el2.classList.contains("ui-state-default") ){
el2.style.background = "transparent";
el2.style.border = "none";
}
}
var elms3 = elm.getElementsByClassName('ui-datepicker-current-day');
var el3 = elms3[0];
if ( el3.classList.contains("ui-datepicker-current-day") ){
el3.style.background = hColor;
}
- img_20200708_142451_001.png (46.58 KiB) Viewed 14078 times
Hidekazu Tanaka