Pada awalnya, menggunakan tanggal picker @mui/x-date-pickers 6.x telah menjadi sangat mudah. Namun, sejak berpindah ke slot, banyak contoh yang kurang. Oleh karena itu, dalam artikel ini, kita akan membahas cara mengubah icon default dan posisinya pada MUI DatePicker v6.

Mengubah Icon Default

Untuk mengubah icon default tanggal picker, Anda dapat menggunakan properti slots dan memberikan nilai sebagai objek yang berisi nama slot (inputAdornment) dan icon yang ingin digunakan.

Contoh:

<DatePicker
 slots={{
 inputAdornment: BugReportIcon
 }}
/>

Dalam contoh di atas, icon BugReportIcon akan digunakan sebagai icon default tanggal picker.

Mengubah Posisi Icon

Jika Anda ingin mengubah posisi icon tanggal picker, Anda dapat menggunakan properti slots dan memberikan nilai sebagai objek yang berisi nama slot (inputAdornment) dan properti position.

Contoh:

<DatePicker
 slots={{
 inputAdormanent: BugReportIcon,
 position: 'start'
 }}
/>

Dalam contoh di atas, icon BugReportIcon akan digunakan sebagai icon default tanggal picker dengan posisi awal.

Mengubah Icon dan Posisi

Jika Anda ingin mengubah icon dan posisinya dalam satu waktu, Anda dapat menggunakan properti slots dan memberikan nilai sebagai objek yang berisi nama slot (inputAdornment) dan properti position.

Contoh:

<DatePicker
 slots={{
 inputAdormanent: BugReportIcon,
 position: 'start'
 }}
/>

Dalam contoh di atas, icon BugReportIcon akan digunakan sebagai icon default tanggal picker dengan posisi awal.

Menggunakan Start Adornment

Jika Anda ingin menambahkan adornment ke dalam input tanggal picker, Anda dapat menggunakan properti slotProps.

Contoh:

<DatePicker
 label="Date Picker"
 slotProps={{
 textField: {
 InputProps: { startAdornment: <BugReportIcon /> }
 }
 }}
/>

Dalam contoh di atas, icon BugReportIcon akan digunakan sebagai adornment awal input tanggal picker.

Menggunakan MUI Theme

Jika Anda ingin mengubah icon default dan posisinya pada seluruh aplikasi, Anda dapat menggunakan MUI Theme. Anda dapat menambahkan properti defaultProps ke dalam objek theme untuk mengubah icon default dan posisinya.

Contoh:

import '@mui/material/styles';
import type { DatePickerProps } from '@mui/x-date-pickers';
import type { ComponentsOverrides, ComponentsVariants, Theme } from '@mui/material/styles';
import type { Dayjs } from 'dayjs';

declare module '@mui/material/styles' {

 interface ComponentNameToClassKey {
 MuiDatePicker: 'root' | 'value' | 'unit';
 }

 interface ComponentsPropsList {
 MuiDatePicker: Partial<DatePickerProps<Dayjs>>;
 }

 interface Components {
 MuiDatePicker?: {
 defaultProps?: DatePickerProps<Dayjs>;
 styleOverrides?: Partial<ComponentsOverrides<Theme>['MuiDatePicker']>,
 variants?: ComponentsVariants['MuiDatePicker'];
 }
 }
}

export const myTheme: ThemeOptions = {
 components: {
 MuiDatePicker: {
 defaultProps: {
 slotProps: {
 inputAdornment: {
 position: 'start'
 },
 openPickerButton: {
 color: 'error',
 }
 }
 }
 }
 }
}

Dalam contoh di atas, icon default tanggal picker akan digunakan dengan posisi awal.

Dalam artikel ini, kita telah membahas cara mengubah icon default dan posisinya pada MUI DatePicker v6. Kita dapat menggunakan properti slots untuk mengubah icon default, atau menggunakan MUI Theme untuk mengubah icon default dan posisinya pada seluruh aplikasi.