datepickerのform送信

Question

jqueryのdatepickerについて使い方をご存知でしたらお教えください。
datepickerにはinputの表示値に下記のオプションで、指定の表示にできることをしりました。
下記で入力したinput属性のvalue値を送信したいのですが、送信する際にyyyy/mm/dd形式で
送信し、画面をリロードします。
その際に、カレンダーで入力した値は送信した値を受け取り、元のinputのvalue値にセットするのですが、そのさい、当然ながら送った時点の形で表示されます。
ですので、元の値(yyyy年mm月dd日）に戻したいです。）

$(function () {
var dateFormat = 'yyyy年mm月dd日';
$('.datepicker').datepicker({
dateFormat: dateFormat
});
});

考えたのが、document.readyで画面が表示される時点で、戻りの値を
上の$('.datepicker')に対して変更のトリガーイベントを起こし、わざと
datepickerで元の形に戻すみたいなことをしているのですが、
もっと良い方法があれば教えてください。

Answer 1

jquery UI でしょうか？
送った時点の形で表示というのはサーバー側で何もしていないからで、サーバー側で加工すべきものかと思います。

jQuery UI の DatePicker はaltフィールドが指定できるので、以下のように内部用、表示用とわけてもいいかもしれません。

<input name="date" type="hidden" class="datepicker" value="2018/03/22" />
<input class="alt" value="2018年03月22日" readonly="readonly" />

$(function () {
  $('.datepicker').datepicker({
    dateFormat: 'yy/mm/dd',
    altFormat: 'yy年mm月dd日',
    altField: '.alt'
  });

  $('.alt').on('click', function(event) {
    $('.datepicker').datepicker('show');
  });
});