Display WeekNumber inside DatePicker in Gantt filters & Dialogs

Question

Dears,How I can display week number inside datepicker in GanttI'm using the datePicker in Filter options and Add/Edit Task

Premkumar Sudalaimuthu · Answer

Hi
Ahmed ,Greetings
from syncfusion support!!!You
can display the week number in the DateTime picker using weekNumber  API in
actionComplete event. We have prepared an example sample and also shared
snippets of how to implement the API in actionComplete event.Code snippets:

actionComplete: (args:
  IActionBeginEventArgs) => {
      if (
        args.requestType ===
  'filterafteropen' &&
       
  (getValue('columnName', args) === 'StartDate' ||
         
  getValue('columnName', args) === 'EndDate')
      ) {
        getValue('filterModel',
  args).dlgDiv.querySelector(
         
  '.e-datetimepicker'
       
  ).ej2_instances[0].weekNumber = true;
      }
      if (
       
  args.requestType == 'openAddDialog' ||
       
  args.requestType == 'openEditDialog'
     
  ) {
        
        var startDate =
  (document.getElementById('FilteringStartDate') as any)
         
  .ej2_instances[0];
       
  startDate.weekNumber = true;
       
  var endDate = (document.getElementById('FilteringEndDate') as any)
         
  .ej2_instances[0];
       
  endDate.weekNumber = true;
     
  }
   
  },

Sample:
https://stackblitz.com/edit/1bw9wk-bfcqtu?file=index.ts
Regards,Premkumar
S

Ahmed · Answer

Hi Premkumar,

Thanks for your help.This solution worked with me after a little bit of customization for dialog.  if (args.requestType === 'filterafteropen' && (args.columnName === 'startDate' || args.columnName === 'endDate')) {         args.filterModel.dlgDiv.querySelector('.e-datepicker').ej2_instances[0].weekNumber = true;                args.filterModel.dlgDiv.querySelector('.e-datepicker').ej2_instances[0].weekRule = "FirstDay"; }if (args.requestType == 'openAddDialog' || args.requestType == 'openEditDialog') {        //Start Date        (document.getElementById('GanttContainerstartDate')).ej2_instances[0].weekNumber = true;         (document.getElementById('GanttContainerstartDate')).ej2_instances[0].weekRule = "FirstDay";        //End Date        (document.getElementById('GanttContainerendDate')).ej2_instances[0].weekNumber = true;        (document.getElementById('GanttContainerendDate')).ej2_instances[0].weekRule = "FirstDay"; }Regards,Ahmed

Ranjani Prabakaran · Answer

Ahmed,Thanks for letting us know that the given solution works. Please get back to us if you need any further assistance.Regards,Ranjani