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

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

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

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

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

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 を応援して頂ければ幸いです。

以下もご興味があるかもしれません: