和暦datepicker

　DatePickerは便利であるが、和暦で表示したい場合もありこちらを参考にDatepickerを和暦表示したときのメモ。
　input formの和暦表示はdatepickerからの西暦データをonchangeイベントで受け取り和暦に 変換後formに戻して表示。

サンプル

　IEではSo-netブログのDatepicker設定と競合するため、和暦表示されないこと
ありました。 和暦表示されない時はこちらでどうぞ。

日付(和暦）：

日付(西暦）：

コード説明

//jquery.ui.datepicker-ja.jsの変更（以下を追加)
function convert_wareki(y, wareki){
var tmp;
  if(wareki == false){
    return y;
  }
  //平成
  if (y > 1988) {
    tmp = y - 1988;
    tmp = '平成' + tmp;
    return tmp;
  }
  //昭和
  if (y > 1925) {
    tmp = y - 1925;
    tmp = '昭和' + tmp;
    return tmp;
  }
}

//jquery-ui.jsの変更(以下の部分変更)
this.regional[''] = {
    ・
  wareki: true	//和暦表示のため追加
};

var wareki = this._get(inst, 'wareki');	//和暦表示のため追加
inst.yearshtml += '';
for (; year <= endYear; year++) {
  inst.yearshtml += '' + convert_wareki(year,wareki) + '';	//和暦表示のためyear -> convert_wareki(year,wareki)に変更
}
inst.yearshtml += '';

//javascript部
/*******************************
  DatePicker
********************************/
$(function() {
  $.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
  $(".wdatepicker").datepicker({
    changeMonth: true,
    changeYear:  true,
    wareki: 1  //和暦・西暦制御
  });
});
/*******************************
  西暦->和暦変換
********************************/
function cnvrt_wareki(element){
  ymd = element.value;
  year = ymd.substr(0,4);
  mm = ymd.substr(5,2);
  dd   = ymd.substr(8,2)
  if(ymd.substring(0,1) == "2") {
    if(year > 1988) {
      result = year - 1988;
      result = '平成' + result;
    } else if (year > 1925) {
      result = year - 1925;
      result = '昭和' + result;
    }
    element.value = result + "年" + mm + "月" + dd + "日";
  } else {
    element.value = ymd;
  }
}

//html部
if($wareki) {
  echo '日付(和暦）：';
} elese {
  echo '日付(西暦）：';
}

連動プルダウンメニュー（サブメニュー値をPHPから直接Javascript渡し）

　連動プルダウンメニューをAjaxを使用しないで、2次元配列化した連動プルダウンの値をjson_encodeでjson化したあと、javascriptに渡し、メインメニューの値をjavascriptで読み取りサブメニューの値をhtmlに渡す方法を試みたの時の備忘録。

// ******** javascript部(カテゴリのPulldownメニュー変化で呼び出される)
function selAdd() {
  var add_list = ;
  var cate = document.getElementById('部').value;
  var htmlStr = "";
  for(var i = 0; i < add_list[cate].length; i++) {
    var atesaki_list =add_list[cate][i].split(",");
    var atesaki = atesaki_list[0];
    var atesaki_no = atesaki_list[1];
    htmlStr = htmlStr + "" + atesaki_no + "";
  }
  document.getElementById("宛先").innerHTML = htmlStr;
}

//　*******　html部
  
  
';
    foreach($ad_list as $key => $value) {
      echo ''.$key.'';
    }
?>
  
  
  

// ******** PHP部
  //宛先リスト作成
  $ad_list = array();
  $sql = "SELECT DISTINCT 部 FROM t_宛先 ";
  $result = $link->query($sql);
  while($row = $result->fetchArray()) {
    $sql = "SELECT 宛先, 宛先_id FROM t_宛先 WHERE 部='".$row['部']."' ";
    $result_1 = $link->query($sql);
    
    while($row_1 = $result_1->fetchArray()) {
      $ad_list[$row['部']][] = $row_1['宛先_id'].",".$row_1['宛先'];
    }
  }
  $json_add_list = json_encode($ad_list);

郵便番号入力チェック(入力数値の全角半角変換）

郵便番号入力時のユーザビィティ向上のため、全角数値入力の場合半角に変換、「３桁"-"４桁」表示、７桁以上入力不可にするJavascript codeを書いたときのメモ。

サンプル
郵便番号入力（半角）

//javascript部
function chkHan() {
  var dt = document.getElementById("dt").value;
  if(dt.match(/[^0-9０-９－―\-]/)) {
   alert("数字で入力願います。")
   document.getElementById("dt").focus();
   return false;
  }
  dt = dt.toString();
  dt = dt.replace(/-/g,'');
  //全角 => 半角変換
  dt = dt.replace(/[０-９]/, function(s) {
    return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
  })
  if(dt.length > 3){
    if(dt.length < 7){
      //3桁後に"-"挿入
      dt = dt.slice(0, 3) + "-" + dt.slice(3, dt.lenght);
    } else {
      //7桁以上入力拒否
      dt = dt.slice(0, 3) + "-" + dt.slice(3, 7);
    }
  }
  //入力formに戻し
  document.getElementById("dt").value = dt;
}
//html部
  郵便番号入力（半角）

Jqueryでtooltip(吹き出し)実装

WEB DBシステムのユーザビィティ向上のためこちらを参照にしてJqueryでtooltipを実装したときのメモ。

サンプル

1	メニュー1
2	メニュー2
3	メニュー3
4	メニュー4

//css部
.relative td {
  position:relative;
}
.hvr:hover {
  background: #deb3ba;
  width: 10em;
}
.dsp_tooltips {
  position: absolute;
  top: +1.5em;
  left: 0.3em;
  z-index: 9999;
  width:12em;
  padding: 0.3em 0.5em;
  color: #000000;
  background: #deb3ba;
  border-radius: 0.1em;
}
.dsp_tooltips:after {
  width: 100%;
  content: "";
  display: block;
  position: absolute;
  left: 0.5em;
  top: -8px;
  border-top:8px solid transparent;
  border-left:8px solid #deb3ba;
}
//javascript部
$(function() {
  $(".hvr").on({
    'mouseenter':function(){
      var text = $(this).attr('data_text');
      $(this).append('
'+text+'
');
    },
    'mouseleave':function(){
      $(this).find(".dsp_tooltips").remove();
    }
  });
});
//html部


  
1
メニュー1
  
2
メニュー2
  
3
メニュー3
  
4
メニュー4

form入力値を英文字小文字（半角）から大文字に強制変換

　ＷＥＢ上の入力で英文字の大文字に限定したい場合がある。しかし小文字入力された場合再度入力を促すのもユーザビリティが良くない。そこで小文字で入力されても、Keyが押されたイベントで大文字に変換して入力formに戻すと大文字で入力されたように見える。このコード書いたときの備忘録。

実際のサンプル

英文字入力（半角）

//******* javascript部 
function chkChra() {
  var dt = document.getElementById("dt").value;
  if(dt.match(/[^A-Za-z]/)) {
    document.getElementById("dt").focus();
    return false;
  }
  dt = dt.toUpperCase();
  document.getElementById("dt").value = dt;
}
//****** html部

  英文字入力（半角）

連動プルダウンメニュー(Ajaxでサブメニューの値読み出し）

　連動プルダウンメニューをAjaxで実装した時の備忘録。
カテゴリpulldownメニューの変化でAjaxでPHPの宛先取得を呼び出し、宛先を戻値で受け取りinnerHTMLでhtmlの宛先select部に書き出す。

// ******** javascript部(カテゴリのPulldownメニュー変化で呼び出される)
function getAtesaki() {
  var category = document.getElementById("category").value; //選択値取得
  //****ajaxでget_atesaki.php呼び出し
  $.ajax({
     type: "POST",
     url:  "get_atesaki.php",
     data: {"category": category},
     success: function(res) {  // res: ","区切り宛先リスト
       var htmlStr = "";
       var list_atesaki = res.split(",");
       for(var i = list_atesaki.length; i--;) {
         htmlStr = htmlStr + "" + list_atesaki[i] + "";
       }
      document.getElementById("atesaki").innerHTML = htmlStr;　//宛先pulldownメニュー部に書き出し
    }
  });
}

//　*******　html部
  
    </option>
<?php
  foreach($category_list as $key => $value) {
    echo ''.$value.'</option>';
  }
?>
  
  

// ******** PHP部(get_atesaki.php)
$sql = "SELECT 宛先 FROM t_宛先 WHERE カテゴリ='".$category."'";
$result = $link->query($sql);
$atesaki_list = "";
while($row = $result->fetchArray()) {
  $atesaki_list .= $row['宛先'].",";
}
$atesaki_list = mb_substr($atesaki_list, 0, -1);
echo $atesaki_list;