How to highlight specific dates in bootstrap datepicker?

后端 未结 5 1292
广开言路
广开言路 2021-02-20 10:19

I am using bootstrap datepicker.I need to highlight some random dates.

For Example:

I need to highlight the dates like 1,3,8,20,21,16,26,30. Could you please tel

5条回答
  •  傲寒
    傲寒 (楼主)
    2021-02-20 11:08

    Based on @Hassan Raza answer's I've made this jsfiddle: https://jsfiddle.net/ToniBCN/mzke8tuv/

    Set calendar to february 2019 to see some days in orange, others in green and the rest disabled, depending json data.

    // 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'
        };
      }
    
    };
    

提交回复
热议问题