web-dev-qa-db-ja.com

Kendo UI Datepickerはタイピングを無効にします

ユーザーがボタンとポップアップから日付を選択することでのみ、Kendo UIのDatepickerの値を変更できるようにしたいと思います。ユーザーがDatepickerテキストボックスに入力できないようにするにはどうすればよいですか？コントロール全体を無効にせずにテキストボックスを無効にできますか？

javascripthtmlkendo-ui
29
Pejman

入力要素にこの属性と値を追加します...

onkeydown="return false;"

これにより、入力された入力が無効になり、カレンダーコントロール入力の使用が許可されます。

47
Justin Russo

以下のようにコントロールを使用します-

@(Html.Kendo().DatePicker()
.Name("FromDate")
.HtmlAttributes(onkeydown="javascript:return false;" })
      )

キーボード入力を無効にします。他の条件も同様に処理できます。

11
Sharad Tripathi

あなたは2つの方法でそれを行うことができます

  //disable kendo ui  datapicker click event
    $(".k-datepicker input").bind('click dblclick',function () {
         return false;
    });

    //make it readonly
   $(".k-datepicker input").prop("readonly", true);
6
amol

入力要素を見つけて無効にします

$('#datepicker').attr('disabled','disabled');

（剣道のデモWebサイトで試してみました http://demos.kendoui.c​​om/web/datepicker/index.html ）

6
AntouanK

ユーザーが日付ピッカーで日付を入力できないようにし、ポップアップから日付のみを選択したい場合は、このコードを試してください

$(".k-datepicker").find('span').find('input').attr("readonly", "readonly");
3
Jaimin

もちろん、日付と時刻の選択ウィジェットには、キーボードではなくUIのみで入力を強制するオプションが必要です。フレームワークがこの明白なユースケースに何も提供していないことに私は非常に驚いています。

同じニーズがあり、次のロジックを使用して動作するようになりました。

$("#date").kendoDatePicker({
    format: "dd MMMM yyyy"
});
$("#date").attr("readonly","readonly");

この方法では、ユーザーはキーボードで値を入力できず、ドロップダウン日付選択ウィンドウを使用して適切にフォーマットされた日付のみを入力できます。

2
Tuthmosis

ジャスティンの答えは機能しますが、マウスの右クリックで誤った値が貼り付けられるのを防ぎません。 oncontextmenuを使用して、マウスの右クリックを防ぐことができます

oncontextmenu="return false;"

これにより、カレンダーの番号がコピーされるのを防ぐこともできます。

0
Jnr

実際、ウィジェットは入力の入力中にユーザーを制限しません。この動作の理由は、ここで説明されています： なぜウィジェットが入力を制限しないのか

このスレッドで共有されている他のすべてのソリューションとともに、カスタムMasked DatePickerを作成して、ユーザーを特定の日付形式に制限することができます。詳細については、このハウツーデモをご覧ください。

日付マスキングの作成

**これは組み込み機能としてKendo UIでサポートされていないため、ご自身の責任で使用する必要があります。良いニュースは、既知の副作用なしでかなりうまく機能することです。

0
George K