zmp-ui/esm/components/date-picker/index.stories.js

Zalo Mini App framework

import React from "react";
import DatePicker from ".";
var meta = {
  title: "Form/DatePicker",
  component: DatePicker,
  tags: ["autodocs"],
  argTypes: {}
};
export default meta;
var label = "Ngày giao hàng";
export var Default = {
  name: "Mặc định",
  args: {
    label: label,
    placeholder: "Chọn ngày giao hàng"
  }
};
export var WithHelperText = {
  name: "Với văn bản trợ giúp",
  args: {
    label: label,
    helperText: "Vui lòng chọn ngày giao hàng hợp lệ."
  }
};
export var WithErrorText = {
  name: "Với văn bản lỗi",
  args: {
    label: label,
    status: "error",
    errorText: "Ngày giao hàng không hợp lệ."
  }
};
export var Disabled = {
  name: "Bị vô hiệu hóa",
  args: {
    label: label,
    disabled: true
  }
};
export var WithDefaultValue = {
  name: "Với giá trị mặc định",
  args: {
    label: label,
    defaultValue: new Date(2023, 0, 1)
  }
};
export var WithCustomDateFormat = {
  name: "Với định dạng ngày tùy chỉnh",
  args: {
    label: label,
    dateFormat: "MM/dd/yyyy"
  }
};
export var WithCustomColumnsFormat = {
  name: "Với định dạng cột tùy chỉnh",
  args: {
    label: label,
    columnsFormat: "YYYY-MM-DD"
  }
};
export var WithStartAndEndDate = {
  name: "Với ngày bắt đầu và kết thúc",
  args: {
    label: label,
    startDate: new Date(2023, 0, 1),
    endDate: new Date(2023, 11, 31)
  }
};
export var WithCustomDisplayFormat = {
  name: "Với định dạng hiển thị tùy chỉnh",
  args: {
    label: label,
    formatPickedValueDisplay: function formatPickedValueDisplay(date) {
      return "Ng\xE0y giao h\xE0ng: " + date.toLocaleDateString();
    }
  }
};
export var WithSuffixIcon = {
  name: "Với biểu tượng đuôi tùy chỉnh",
  args: {
    label: label,
    suffix: /*#__PURE__*/React.createElement("span", null, "\uD83D\uDCC5")
  }
};