how to set new value in datePicker from ant-design?

Question

I want to set that the whole day is selected to block the site during work, but when it is pressed / selected day then the starOf ('day') method does not change the time to 00:00

class SomeClass extends Component {
 state = {
    valueCollections: {},
    showAndHideShowTime: true,
  };
setItem = (props) => {
    const {
      item,
      isCreate,
      type,
    } = props;
    const value = item;
    if (value) {
      const valueCollections = {
        category: value.Category,
        // alternatively, it shall cease to exist if there is a change of opinion
        // validFrom: moment(value.ValidFrom),
        // validTo: value.ValidTo !== undefined && value.ValidTo !== null
        //   ? moment(value.ValidTo)
        //   : null,
        validFrom: type.includes('view') ? moment(value.ValidFrom) : moment(new Date(), dateFormat),
        validTo: type.includes('view') ? moment(value.ValidTo) : moment(new Date(), dateFormat)
      };
      const currentCategory = this.props.modalOptions.valuesForEdit.categories.filter(el =>
        el.Value === valueCollections.category)[0];
      let newValArray =
      this.props.modalOptions.valuesForEdit.descriptions.filter(el =>
        currentCategory.Id === el.CategoryId);
      if (newValArray.length > 1) {
        newValArray = newValArray.filter(el =>
          el.DirectionId === valueCollections.direction);
      } else {
        this.setState({
          valueCollections,
        });
      }
    } else if (isCreate) {
      const valueCollections = {
        category: 1,
        validFrom: moment(new Date(), dateFormat),
        validFromStartDay: moment().startOf('date'),
        validTo: moment(new Date(), dateFormat),
        validToEndDay: moment().startOf('date')
      };
      this.setState({
        valueCollections,
      });
    }
  }
render() {

const { valueCollections } = this.state;


const dataPickerWithChangesFormatStart = (
<DatePicker
      showTime={this.state.showAndHideShowTime}
      format={correctDateFormat}
/>
);

 const startOfDayPick = (
      this.state.showAndHideShowTime === true
        ? valueCollections.validFrom : valueCollections.validFromStartDay
 );

const mappedValidFrom = () => (
      <div>
        {valueCollections.validFrom !== null
          ? (<div>
            {getFieldDecorator('ValidFrom', {
              initialValue: startOfDayPick,
            })(dataPickerWithChangesFormatStart)}
          </div>)
          : (<p>{valueIsEmpty}</p>)
        }
      </div>
    );

const handlerAllDayChecked = () => {
      this.setState({
        showAndHideShowTime: !this.state.showAndHideShowTime,
      });
    };


   }
return (
<div>
     {mappedValidFrom()}
</div>
)
}

I must to do when I click checkbox AllDay then time is change to 00:00 but when I choose some data after then click checkbox isn't working... Somebody maybe have to resolve? Help :-)

Answer 1

For 00:00 format, You have to set the DatePicker format as YYYY-MM-DD 00:00. Your code should look like this.

<DatePicker
      showTime={this.state.showAndHideShowTime}
      format={this.state.showAndHideShowTime ? 'DD/MM/YYYY 00:00' : correctDateFormat}
/>