日付を手動で入力する必要があるページにjQuery datepickerがありますが、日付が1日以内であることを検証する必要もあります。ピッカーコントロールはmaxDateで制限されていますが、手動で日付を入力すると、1日以上前に日付を入力することができます。どのように(私)それを停止するのですか?ここに私がこれまで持っていたものがあります:jQuery UI Datepicker maxDateオプションの手動日付入力検証
8
A
答えて
6
さて、上記の答えが正しいですが、それがフォームを検証しない、ユーザーはまだフォームを送信することができるようになります、
を私はいくつかの研究を行っていますが、nyを見つけることができませんでした。最終的に、この関数を書いてフォームを検証し、正しい日付が入力されるまでフォームを送信しません。
このコードを追加するだけで、これは 'datePicker'クラスのすべてのフィールドに適用されます。
$(".datePicker").datepicker({
dateFormat: 'd/mm/yy',
changeMonth: true,
changeYear: true,
firstDay: 1,
minDate: Date.parse("1900-01-01"),
maxDate: Date.parse("2100-01-01"),
yearRange: "c-90:c+150"
});
// validation in case user types the date out of valid range from keyboard : To fix the bug with out of range date time while saving in sql
$(function() {
$.validator.addMethod(
"date",
function (value, element) {
var minDate = Date.parse("1900-01-01");
var maxDate = Date.parse("2100-01-01");
var valueEntered = Date.parse(value);
if (valueEntered < minDate || valueEntered > maxDate) {
return false;
}
return !/Invalid|NaN/.test(new Date(minDate));
},
"Please enter a valid date!"
);
});
11
コントロールの値が直接入力されると、datepickerがイベントを発生させるかどうかわかりません。あなたは.change()
イベントに関数をバインドすることができます。
$(".datepicker").attr("placeholder", "mm-dd-yyyy").datepicker({
dateFormat: "mm-dd-yy", // since you have defined a mask
maxDate: "+1",
showOn: "button",
showOtherMonths: true
}).on("change", function(e) {
var curDate = $(this).datepicker("getDate");
var maxDate = new Date();
maxDate.setDate(maxDate.getDate() + 1); // add one day
maxDate.setHours(0, 0, 0, 0); // clear time portion for correct results
if (curDate > maxDate) {
alert("Invalid date");
$(this).datepicker("setDate", maxDate);
}
});
4
1つの選択肢は、入力フィールドを手動入力する機能を削除することです。readonly
。これにより、ユーザーは手動で何かを狂って入力することを制限し、日付ピッカーの使用を強制します。
8
関連する問題
- 1. jQuery UI datepicker maxdate
- 2. jquery ui datepickerのmaxDateを特定の日付に設定する
- 3. Jquery ui Datepicker maxDateを動的に
- 4. jquery ui datepicker日付形式
- 5. jQueryの日付ピッカーに、maxdate
- 6. jQuery UI Datepicker - 複数の日付選択
- 7. jQuery UI datepicker binding
- 8. 入力日付時刻の検証C#
- 9. jQueryのUI日付ピッカーの出力日付形式
- 10. HTML5日付入力タイプjQuery DatePickerを使用しない
- 11. jquery UI datepickerリセット日
- 12. 手動入力とインポート入力のための角型検証
- 13. jQueryウォーターマーク付きの入力と検証
- 14. Jquery Datepick Range&invalid asp.netの日付検証
- 15. jQueryの日付ピッカーに - 入力フィールド
- 16. jquery datepickerで日付範囲を検証する
- 17. jQueryのUI-DatePickerののカレンダーテーブル幅は、UI-日付ピッカーをオーバーフロー
- 18. jQuery DatePicker:入力した日付を制限する
- 19. 手動入力時に日付ピッカー変更イベントが複数回発生する
- 20. 複数入力フィールドのJquery日付ピッカー
- 21. 剃刀ビューの検索入力/テキストボックスの日付検証MVC
- 22. Angular.Js入力[日]検証
- 23. jEditable DatePickerオプションへのアクセス方法(onSelect、minDate、maxDate)
- 24. Android:手動変更日DatePicker
- 25. Jquery UI - Datepicker onChangeMonthYear
- 26. jquery ui datepicker dateformat
- 27. datepicker jquery ui and rails 3(.1)
- 28. ajax datepicker jquery ui
- 29. jQueryの検証入力
- 30. 角度ui-bootstrap datepickerのマインドは、入力時に検証されません