回答編集履歴
3
テキスト追加
answer
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
|
|
21
21
|
```javascript
|
|
22
22
|
// プラグインメソッド date を追加
|
|
23
|
-
const DATE_FORMAT_1 = 'YYYY年MM月DD';
|
|
23
|
+
const DATE_FORMAT_1 = 'YYYY年MM月DD日';
|
|
24
24
|
const DATE_FORMAT_2 = 'YYYY/MM/DD';
|
|
25
25
|
|
|
26
26
|
$.fn.date = function(...args) {
|
2
テキスト追加
answer
CHANGED
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
こんにちは
|
|
2
2
|
|
|
3
3
|
受け渡し用のメソッドをJQueryプラグインとして追加するという手はいかがでしょうか？
|
|
4
|
+
仕様としては、たとえばプラグインを `.date()` として、以下のような動作をするものです。
|
|
4
5
|
|
|
5
|
-
仕様としては、たとえばプラグインを `.date()` として
|
|
6
|
-
|
|
7
6
|
## 取得
|
|
8
7
|
```javascript
|
|
9
|
-
|
|
8
|
+
// #datepickerの値が"2020年04月04日"のとき、"2020/04/04" という文字列が返される
|
|
9
|
+
$('#datepicker').date();
|
|
10
10
|
```
|
|
11
11
|
## 設定
|
|
12
12
|
```javascript
|
|
13
|
+
// #datepickerに"2020年04月04日" が設定される。
|
|
13
|
-
$('#datepicker').date("2020/04/04");
|
|
14
|
+
$('#datepicker').date("2020/04/04");
|
|
14
15
|
```
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
|
|
18
|
+
|
|
17
19
|
以下は実装の一例です。日付のフォーマット変換のために、 [moment](https://momentjs.com/) を使っています。
|
|
18
20
|
|
|
19
21
|
```javascript
|
1
テキスト追加
answer
CHANGED
|
@@ -14,25 +14,28 @@
|
|
|
14
14
|
```
|
|
15
15
|
|
|
16
16
|
とします。
|
|
17
|
-
以下は実装の一例です。
|
|
17
|
+
以下は実装の一例です。日付のフォーマット変換のために、 [moment](https://momentjs.com/) を使っています。
|
|
18
18
|
|
|
19
19
|
```javascript
|
|
20
20
|
// プラグインメソッド date を追加
|
|
21
|
+
const DATE_FORMAT_1 = 'YYYY年MM月DD';
|
|
22
|
+
const DATE_FORMAT_2 = 'YYYY/MM/DD';
|
|
23
|
+
|
|
21
24
|
$.fn.date = function(...args) {
|
|
22
25
|
if (this.attr('id') !== 'datepicker') return;
|
|
23
26
|
if (args.length === 0) {
|
|
24
|
-
return this.val()
|
|
27
|
+
return moment(this.val(), DATE_FORMAT_1).format(DATE_FORMAT_2);
|
|
25
28
|
} else {
|
|
26
|
-
const m = moment(args[0],
|
|
29
|
+
const m = moment(args[0], DATE_FORMAT_2);
|
|
27
30
|
if (m.isValid()) {
|
|
28
|
-
this.val(m.format(
|
|
31
|
+
this.val(m.format(DATE_FORMAT_1));
|
|
29
32
|
}
|
|
30
33
|
}
|
|
31
34
|
}
|
|
32
35
|
```
|
|
33
36
|
以下は、上記の `.date()` を動作確認するためのサンプルです。
|
|
34
37
|
|
|
35
|
-
- **動作確認用サンプル：** [https://codepen.io/jun68ykt/pen/
|
|
38
|
+
- **動作確認用サンプル：** [https://codepen.io/jun68ykt/pen/zYGQgWQ?editors=1010](https://codepen.io/jun68ykt/pen/zYGQgWQ?editors=1010)
|
|
36
39
|
|
|
37
40
|
上記のサンプルでは、以下を確認できます。
|
|
38
41
|
|