title: How to use JQuery datepicker in Angular?
body: <p>I tried to write the below code in ngOnInit</p>
  
  <pre><code>
  $('#DatePicker').datepicker({
            changeMonth: true,
            changeYear: true,
            maxDate:0,
            //The calendar is recreated OnSelect for inline calendar
            onSelect: function(date, dp) {
              this.updateDatePickerCells(dp);
  
            },
            onChangeMonthYear: function(month, year, dp) {
              this.updateDatePickerCells(dp);
            },
            beforeShow: function(elem, dp) { //This is for non-inline datepicker
              this.updateDatePickerCells(dp);
            }
          });
  
  updateDatePickerCells(dp) {
      /* Wait until current callstack is finished so the datepicker
         is fully rendered before attempting to modify contents */
      setTimeout(function() {
        //Fill this with the data you want to insert (I use and AJAX request).  Key is day of month
        //NOTE* watch out for CSS special characters in the value
        var cellContents = {
          '15-06-2020': '20',
          '15-08-2018': '60',
          '28-08-2018': '$99.99'
        };
        //Get the month and year for checking.
        var selected_month = parseInt($('.ui-datepicker-month').val()) + 1;
        var selected_year = $('.ui-datepicker-year').val();
        //Select disabled days (span) for proper indexing but // apply the rule only to enabled days(a)
        $('.ui-datepicker td &gt; *').each(function(idx, elem) {
          //Specific the target key by adding back the month and year.
          var key = ('0' + (idx + 1)).slice(-2) + '-' + ('0' + selected_month).slice(-2) + '-' + selected_year
          var value = cellContents[key] || 0;
  
          // dynamically create a css rule to add the contents //with the :after                         
          //             selector so we don't break the datepicker //functionality 
          var className = 'datepicker-content-' + CryptoJS.MD5(value).toString();
  
  
          if (value == 0)
            this.addCSSRule('.ui-datepicker td a.' + className + ':after {content: "\\a0";}'); //&amp;nbsp;
          else
            this.addCSSRule('.ui-datepicker td a.' + className + ':after {content: "' + value + '";}');
  
          $(this).addClass(className);
  
  
        });
      }, 0);
    }
     dynamicCSSRules = [];
  
     addCSSRule(rule) {
      if ($.inArray(rule,this.dynamicCSSRules) == -1) {
        $('head').append('&lt;style&gt;' + rule + '&lt;/style&gt;');
        this.dynamicCSSRules.push(rule);
  
      }
    }
  
  </code></pre>
  
  <p>Update method is used to display some content on calendar cell based on date. 
  Also imported the below script file and css file in index.html</p>
  
  <pre><code> &lt;script src="./assets/jquery-ui.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet"  href="./assets/jquery-ui.css"&gt;
  </code></pre>
  
  <p>Getting the following error</p>
  
  <pre><code>ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_0__(...).datepicker is not a function
      at CalendarComponent.ngOnInit (calendar.component.ts:16)
      at checkAndUpdateDirectiveInline (core.js:33353)
      at checkAndUpdateNodeInline (core.js:46284)
      at checkAndUpdateNode (core.js:46223)
      at debugCheckAndUpdateNode (core.js:47246)
      at debugCheckDirectivesFn (core.js:47189)
      at Object.updateDirectives (calendar.component.html:1)
      at Object.debugUpdateDirectives [as updateDirectives] (core.js:47177)
      at checkAndUpdateView (core.js:46188)
      at callViewAction (core.js:46554)
  </code></pre>
  
  <p>Please anyone suggest me how to use Jquery datepicker in angular or any another way on how to add extra text to calendar cell based on date...</p>
  
  <p>Thanks in Advance!!!</p>