jquery UI Datepicker 時間制御の使用法と問題解決
この記事の例では、jqueryUI での datepicker の使用法を共有し、asp.net の UpdatePanel と組み合わせて使用した場合の失敗の問題を解決します。
1. jqueryUI の datepicker の使用方法
--> jqueryUI 公式 Web サイト あなたのシステムに合ったスタイルをダウンロードしてください テーマ 、jqueryUI テーマ: ダウンロード アドレス (http://jqueryui.com/themeroller/#themeGallery)
-->ダウンロードされたファイル
jquery-ui-1.10.3.custom フォルダー; 異なるテーマの違いは、異なる CSS を参照することです
ダウンロード済みデフォルトのスタイルは次のとおりです:
その他のスタイル (ダウンロードしたスタイルなど):
jqueryUI は css フォルダーを除いて異なります。他のファイルは同じです。
--> ページで datePicker を使用する手順
(1) jquery-ui-1.10.3.custom .min.css スタイル ファイルを導入します
(2) jquery-1.9.1.js および jquery-ui-1.10.3.custom.min.js スクリプト ファイルを導入します。 注: まず、 jquery ファイルを導入します
( 3) 必要なのは、開始時刻と終了時刻を選択することです。
コードは次のとおりです:
<script type="text/javascript">
$(function () {
$("#txtStartDate").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
onClose: function (selectedDate) {
$("#txtEndDate").datepicker("option", "minDate", selectedDate);
}
});
$("#txtEndDate").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
onClose: function (selectedDate) {
$("#txtStartDate").datepicker("option", "maxDate", selectedDate);
}
});
$("#ui-datepicker-p").css("font-size", "12px"); //改变大小
});
</script>
</head>
<body>
<label for="from">开始时间：</label>
<input type="text" id="txtStartDate" name="from"/>
<label for="to">结束时间：</label>
<input type="text" id="txtEndDate" name="to"/>
</body>注:
(1)$("#ui-datepicker-p").css("font-size) ", " 12px"); 日付コントロールのサイズを変更するために使用されます
(2) dateFormat: "yy-mm-dd"、日付形式を変更します
(3) 日付コントロールは英語版、変更するスクリプトを追加します。 中国語
/* Chinese initialisation for the jQuery UI date picker plugin. */
/* Written by Cloudream (cloudream@gmail.com). */
jQuery(function ($) {
$.datepicker.regional['zh-CN'] = {
closeText: '关闭',
prevText: '<上月',
nextText: '下月>',
currentText: '今天',
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月'],
monthNamesShort: ['一', '二', '三', '四', '五', '六',
'七', '八', '九', '十', '十一', '十二'],
dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
weekHeader: '周',
dateFormat: 'yy-mm-dd',
firstDay: 1,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: '年'
};
$.datepicker.setDefaults($.datepicker.regional['zh-CN']);
});(4) 一部の日付ピッカーの属性とメソッドの詳細な使用方法については、非常に詳細な API ドキュメントを参照してください。
--> ; 別のトリックを共有します
$("[id$=txtASN]") の使用
定義されたテキストボックス コントロール ID asp.net は txtASN ですが、$("#txtASN") がテキストボックスの dom 要素を取得できないのは、ソースコードを確認したところ、コントロールが配置されている場合にコントロール ID が変更されていることが判明したためです。パネルまたはマスターの場合、生成される HTML コントロールの入力 ID は pnlBaseInfo_txtASN
のように変更されます。Solution: $("[id$=txtASN]")、意味は、ID が txtASN<🎜 で終わる dom 要素を取得することです。 >
-- >完全な効果
2. 併用時の失敗問題を解決します。 asp.net の UpdatePanel を使用
問題: 実行後、[クエリ] をクリックすると、ページが部分的に更新され、カレンダー セレクターが表示されないことがわかります。 asp.net の UpdatePanel で非同期ポストバック後に DatePicker が失敗する 問題
ページが最初に読み込まれるとき、DatePicker コントロールは正常に表示できますが、クエリをクリックした後、非同期ポストバックが原因で DatePicker が失敗します。
--> UpdatePanel の分析 UpdatePanel は主に、ページ全体のポストバックを回避するためにアプリケーションの部分更新に使用されます。
UpdatePanel の部分更新の核心は、MicrosoftAjaxWebForm.js ファイルにあります。その部分更新プロセスは、サーバー コードの実行後、UpdatePanel 内の HTML を非同期的に再送信します。レンダリングされました。
--> jQuery の解析
UpdatePanel が部分的に更新された後、その中のテキスト ボックス要素が書き換えられるため、このときDOM ツリー全体が再読み込みされないため、jQuery の Ready イベントがトリガーされず、テキスト ボックス要素は元の特殊効果を失います。 -->解決策
DatePicker を初期化するコードを Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(evt, args) {});
$(function () {
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function (evt, args) {
$("[id$=txtStartDate]").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
onClose: function (selectedDate) {
$("[id$=txtEndDate]").datepicker("option", "minDate", selectedDate);
}
});
$("[id$=txtEndDate]").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
onClose: function (selectedDate) {
$("[id$=txtStartDate]").datepicker("option", "maxDate", selectedDate);
}
});
$("#ui-datepicker-p").css("font-size", "14px"); //改变大小
});
});jquery UI Datepicker 時間コントロールの使用法 (1)
以上がこの記事の全内容です、皆様のお役に立てれば幸いです学ぶ。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7364
15
1628
14
1353
52
1266
25
1214
29
jQueryのリファレンスメソッドを詳しく解説：クイックスタートガイド
Feb 27, 2024 pm 06:45 PM
jQuery 参照方法の詳細説明: クイック スタート ガイド jQuery は、Web サイト開発で広く使用されている人気のある JavaScript ライブラリであり、JavaScript プログラミングを簡素化し、開発者に豊富な機能を提供します。この記事では、jQuery の参照方法を詳しく紹介し、読者がすぐに使い始めるのに役立つ具体的なコード例を示します。 jQuery の導入 まず、HTML ファイルに jQuery ライブラリを導入する必要があります。 CDN リンクを通じて導入することも、ダウンロードすることもできます
Elden Ring UI が表示され続けるのはなぜですか?
Mar 11, 2024 pm 04:31 PM
エルデンズリングでは、このゲームの UI ページは一定時間が経過すると自動的に非表示になります。UI が常に表示される方法を知らないプレイヤーも多いです。プレイヤーはディスプレイとサウンドの設定でゲージの表示設定を選択できます。クリックすると回転します。の上。 Elden Ring UI が表示され続けるのはなぜですか? 1. まず、メインメニューに入った後、[システム構成] をクリックします。 2. [表示とサウンドの設定]インターフェースで、メーターの表示設定を選択します。 3. 「有効にする」をクリックして完了します。
jQueryで要素の高さ属性を削除するにはどうすればよいですか?
Feb 28, 2024 am 08:39 AM
jQueryで要素の高さ属性を削除するにはどうすればよいですか?フロントエンド開発では、要素の高さ属性を操作する必要が生じることがよくあります。要素の高さを動的に変更する必要がある場合や、要素の高さ属性を削除する必要がある場合があります。この記事では、jQuery を使用して要素の高さ属性を削除する方法と、具体的なコード例を紹介します。 jQuery を使用して高さ属性を操作する前に、まず CSS の高さ属性を理解する必要があります。 height 属性は要素の高さを設定するために使用されます
jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか?
Feb 28, 2024 pm 03:12 PM
jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエスト メソッドを使用した具体的なコード例です。まず、jQuery ライブラリ ファイルが含まれていることを確認してから、$.ajax({u
jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する
Feb 28, 2024 pm 09:06 PM
タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキスト コンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリ ファイルを導入し、次のコードがページに導入されていることを確認する必要があります: <
jQuery を使用してすべての a タグのテキスト コンテンツを変更する
Feb 28, 2024 pm 05:42 PM
タイトル: jQuery を使用して、すべての a タグのテキスト コンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンク タグ (タグ) のテキスト コンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。
jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか?
Feb 29, 2024 am 09:03 AM
jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery を使用して DOM 要素を操作する場合、要素に特定の属性があるかどうかを判断する必要がある状況がよく発生します。この場合、jQuery が提供するメソッドを使用してこの関数を簡単に実装できます。以下では、jQuery 要素が特定の属性を持つかどうかを判断するために一般的に使用される 2 つの方法を紹介し、具体的なコード例を添付します。方法 1: attr() メソッドと typeof 演算子 // を使用して、要素に特定の属性があるかどうかを判断します
jQuery における eq の役割と応用シナリオを理解する
Feb 28, 2024 pm 01:15 PM
jQuery は、Web ページでの DOM 操作やイベント処理を処理するために広く使用されている人気のある JavaScript ライブラリです。 jQueryではeq()メソッドを利用して指定したインデックス位置の要素を選択しますが、具体的な使い方と応用シーンは以下の通りです。 jQuery では、 eq() メソッドは、指定されたインデックス位置にある要素を選択します。インデックス位置は 0 からカウントされます。つまり、最初の要素のインデックスは 0、2 番目の要素のインデックスは 1 などとなります。 eq() メソッドの構文は次のとおりです。 $("s
