JS 日付コントロール My97DatePicker の基本的な使い方

JS 日付コントロール My97DatePicker の基本的な使い方

My97DatePicker は非常に柔軟で使いやすい日付コントロールです。使い方はとても簡単です。

1. My97DatePickerコンポーネントパッケージをダウンロードする

ダウンロードアドレス: https://www.jb51.net/jiaoben/18012.html

2. コンポーネント js ファイルをページに導入します。

<script type="text/JavaScript" src="My97DatePicker/WdatePicker.js"></script>

3. 例

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <ヘッド>
        <title>My97DatePicker 日付コントロールの使用</title>
      </head>
      <本文>
        <中央>
            <h2>My97DatePicker 日付コントロールの使用</h2>
        </center>
                基本的な使い方:
        <input id="" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true})" /><br><br>

                今日より前の日付のみ選択できます:
        <input id="" class="Wdate" onfocus="WdatePicker({readOnly:true,maxDate:'%y-%M-%d'})" /><br><br>

               演算式を使用して、20 時間前から 30 時間後までの日付のみを選択します<input id="" class="Wdate" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate:'%y-%M-%d {%H-20}:%m:%s',maxDate:'%y-%M-%d {%H+30}:%m:%s'})" /><br><br>

                開始日と終了日: <!-- $dp.$ は document.getElementById 関数と同等です。 -->
        <input id="sdate" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true,maxDate:'#F{$dp.$D(\'edate\')}'})" />
        -
        <input id="edate" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true,minDate:'#F{$dp.$D(\'sdate\')}',startDate:'#F{$dp.$D(\'sdate\',{d:+1})}'})" /><br><br>

      </本文>
      <script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script>
    </html>

構成情報を変更する必要がある場合は、関連する構成情報WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true,maxDate:'#F{$dp.$D(\'edate\')}'})"

4. よく使用される構成情報。

構成情報は主に、onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true})" の WdatePicker メソッドの { } オブジェクトで定義されます。

よく使用される構成情報は、WdatePicker.js ファイルで定義されます。

var $dp,WdatePicker;(function(){var _={
    $wdate:true、
    $dpPath:"",
    $クロスフレーム:true,
    doubleCalendar:false, // 隔月カレンダーかどうか autoUpdateOnChanged:false,
    position:{}, //位置の例: position:{left:100,top:50}
    lang:"自動",
    skin:"default", //スキン dateFmt:"yyyy-MM-dd", //日付形式 realDateFmt:"yyyy-MM-dd",
    リアルタイムフォーマット:"HH:mm:ss",
    realFullFmt:"%Date %Time",
    minDate:"1900-01-01 00:00:00", //最小日付 maxDate:"2099-12-31 23:59:59", //最大日付 startDate:"", //開始日 alwaysUseStartDate:false, //日付ボックスが任意の値の場合、常に開始日として startDate を使用します yearOffset:1911,
    firstDayOfWeek:0, //週の最初の曜日をカスタマイズisShowWeek:false, //平日を表示highLineWeekDay:true, //日曜日を強調表示isShowClear:true, //クリアを表示isShowToday:true, //今日を表示isShowOK:true, //OKを表示
    isShowOthers:true、
    readOnly:false, //読み取り専用ですか? qsEnabled:true,
    errDealMode:0, //自動エラー修正機能//0 間違った日付を入力すると、最初にプロンプ​​トが表示されます//1 間違った日付を入力すると、以前の正しい値が自動的に復元されます//2 間違った日付を入力すると、プロンプトも変更も表示されず、マークのみが付けられますが、日付ボックスはすぐには非表示になりません autoPickDate:null, //日付を選択するために 2 回クリックする理由//false の場合、日付をクリックしても日付は自動的に入力されず、確認して入力する必要があります//true の場合、日付をクリックすると日付の値を返すことができます//null (推奨) の場合、時間がある場合は false に設定し、そうでない場合は true に設定します
    specialDates:null, //特別な日 specialDays:null, //特別な日 disabledDates:null, //無効な日付、例: disabledDates:['5$']
    disabledDays:null, //無効な日: disabledDays:[6]
    opposite:false, //有効な日付

これで、JS 日付コントロール My97DatePicker の基本的な使用法に関するこの記事は終了です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援して頂ければ幸いです。

以下もご興味があるかもしれません:
  • AngularJSはMy97DatePickerによって選択された値を取得します
  • 3 つの日付選択プラグイン (My97DatePicker、jquery.datepicker、Mobiscroll) を推奨します
  • ASP.NET My97DatePicker 日付コントロールは OA 日付メモ機能を実現します
  • ASP.NET は My97DatePicker 日付コントロールの例を使用します
  • JQuery カレンダー プラグイン My97DatePicker 日付範囲制限

<<:  MySQL データ圧縮パフォーマンス比較の詳細

>>:  Docker を使用して開発環境を構築する方法 (Windows および Mac)

推薦する

MySQL 8.0.16 winx64 のインストールと設定方法のグラフィックチュートリアル (win10 の場合)

この記事では、MySQL 8.0.16 winx64のインストールと設定の具体的な方法を記載します。...

CSS scroll-snap スクロールイベント停止と要素位置検出の実装

1. スクロールスナップはフロントエンド開発者にとって必須のスキルですCSS スクロール スナップは...

仮想マシンのディスクサイズを拡張する方法

Vmvare が仮想マシンのディスク サイズを設定した後、ディスク領域が不足していることがわかりまし...

mysql データはどこに保存されますか?

MySQLデータベースの保存場所: 1. MySQLがMyISAMストレージエンジンを使用する場合...

Dockerコンテナ間のホスト間通信 - オーバーレイベースの実装方法

オーバーレイネットワーク分析組み込みのホスト間ネットワーク通信は、常に Docker の待望の機能で...

Linux で環境変数 JAVA_HOME を変更/設定する方法について簡単に説明します。

1. 永久的な変更、すべてのユーザーに有効# vi /etc/プロファイル//キーボードの[Shi...

jQueryはアコーディオン効果を実装します

この記事では、アコーディオンを実装するためのjQueryの具体的なコードを参考までに紹介します。具体...

js の getBoundingClientRect() メソッドの詳細な説明

1. getBoundingClientRect() 分析getBoundingClientRect...

CSSは、入力ボックスのフローティングテキスト効果を実現するために、placeholder-shown疑似クラスを使用します。

この記事では、:placeholder-shown 疑似クラスを使用して、純粋な CSS で浮動疑問...

MySQL は information_schema オブジェクトの付与をバイパスし、ERROR 1044 (4200) エラーを報告します

この質問は、MySQL の権限に関する WeChat グループのネットユーザー間の議論です。次のよう...

Linux TTY/PTS の違いの概要

キーボードで文字を入力すると、対応するプロセスにどのように送信されるのでしょうか? ps や who...

IE6 で CSS スタイルの div または li の背景のタイリングと境界の破損を解決する方法

IE6 で CSS スタイルの div または li の背景のタイリングや境界の破壊を解決するには、...

MYSQL ログとバックアップおよび復元の問題の詳細な説明

この記事では、参考までにMYSQLログとバックアップとリストアについて紹介します。具体的な内容は以下...

Linuxでバージョン情報を表示する方法

Linux でバージョン情報を表示する方法。ビット数、バージョン情報、CPU コア情報、CPU 固有...