jquery UI Datepicker 時間制御の使用法と問題解決-jsチュートリアル-php.cn

jquery UI Datepicker 時間制御の使用法と問題解決

PHPz

リリース： 2021-05-28 16:03:14

転載

2496 人が閲覧しました

jquery UI Datepicker 時間制御の使用法と問題解決

この記事の例では、jqueryUI での datepicker の使用法を共有し、asp.net の UpdatePanel と組み合わせて使用した場合の失敗の問題を解決します。

1. jqueryUI の datepicker の使用方法

--> jqueryUI 公式 Web サイトあなたのシステムに合ったスタイルをダウンロードしてくださいテーマ 、jqueryUI テーマ: ダウンロードアドレス (http://jqueryui.com/themeroller/#themeGallery)

jquery UI Datepicker 時間制御の使用法と問題解決

-->ダウンロードされたファイル
jquery-ui-1.10.3.custom フォルダー; 異なるテーマの違いは、異なる CSS を参照することです
ダウンロード済みデフォルトのスタイルは次のとおりです:

jquery UI Datepicker 時間制御の使用法と問題解決

その他のスタイル (ダウンロードしたスタイルなど):

jquery UI Datepicker 時間制御の使用法と問題解決

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[&#39;zh-CN&#39;] = {
    closeText: &#39;关闭&#39;,
    prevText: &#39;<上月&#39;,
    nextText: &#39;下月>&#39;,
    currentText: &#39;今天&#39;,
    monthNames: [&#39;一月&#39;, &#39;二月&#39;, &#39;三月&#39;, &#39;四月&#39;, &#39;五月&#39;, &#39;六月&#39;,
        &#39;七月&#39;, &#39;八月&#39;, &#39;九月&#39;, &#39;十月&#39;, &#39;十一月&#39;, &#39;十二月&#39;],
    monthNamesShort: [&#39;一&#39;, &#39;二&#39;, &#39;三&#39;, &#39;四&#39;, &#39;五&#39;, &#39;六&#39;,
        &#39;七&#39;, &#39;八&#39;, &#39;九&#39;, &#39;十&#39;, &#39;十一&#39;, &#39;十二&#39;],
    dayNames: [&#39;星期日&#39;, &#39;星期一&#39;, &#39;星期二&#39;, &#39;星期三&#39;, &#39;星期四&#39;, &#39;星期五&#39;, &#39;星期六&#39;],
    dayNamesShort: [&#39;周日&#39;, &#39;周一&#39;, &#39;周二&#39;, &#39;周三&#39;, &#39;周四&#39;, &#39;周五&#39;, &#39;周六&#39;],
    dayNamesMin: [&#39;日&#39;, &#39;一&#39;, &#39;二&#39;, &#39;三&#39;, &#39;四&#39;, &#39;五&#39;, &#39;六&#39;],
    weekHeader: &#39;周&#39;,
    dateFormat: &#39;yy-mm-dd&#39;,
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: true,
    yearSuffix: &#39;年&#39;
  };
  $.datepicker.setDefaults($.datepicker.regional[&#39;zh-CN&#39;]);
});

ログイン後にコピー

(4) 一部の日付ピッカーの属性とメソッドの詳細な使用方法については、非常に詳細な API ドキュメントを参照してください。

--> ; 別のトリックを共有します

$("[id$=txtASN]") の使用

定義されたテキストボックスコントロール ID asp.net は txtASN ですが、$("#txtASN") がテキストボックスの dom 要素を取得できないのは、ソースコードを確認したところ、コントロールが配置されている場合にコントロール ID が変更されていることが判明したためです。パネルまたはマスターの場合、生成される HTML コントロールの入力 ID は pnlBaseInfo_txtASN
のように変更されます。Solution: $("[id$=txtASN]")、意味は、ID が txtASN<🎜 で終わる dom 要素を取得することです。 >

-- >完全な効果

jquery UI Datepicker 時間制御の使用法と問題解決

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)

jquery UI Datepicker 時間コントロールの使用法 (2) )

jquery UI Datepicker 時間制御の使い方 (3)

以上がこの記事の全内容です、皆様のお役に立てれば幸いです学ぶ。