web-dev-qa-db-ja.com

jqueryUI datepickerを表示されているものとは異なる形式で送信する方法は？

私はjQueryUIを使用して国際化に取り組んでいます。フランス語で適切に動作しているフォームにDatePickerコントロールがあります。

たとえば、2012年8月15日などの日付を選択すると、DatePickerには15Aoû、2012が表示されます。ただし、私の問題は、フォームが投稿されると、DatePickerの値が'15Aoû、2012 'として投稿されるため、適切に保存する前にサーバーで翻訳する必要があることです。

私の質問は、コントロールが表示されている言語に関係なく、常に一貫した形式でサーバーに投稿できるように、jQueryUI DatePicker内に組み込みの方法がありますか？組み込みの方法がない場合、これを達成するためのオプションは何ですか？

テキスト形式を使用する代わりに、dateformatを2012年8月15日のような形式に変更できることを理解していますが、これは私がやりたいことではありません。

jquery-uiinternationalizationjquery-ui-datepicker
45
Wally Lawless

そのための2つの構成オプションがあります：altFieldとaltFormat。 http://api.jqueryui.com/datepicker/#option-altField altFieldを指定すると、そのフィールドも更新され、altFormatが設定されます。通常、altFieldを非表示フィールドにするので、通常のフィールドを無視して、dbにaltFieldを送信できます。

48
iwiznia

お気づきのように、dateFormatの指定は新しく入力された日付には有効ですが、以前のvalue属性は変更されませんすでに日付入力フィールドに入力されています。時間がかかり、このソリューションが理想的かどうかはわかりませんが、ここに私の状況とそれを解決するコードを説明します。将来、同じ問題を抱えている他の人を助けるかもしれません。私の例では、表示形式としてdd/MM/yyyyを使用しています。

  1. ページには、任意の数の日付入力フィールドが含まれます。このフィールドには、 W3Cで指定 の形式でyyyy-MM-dd形式で指定されたvalue属性がある場合とない場合があります。
  2. 一部のブラウザには、日付を処理するための独自の入力コントロールがあります。執筆時点では、たとえばOpera and Chrome。これらはとstoreの日付を予期するはずです。これらのブラウザでjqueryui datepickerを作成する必要はないでしょう。
  3. 日付入力フィールドを処理するための組み込みコントロールを持たないブラウザには、jqueryui datepickerと 'alt'の非表示フィールドが必要です。
  4. フォームロジックが機能し続けるには、yyyy-MM-dd形式の非表示のalt入力フィールドに元の名前と一意のIDが必要です。
  5. 最後に、表示入力フィールドのyyyy-MM-dd値を解析し、目的の対応するものに置き換える必要があります。

したがって、次のコードは、 Modernizr を使用して、クライアントがネイティブに日付入力フィールドをレンダリングできるかどうかを検出します。

if (!Modernizr.inputtypes.date) {
    $('input[type=date]').each(function (index, element) {
        /* Create a hidden clone, which will contain the actual value */
        var clone = $(this).clone();
        clone.insertAfter(this);
        clone.hide();

        /* Rename the original field, used to contain the display value */
        $(this).attr('id', $(this).attr('id') + '-display');
        $(this).attr('name', $(this).attr('name') + '-display');

        /* Create the datepicker with the desired display format and alt field */
        $(this).datepicker({ dateFormat: "dd/mm/yy", altField: "#" + clone.attr("id"), altFormat: "yy-mm-dd" });

        /* Finally, parse the value and change it to the display format */
        if ($(this).attr('value')) {
            var date = $.datepicker.parseDate("yy-mm-dd", $(this).attr('value'));
            $(this).attr('value', $.datepicker.formatDate("dd/mm/yy", date));
        }
    });
}
10
Vincent Sels

@ Pawel-Dydaが述べたように、

getDate（）メソッド

var currentDate = $( ".selector" ).datepicker( "getDate" );

返されるものの例を次に示します。Wed Jan 20 2016 00:00:00 GMT+0300.

Javascript、PHP、SQLなどで解析できます。

MySQL解析の例：

select str_to_date('Wed Jan 20 2016 00:00:00 GMT+0300','%a %b %d %Y %H:%i:%s');

戻り値：

2016-01-20 00:00:00
0
NikitOn

ASP.NETで動作するソリューション

@using (Html.BeginForm("ActionName", "ControllerName"))
{
    @Html.HiddenFor(m => m.DateFrom)
    @Html.HiddenFor(m => m.DateTo)

    <div class="form-group">
        @Html.LabelFor(m => m.DateFrom)
        <input id="datepicker-date-from" type="text" class="form-control datepicker" value="@Model.DateFrom.Date.ToString("dd.MM.yyyy")"/>
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.DateTo)
        <input id="datepicker-date-to" type="text" class="form-control datepicker" value="@Model.DateTo.Date.ToString("dd.MM.yyyy")" />
    </div>

    <input type="submit" class="btn btn-sn btn-primary" value="Download" />
}


@section scripts {
    <script type="text/javascript">

        $(function () {
            $("#datepicker-date-from").datepicker(
            {
                dateFormat: "dd.mm.yy",
                altField: @Html.IdFor(m => m.DateFrom),
                altFormat: "yy-mm-dd"
            });

            $("#datepicker-date-to").datepicker(
            {
                dateFormat: "dd.mm.yy",
                altField: @Html.IdFor(m => m.DateTo),
                altFormat: "yy-mm-dd"
            });
        });

    </script>
}
0
Muflix

基本的には、not日付を再フォーマットする必要があります。代わりに、 getDate（） メソッドを介して、DatepickerからJavaScriptのDateオブジェクトを読み取る必要があります。次に、サーバーに渡す必要があります。
問題は、方法です。基本的に、必要なのは一般的な形式です。 JSONを使用する場合、答えは非常に簡単です。日付オブジェクトを入力するだけで、JSONのstringify（）関数は自動的に ISO8601 にフォーマットします。

Wikipediaからわかるように、ISO8601は日付と時刻を確実に交換するように設計されているため、使用する必要があります。
最新のWebブラウザーがDateオブジェクトのtoISOString()メソッドをサポートしていることを知っておくと役立つ場合があります。

0
Paweł Dyda

他の誰かがこの質問またはあなたの前に似た質問をしたようです。

this stackoverflow answer と読んだ場合、作成者は日付をある形式で表示し、データを別の形式でMySQLに渡そうとしていました。

そのリンクの前の答えにより、選択した値に変数としてアクセスするように設定できます。必要なのは、選択した日付変数にparseDateを配線することだけです。

<script type="text/javascript">
    $('#cal').datepicker({
             dateFormat: 'dd M yy',
             onSelect: function(dateText, inst) { 
             var dateAsString = dateText; //the first parameter of this function
             var newDateFormat = $.datepicker.parseDate('dd-mm-yyyy', dateAsString);
           }
    });
</script>

設定とフォーマットについては、 parseDate リンクを確認してください。

お役に立てれば！

0
Bechard