2

Kendo UI の datepicker に問題があります。value 属性を介して既に設定されている値が表示されません。マークアップは次のとおりです。

<input data-kendoDatePicker="true" value="9/18/2013 12:00:00 AM"/>

<script>
    $(':input[data-kendoDatePicker=true]').kendoDatePicker({
        format: 'dd MMM yyyy'
    });
</script>

ページが読み込まれると、値は表示されません。ただし、DOM を見ると、値が入力用に設定されています。新しい値が選択されると、それが表示され、フォーマットされます。フォーマットを削除すると、期待どおりに動作します

4

3 に答える 3

5

@Bobby_D は正しいです。問題は、正しい日付形式を指定していないことです: MM/dd/yyy.

ところで：次のように定義できることを知っていますか：

<input data-role="datepicker" value="9/18/2013 12:34:56 AM" data-format="MM/dd/yyyy"/>
<script>
    kendo.init($("input"));
</script>

基本的に、HTML ですべてのプロパティを設定できる場合は、要素を初期化inputするために を 1 回呼び出すだけで済みます。kendo.initだから、あなたもすることができますkendo.init($("body"));。これは、HTML からほとんどのコンポーネントを初期化するときに非常に便利です。

EDIT : Kendo DatePickerには2つの異なるオプションがあります:

  1. format : 入力に表示される DatePicker の値をフォーマットするために使用されるフォーマットを指定します。この形式は、入力の解析にも使用されます。
  2. parseFormats : value() メソッドまたは直接のユーザー入力によって設定された値を解析するために使用される日付形式のリストを指定します。設定されていない場合は、フォーマットの値が使用されます。format オプションは常に解析プロセスで使用されることに注意してください。

ある形式で日付を受け取り、別の形式で表示したいようです。次にparseFormats、受け取る可能性のあるもの (複数の可能性があります) とformat、ウィジェットに表示されるものに使用する必要があります。

コードは次のようになります。

$(':input[data-kendoDatePicker=true]').kendoDatePicker({
    format:        "dd MMM yyyy",
    parseFormats : [ "MM/dd/yyyy" ]
});

ここで変更されたコード: http://jsfiddle.net/OnaBai/TQnny/1/

または別の形式で:

<input id="datapicker" data-role="datepicker" value="9/18/2013 12:00:00 AM" data-format="dd MMM yyyy" data-parse-formats="MM/dd/yyyy"/>

それを初期化するためのJS：

kendo.init($("init"));

ここで変更されたコード: http://jsfiddle.net/OnaBai/TQnny/2/

于 2013-09-30T12:48:31.260 に答える