"MD like" jQuery Date Picker

Use this Forum to post tips and techniques for using aXes. Please explain in detail. This Forum is managed by the aXes user community. LANSA cannot guarantee the accuracy of any information posted to this Forum.

Moderator: jeanmichel

Post Reply
Fairdinkum
Posts: 118
Joined: 24 Jul 2017, 17:02

"MD like" jQuery Date Picker

Post by Fairdinkum » 08 Jul 2020, 15:51

Hi,

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;
}
The result will be:
img_20200708_142451_001.png
img_20200708_142451_001.png (46.58 KiB) Viewed 12197 times
Best Regards,
Hidekazu Tanaka

Post Reply