CODEWITHSUNDEEP
javascriptreactjsdatepickerantd
Asking
Asking

Reputation: 4192

Get all days before today

I try to implement range picker from ant design in my react application. Also i use momentjs.

 <RangePicker
      dateRender={current => {
        const allDays = moment(current).format("DD-MM-YYYY");

        const style = {};
        if (moment(todayDate).isAfter(allDays)) {
          style.border = "1px solid #1890ff";
          style.borderRadius = "50%";
          style.background = "red";
        }
        return (
          <div className="ant-picker-cell-inner" style={style}>
            {current.date()}
          </div>
        );
      }}
    />
  </>,

Above i try to add styles for these days that are before today, but i get the result and for the next month (red bullets also are used for July), but my expectation is to add styles just for the days before today's day from June, so background red should be used just for all months till 8 June.
How to solve this issue?
demo: https://codesandbox.io/s/wild-fire-xki5j?file=/index.js:288-762

Upvotes: 0

Views: 101

Answers (2)

Jadli
Jadli

Reputation: 860

enter image description here

@dmitro Alreday given answer, but you can also try this checkDate function you just need to pass date in string formate

 let checkDate=function(allDates){
              let result=false;
              var dateParts = allDates.split("-");
              var dateObject = new Date(
                +dateParts[2],
                dateParts[1] - 1,
                +dateParts[0]
              );
              result=  new Date(dateObject) < new Date(new Date().toDateString())
              return result
            }

Upvotes: 0

Dmitro Borchuk
Dmitro Borchuk

Reputation: 86

I have removed the .format() and it works

const todayDate = moment();

ReactDOM.render(
  <>
    <RangePicker
      dateRender={current => {
        const style = {};
        if (moment(todayDate).isAfter(current)) {
          style.border = "1px solid #1890ff";
          style.borderRadius = "50%";
          style.background = "red";
        }
        return (
          <div className="ant-picker-cell-inner" style={style}>
            {current.date()}
          </div>
        );
      }}
    />
  </>,
  document.getElementById("container")
);

Looks like you don't need to format dates for comparison.

Upvotes: 1

Related Questions