aXes User Forum

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;
}