grunt-wiredep使用の環境でAngularJSのui-dateでロケール指定したい&jquery-uiのCSSを当てたいと。
bower.jsonに追加してbower install
bower.json
{
"dependencies": {
"angular-ui-date": "latest"
}
}
ui-dateがjquery-uiに依存しているので、jquery-uiも入る。
jquery-uiの構成を確認すると、ロケールはui/i18n/datepicker-ja.jsに、CSSのテーマはthemes/にある。
なので、プロジェクトのbower.jsonでmainをoverrideして、ロケールファイルとCSSを含める。
下記はsmoothnessにしてみた例。
bower.json
"jquery-ui": {
"main": [
"jquery-ui.js",
"ui/i18n/datepicker-ja.js",
"themes/smoothness/jquery-ui.css"
]
}
grunt serveとか実行するとこうなる↓
index.html
<!-- 省略 -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/jquery-ui/themes/smoothness/jquery-ui.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- 省略 -->
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<!-- 省略 -->
<script src="bower_components/jquery-ui/jquery-ui.js"></script>
<script src="bower_components/jquery-ui/ui/i18n/datepicker-ja.js"></script>
<script src="bower_components/angular-ui-date/src/date.js"></script>
<!-- endbower -->
<!-- endbuild -->
あとはrunあたりで設定でOK
app.coffee
myapp.run(->
$.datepicker.setDefaults($.datepicker.regional[ "ja" ])
)
buildして製品用に吐き出す場合に、cssの読むimageも処理しなければならないが、grunt-contrib-copyなどでよしなにすればOK。