Displaying DatePicker Selected Value as a Chip in Syncfusion React Datepicker

This article will guide you through the process of displaying the selected date from a DatePicker as a chip using React.
Integrating a DatePicker component with a Chip component can enhance the user interface by providing a clear and interactive way to display selected dates.

Opening Popup via DateIcon Click

To achieve this functionality, you will need to use the DatePickerComponent and ChipListComponent from a UI library by Syncfusion. Below is the code snippet that demonstrates how to set up these components:

// index.js


  const Change = (args) => {
    const newDate = args.value.toLocaleDateString();
    setChipValue(newDate);
    chipListRef.current.text = newDate;
    chipListRef.current.dataBind();
  };


  <ChipListComponent
    ref={chipListRef}
    text={ChipValue}
  ></ChipListComponent>
 

  <DatePickerComponent
    ref={dateRef}
    value={dateValue}
    change={Change}
    width="250px"
    showClearButton={false}
  ></DatePickerComponent>
   

/* index.css */

.datepicker-control-section {
  display: flex;
  align-items: center;
}

Sample

You can explore the functionality of these components and see the implementation in action through the provided sample:

Click on DateIcon to Open the Popup Sample: Sample

Opening Popup via Chip Click

To further improve the user experience, you can allow users to open the DatePicker popup by clicking on the chip itself. Here’s how you can implement this enhancement:

// index.js


const ClickHandler = (args) => {
  if (dateRef.current) {
    dateRef.current.show();
  }
};


<ChipListComponent
  ref={chipListRef}
  text={ChipValue}
  beforeClick={ClickHandler}
></ChipListComponent>


<DatePickerComponent
 ref={dateRef}
 value={dateValue}
 change={Change}
 width="0px"
 showClearButton={false}
 ></DatePickerComponent>

/* index.css */

.e-date-icon {
  visibility: hidden !important;
}

Sample

You can explore the functionality of these components and see the implementation in action through the provided sample:

Refer to the working sample for additional details and implementation: Sample