Allow Datepicker to be empty

Đang mở
  • Có gì không ổn?
#1,393 4 bình luận 7 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
42/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu từ component Datepicker và kiểm tra cách nút Clear, defaultDate và onSelectedDateChanged hiện đang xử lý các giá trị. So sánh hành vi hiện tại với trạng thái null hoặc rỗng được yêu cầu, sau đó xác minh rằng việc xóa một ngày tùy chọn tạo ra giá trị mong đợi mà không làm ảnh hưởng đến hành vi của defaultDate hoặc minDate.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Summary

Datepicker only allows to receive a valid Date but it would be really great if we could set null, "" or any kind of value that represents empty.

Context

So, i was working in specific use case where users can set a Date but this field is optional (null under the hood), so the user can also keep it empty.
When i start this i saw Clear button and i tought this was exactly what i was looking for but then i realize that this button only resets the field to defaultDate or minDate but never to "" (as native input does) or null. Since Clear button resets to defaultDate, would be great if defaultDate accepts null or even if onSeletedDateChanged could receive the current value and a second boolean prop like isClearAction so we can customize the logic.

For now, since im using React Hook Form to deal with validations, i've reached this by using the following approach:

type MyDatepickerProps = Omit<
  DatepickerProps,
  'showClearButton' | 'labelClearButton'
> & {
  onClear?: () => void;
};

const MyDatepicker = forwardRef<
  DatepickerRef,
  MyDatepickerDatepickerProps
>(({ onClear, ...rest }, ref) => {
  return (
    <div>
      <Datepicker
        ref={ref}
        {...rest}
        showClearButton={!onClear}
        labelClearButton="Reset"
      />
      {onClear && (
        <button
          onClick={onClear}
          type="button"
        >
          {/* This is just a X icon for the button */}
          <HiXCircle />
        </button>
      )}
    </div>
  );
});

And in the form (remember: im using React Hook Form):

<Controller
  control={control}
  name="my-field"
  render={({ field }) => (
    <MyDatepicker
      minDate={new Date()}
      value={field.value === null ? '' : field.value?.toDateString()}
      placeholder="Date"
      onSelectedDateChanged={field.onChange}
      onClear={() => field.onChange(null)}
    />
  )}
/>;

As you can see, im not using default onChange since it not triggers with current value. Thats why im using Controller to customize field actions.

Would be very very good to have this behavior on this component 🥺

EDIT: I've already read some issues about that but this is a feature request since it is not implemented.

Ngôn ngữ chính
TypeScript
Star
2.1k
Fork
502
Merge trung bình
19 giờ 16 phút
Pull request đã merge (30 ngày)
2

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của themesberg/flowbite-react

Tất cả issue của themesberg/flowbite-react

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.