jQueryのUI datepicker を使って、なおかつ日付の書き換えを行ってみた

icon-calendar 2017/5/7 エンジニアリング

諸事情で 2017/4/30 みたいなものをチェックボックスに応じて 4/30(水) とか 4月30日(水)とかに変更した入力を提供しないといけなくなったのでやってみた。

UIイメージ

<div class="form-group">
  <input type="radio" name="gym" value="1" checked="checked">feelcycle
  <input type="radio" name="gym" value="2">b-monster
</div>

このチェックボックスに応じて、datepickのインプットボックスの内容が変更される仕立て

DatePicler ui を使えるようにする

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />

こんな感じにgoogle先生から読み込むことにする

一旦動かしてみる

$('#datepick').datepicker();

jquery

とりあえずこんな感じに出来る様になる。日付はもちろん yyyy/MM/DD となっている。

これをこれから5/7(日) とか 5月7日 (日)という形に変換する

入力の変化を掴んで処理を動かす

  $('#datepick').datepicker();
  $('#datepick').change(function () {

    //入力文字列 2017/12/10 みたいな値を取得
    var datestr = $('#datepick').val();
    //チェックボックスの値を取得
    var radioVal = $('input[name='gym']:checked').val();

    if(datestr){
      //配列で格納される [0]2017 [1]12 [2]10 となっている
      dateArray = datestr.split('/');
      //Date型のmonthは0からはじまるので -1をする
      var dateObj = new Date(dateArray[0],(dateArray[1]-1),dateArray[2]);
      //曜日は配列で返すので定義しておく
      var week = ['日', '月', '火', '水', '木', '金', '土'];
      var y = dateObj.getFullYear();
      var m = dateObj.getMonth() + 1;
      var d = dateObj.getDate();
      var w = dateObj.getDay();
      if(radioVal == 1){
        //5/7(日)

        $('#datepick').val(m + '/' + d + '(' + week[w] + ')');

      }else{
        $('#datepick').val(m + '月' + d + '日(' + week[w] + ')');

      }
    }

  });

とりあえずこんな感じに動くようになった

スクリーンショット 2017-05-07 19.19.48

スクリーンショット 2017-05-07 19.20.01

最後に・・・・

いったん出来たけど、どちらかというとこの手の入力はdatepickerのオプションで出来ればその方が良いよなぁ。。。ひょっとしたら出来るかもと思ってリファレンスを少し覗いて見たけどなさそうだった・・・

※5/13追記 こんな感じで出来ることが同僚の指摘で分かりました・・・・orz 知らなかった・・・・・

    var format = 'yy-mm-dd';
    $('.datepicker').datepicker({
        dateFormat: format
    });


コメント

コメントを書く

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)