読者です 読者をやめる 読者になる 読者になる

ITの隊長のブログ

ITの隊長のブログです。いや、まだ隊長と呼べるほどには至っていないけど、日々がんばります。CakePHPとPlayFrameworkを使って仕事しています。最近はAngular2をさわりはじめたお(^ω^ = ^ω^)

jQueryのdatepickerの表示部分を無理やり変える話

jQuery jQuery UI JavaScript

スポンサードリンク

http://www.flickr.com/photos/16318901@N00/285731517
photo by borkweb


やりたかったこと


jQueryのdatepickerの年月を表示する箇所「yyyy mm月」で、「yyyy」の後に「年」の文言を追加する」


これがやりたかった。



だけど、探し方が悪かったんだろう。中々見つからない。


面倒くさくなって、恐らくやりかたは無いんだろうって思い込んだので、実際のソースに追記しようと思った←(?)


開く!

  • jquery.ui.js (一部抜粋)
        },_generateMonthYearHeader: function(e, t, i, s, n, a, o, r) {
            var h, l, u, d, c, p, f, m, g = this._get(e, "changeMonth"), v = this._get(e, "changeYear"), y = this._get(e, "showMonthAfterYear"), b = "<div class='ui-datepicker-title'>", _ = "";
            if (a || !g)
                _ += "<span class='ui-datepicker-month'>" + o[t] + "</span>";
            else {
                for (h = s && s.getFullYear() === i, l = n && n.getFullYear() === i, _ += "<select class='ui-datepicker-month' data-handler='selectMonth' data-event='change'>", u = 0; 12 > u; u++)
                    (!h || u >= s.getMonth()) && (!l || n.getMonth() >= u) && (_ += "<option value='" + u + "'" + (u === t ? " selected='selected'" : "") + ">" + r[u] + "</option>");
                _ += "</select>"
            }
            if (y || (b += _ + (!a && g && v ? "" : "&#xa0;")), !e.yearshtml)
                if (e.yearshtml = "", a || !v)
                    b += "<span class='ui-datepicker-year'>" + i + "</span>";
                else {
                    for (d = this._get(e, "yearRange").split(":"), c = (new Date).getFullYear(), p = function(e) {
                        var t = e.match(/c[+\-].*/) ? i + parseInt(e.substring(1), 10) : e.match(/[+\-].*/) ? c + parseInt(e, 10) : parseInt(e, 10);
                        return isNaN(t) ? c : t
                    }, f = p(d[0]), m = Math.max(f, p(d[1] || "")), f = s ? Math.max(f, s.getFullYear()) : f, m = n ? Math.min(m, n.getFullYear()) : m, e.yearshtml += "<select class='ui-datepicker-year' data-handler='selectYear' data-event='change'>"; m >= f; f++)
                        e.yearshtml += "<option value='" + f + "'" + (f === i ? " selected='selected'" : "") + ">" + f + "</option>";
                    e.yearshtml += "</select>", b += e.yearshtml, e.yearshtml = null
                }
            return b += this._get(e, "yearSuffix"), y && (b += (!a && g && v ? "" : "&#xa0;") + _), b += "</div>"

ほげぇえええええええええええええええええええええええ


これは無理げーと思いました。


けど、出力するタグは知っていたので、それで検索するとビンゴ!


出力するところを確認してしまえばこちらのものです。


ちょー無理矢理ですが

  • jquery-ui.js : 2009行目ぐらい
b+="<span class='ui-datepicker-year'>"+i+"年</span>";


こんな感じで変更すればいけました。



・・・


ええ、知っていますよ。外道だってね。



だってだって! 中々検索も見つからないし、もしかしたら方法なんて無いかもしれないじゃない!



だからこれでいいんだお(^ω^ = ^ω^)



〜 そしてこの記事を投稿中の時 〜



すみません。この記事書き上げたあとに、少しだけ別キーワードで検索してみたらすぐに見つかりましたorz


日本語化するプラグインを追加して、こうすれば良いらしいです。


jQuery UIのdatepickerの日本語初期設定 | 我が社を有名にするブログ

yearSuffix: '年',



ε- (´ー`*)フッ






orz (だよね。そんな組み方する必要もなかったんだよね)





ちなみにちょっとだけ読んでみると

return b += this._get(e, "yearSuffix"), y && (b += (!a && g && v ? "" : "&#xa0;") + _), b += "</div>"


先程のパラメータを_get()が取得しているがわかります。取得後は、先程私がミスって追加したところに、値を追記して返すって感じですかね。


ともあれ、やっぱり後から書き換えられるような組み方がされてましたとさ。さすがですorz