2017-01-12 24 views

答えて

3

プラグインのマニュアルに更新がありません。しかし、ソースコードを見ると、2つの日付または特定の日付の間の期間を強調表示するために使用できる2つのオプションがあるようです。スクリプトを呼び出すとき、これらのオプションを設定することができ、あるいははsetOptions法によって、以下の例:

jQuery('#elem').datetimepicker({ 
    ..., 
    highlightedPeriods: [ 
     "dateStartP1, dateEndP1, 'Description P1', css-class-p1", 
     "dateStartP2, dateEndP2, 'Description P2', css-class-p2" 
    ], 
    ... 
    highlightedDates: [ 
     "date1, 'Description D1', css-class-d1", 
     "date2, 'Description D2', css-class-d2", 
    ], 
    ... 
    onShow: function(date, inst) { 
     this.setOptions({ 
      highlightedDates: ["date3, 'Description D3', css-class-d3"] 
     }) 
    } 
    ... 
}); 

highlightPeriodsはカンマで区切られたパラメータからなる文字列の配列である:
「開始日、 、日付、説明:終了日、説明、CSSクラス「


highlightDatesはカンマで区切られたパラメータからなる文字列の配列です」 CSSクラス "


最後の2つのパラメータはオプションです。指定しない場合、ツールチップは追加されず、デフォルトクラスxdsoft_highlighted_defaultが設定されます。


例 - 4月10日と4月20日の間にハイライト日付:

highlightedPeriods: ["2017/04/10, 2017/04/20, 'My description', my-highlight-style"] 

これは、4月10日と4月20日の間のすべての日付をハイライト表示されます、これらのいずれかをホバリング時にツールチップを設定します日付はテキストMy descriptionであり、それぞれにCSSクラスmy-highlight-styleを追加します。

例 - 4月1日のハイライト:テキストApril Foolsでこれらの日付のいずれかをホバリングし、それにCSSクラスmy-highlight-styleを追加するとき

highlightedDates: ["2017/04/01, 'April Fools', my-highlight-style"] 

は、この4月1日ハイライト表示されますが、ツールチップを設定します。あなたが(:my-highlight-styleこちら)
を指定されたCSS クラスを使用して、望むよう


その後、強調表示の日付のスタイルを設定することができます。

プラスあなたが動的に日付を取得する必要がある場合、あなたはjQueryのを使用することができます。
highlightedDates: [jQuery("#myInput").val() + ", 'User entered date', my-highlight-style"]

日付があなたのDateTimePickerのオプションとして同じ形式でなければならないことに注意してください。
format: 'Y/m/d',
formatDate: 'Y/m/d'

後期の答えが、時間opefullyそれはまだ助ける!

+0

ありがとうございましたThomas ...それはたくさんの助けになりました... +1 –