web-dev-qa-db-ja.com

bootstrap datepickerで特定の日付を強調表示する方法は？

bootstrap datepickerを使用しています。ランダムな日付を強調表示する必要があります。

例えば：

1,3,8,20,21,16,26,30のような日付を強調する必要があります。 bootstrap datepickerでこれらのランダムな日付を強調表示する方法を教えてください。

twitter-bootstrapbootstrap-datepicker
9
Deepa Mani

Amphetamachineによって提案されているように bootstrap-datepickerで特定の日付を強調表示 これを解決するために必要なもののほとんどを提供します。その質問への答えは、次のように適応させることができます

$('.inline_date').datepicker({
    multidate: true,
    todayHighlight: true,
    minDate: 0,
    beforeShowDay: function(date) {
       var hilightedDays = [1,3,8,20,21,16,26,30];
       if (~hilightedDays.indexOf(date.getDate())) {
          return {classes: 'highlight', tooltip: 'Title'};
       }
    }
});

上記は、ハイライトスタイルクラスを毎月リストされている日に適用し、さらにチェックして特定の月に制限することができます。一部の古いブラウザはindexOfをサポートしていない場合があります。その場合、JSライブラリを使用するか、ifを展開できます。

5
user3702362

これは、「user_busy_days」配列の日を除くすべての日を強調表示する方法です。

Bootstrap date-pickerにはbeforeShowDaypropがあり、これは月の各日に実行されます[最大42回]。したがって、レンダリングされている日が配列にあるかどうかを確認し、配列にある場合は強調表示します。灰色、それ以外の場合は緑色で強調表示します。

私はそれがうまくいくことを願っています。

        var today               = new Date();
        var today_formatted     = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+('0'+today.getDate()).slice(-2);
        var user_busy_days      = ['2017-12-09','2017-12-16','2017-12-19'];



        $('#datetimepicker12').datepicker({
            inline: true,
            sideBySide: true,
            beforeShowDay: function (date) {

                calender_date = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+('0'+date.getDate()).slice(-2);

                var search_index = $.inArray(calender_date, user_busy_days);

                if (search_index > -1) {
                    return {classes: 'non-highlighted-cal-dates', tooltip: 'User available on this day.'};
                }else{
                    return {classes: 'highlighted-cal-dates', tooltip: 'User not available on this day.'};
                }

            }
        });

enter image description here

3
Hassan Raza

私は解決策を見つけました。

     $('.inline_date').datepicker({
        multidate: true,
        todayHighlight: true,
        minDate: 0,
    });

 $('.inline_date').datepicker('setDates', [new Date(2015, 7, 5), new Date(2015, 7, 8), new Date(2015, 7, 7)])

そこにある1つの問題だけが、クリックするとハイライトが削除されます。そしてそれは1つ少ない月を取ります。 8月の日付が必要な場合は、8ではなく7を使用する必要があります。

1
urfusion

@Hassan Razaの回答に基づいて、私はこのjsfiddleを作成しました： https://jsfiddle.net/ToniBCN/mzke8tuv/

Jsonデータに応じて、カレンダーを2019年2月に設定して、一部の日をオレンジ色で表示し、他の日を緑色で表示し、残りを無効にします。

// In order to call bootstrap's datepicker instead of jquery object
// https://github.com/uxsolutions/bootstrap-datepicker
var datepicker = $.fn.datepicker.noConflict(); // return $.fn.datepicker to previously assigned value
$.fn.bootstrapDP = datepicker; // give $().bootstrapDP the bootstrap-datepicker functionality

$.fn.bootstrapDP.defaults.format = "dd/mm/yyyy";
$.fn.bootstrapDP.defaults.startDate = '01/01/2019'

$.fn.bootstrapDP.defaults.beforeShowDay = function(date) {

  // in order to get current day from calendar in the same format than json
  calendar_dates = date.getFullYear() + ('0' + (date.getMonth() + 1)).slice(-2) + ('0' + date.getDate()).slice(-2);

  let optionByDate = [{
      "date": "20190126",
      "option": "A"
    },
    {
      "date": "20190128",
      "option": "B"
    }, {
      "date": "20190131",
      "option": "A"
    }, {
      "date": "20190202",
      "option": "B"
    }, {
      "date": "20190205",
      "option": "A"
    }, {
      "date": "20190207",
      "option": "B"
    }, {
      "date": "20190210",
      "option": "A"
    }, {
      "date": "20190212",
      "option": "B"
    }, {
      "date": "20190215",
      "option": "A"
    }, {
      "date": "20190217",
      "option": "B"
    }, {
      "date": "20190220",
      "option": "A"
    }, {
      "date": "20190222",
      "option": "B"
    }, {
      "date": "20190225",
      "option": "A"
    }, {
      "date": "20190227",
      "option": "B"
    }, {
      "date": "20190302",
      "option": "A"
    }, {
      "date": "20190304",
      "option": "B"
    }
  ];

  // Get data from optionByDate json
  function getDataByCalendar(date) {
    return optionByDate.filter(
      function(optionByDate) {
        return optionByDate.date == date
      }
    );
  }

  let search_index = getDataByCalendar(calendar_dates);

  if (search_index.length > 0) {
    if (search_index[0].option == "A") return {
      classes: 'highlighted-a',
      tooltip: 'A option'
    };
    if (search_index[0].option == "B") return {
      classes: 'highlighted-b',
      tooltip: 'B option'
    };

  } else {
    // Disabled day
    return {
      enabled: false,
      tooltip: 'No option'
    };
  }

};
0
Toni BCN

ブログ投稿 ここ Bootstrap Datetimepickerを使用してどのように達成できるかを説明しています。

基本的にイベントshow、updateおよびchange日付を強調表示する必要があります。

$('#datetimepicker').on('dp.show', function(e){
  highlight()
})
$('#datetimepicker').on('dp.update', function(e){
 highlight()
})
$('#datetimepicker').on('dp.change', function(e){
    highlight()
})

function highlight(){
 var dateToHilight = ["04/19/2019","04/20/2019","04/30/2019"];
 var array = $("#datetimepicker").find(".day").toArray();
 for(var i=0;i -1) {
       array[i].style.color="#090";
       array[i].style.fontWeight = "bold";
    } 
 }
 }

詳細については、ブログを参照してください

参照：

https://sourcecodezoneseven.blogspot.com/2019/04/here-is-code-function-hilight-var.html

0
CodeDezk