Gecko [ gandhischool.edu.np ]

Name	Size	Permission
Calendar.tsx	1.53 KB	-rw-rw-r--
ReactSelect.tsx	1.63 KB	-rw-rw-r--
index.ts	59 B	-rw-rw-r--

Code Editor : Calendar.tsx

import React = require('react');
import DatePicker, { ReactDatePickerProps } from 'react-datepicker';
import { BiCalendar } from 'react-icons/bi';

interface Props {
  containerclassname?: string;
  label?: string;
  showIcon?: boolean;
  containerstyle?: React.CSSProperties;
}

const handleDateChangeRaw = (e: any) => {
  e.preventDefault();
};

const Calendar = (props: Props & ReactDatePickerProps) => {
  const { containerclassname, label, showIcon, containerstyle } = props;
  return (
    <div className="d-inline-flex flex-column pb-3">
      {label && (
        <label className="text-capitalize font-weight-bold">{label}</label>
      )}
      <div
        style={containerstyle}
        className={containerclassname ?? 'input-group calender-wrap'}
      >
        {/* <div style={{
                    whiteSpace: "nowrap", display: "flex", alignItems: "center",
                    color: "#D52933",
                    fontWeight: "bold",
                    marginLeft: "10px"
                }}

>As on</div> */}
        <DatePicker
          className="form-control  rounded-0"
          autoComplete="off"
          onChangeRaw={handleDateChangeRaw}
          {...props}
        />

<div className="input-group-append">
          <div className="bg-primary rounded-0 text-white border-primary input-group-text">
            {' '}
            {showIcon && <BiCalendar className="text-white" />}
          </div>
        </div>
      </div>
    </div>
  );
};

Calendar.defaultProps = {
  showIcon: true,
};

export { Calendar };

${this.title}

Code Editor : Calendar.tsx