What is the best way to reset the values in react-multiple-datepicker?

Having trouble clearing values assigned in react-multiple-datepicker library.
import MultipleDatePicker from "react-multiple-datepicker"; import React from "react";

class Addjob extends React.Component {
    constructor(props) {
        super(props);
        this.state ={
        selectedDays:[]
        };
        this.displayDates=this.displayDates.bind(this);
    }

    displayDates(dates) {
        console.log("selected dates:"+ dates);
        console.log(typeof dates);     
        dates.forEach(function(x) {
            var d = new Date(x),
            month = '' + (d.getMonth() + 1),
            day = '' + d.getDate(),
            year = d.getFullYear();    
            if (month.length < 2) month = '0' + month;
            if (day.length < 2) day = '0' + day;
            console.log(year);
            console.log(day);
            console.log(month);
            y.push([year, month, day].join('-'));
            a=JSON.stringify(y);
            a=a.replace("[","");
            a=a.replace("]","");
            a=a.replace(/\"/g, "")  ; 
        });
        this.setState({selectedDays:a});
    }
    render() {
        return(
            <MultipleDatePicker className="multipicker" onSubmit={this.displayDates} id="multidatepicker"/>                                 
        );
    }
}

Answer №1

If you're looking for a solution, try implementing the following code snippet in your Render method:

 render() {
        return(
                <>
                    <MultipleDatePicker className="multipicker" onSubmit={this.displayDates} 
                             id="multidatepicker"/>
                    <Button onClick={(e)=>ClearDate(e)}>Clear</Button>       
                </>                 
        );
    }

Followed by this function:

ClearDate = (e) => {
   e.preventDefault();
   this.setState({selectedDays:[]});
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Choose an item from my unordered list to automatically set the value of a form input

Hello, I am looking for a way to make a long Unordered list always visible on my website. I want users to be able to click on one of the List Items and have that item appear as the value in my Form type=text. I believe using Jquery would be the best way ...

Navigate to link based on selected option in Bootstrap select menu

How can I make a page redirection based on the selected option value from a bootstrap select? Here is the HTML code: <select class="selectpicker"> <option value="https://example.com/">Home</option> <option value="https://exam ...

Guide to downloading attachments from Outlook using Node.js

When attempting to download Gmail attachments using a particular code, the process runs smoothly on Windows but encounters an error on Linux. Additionally, I am seeking guidance on how to execute a similar operation for Office Outlook, where authentication ...

Generating various header graphics through PHP's header include feature

I'm currently working on a multi-page website that utilizes a header include feature. The background image is already set within a container in the header using CSS, but now I want to have different header images for each page. Since I am still new to ...

The JS slider fails to function properly following the migration of AngularJS from version 1.0.8 to 1.2

Seeking assistance with migrating AngularJS from version 1.0.8 to 1.2 and encountering issues with a JavaScript slider that is no longer functioning post-migration... After upgrading to 1.2, added the angular-route.js library and injected 'ngRoute&ap ...

Conflict between multiple jQuery files

Currently, I am in the process of creating a test website for an upcoming project. However, I have encountered some issues with jQuery. This is a static HTML5 website that includes a social widget. The problem arises when I remove a particular jQuery lin ...

Can you identify the distinctions between these two lines?

As a beginner in React, I recently learned how to create a timer counter following a tutorial. However, I am slightly confused about the difference between these two lines of code. Can someone please explain what is occurring in the first line below? lin ...

How to dynamically load bootstrap-multiselect within a loop in a vueJs application

I am attempting to dynamically load bootstrap-multiselect in a loop using VueJs. My desired implementation looks something like this: <div class="col-xs-6 col-sm-4 mb-1" v-for="params in param"> <select class="mult" multiple="multiple"> ...

Developing React components with Typescript requires careful consideration when defining component props, especially when the component may be

Consider the following scenario: { this.props.userName && <UserProfile userName={this.props.userName} /> In the UserProfile component: interface UserProfileProps { userName: string; } class UserProfile extends React.Component<UserProfile ...

What is the best way to ensure that the width of a div fills its parent container?

I need my divs(.give, .sep, .take) to completely fill the width of its parent container (.trade). This is the HTML code: <div class="trade"> <div class="give"></div> <div class="sep"></div> ...

View the edited image preview instantly upon selecting the image

I have selected an image and previewed it before submitting the form. However, now I wish to be able to edit the file immediately after selecting it, preview the changes, and then submit the file. <input type ="file" accept="image/*" id="image" name="i ...

Dealing with Excessive Requests in a NextJS Application Routing Layout

Currently, I am developing a NextJS application with an app router that will feature a navigation component. Within this navigation, it is essential to display user information such as a username and avatar. I attempted to implement a layout file based on ...

Synchronizing Vuetify Carousel with dynamic route parameters

I'm facing an issue where the v-carousel value does not sync correctly with a route parameter using a computed property. Despite waiting for the mounted hook, the carousel seems to emit its own input and disregard the initial value from the route para ...

I am looking for guidance on how to convert a FlexDashboard file into an HTML format. Can anyone provide instructions

I recently created a FlexDashboard for someone else and they've requested it in HTML format to incorporate it into their web system like WordPress. Since I don't have access to their WordPress system, I need to provide them with an HTML file inst ...

The component next/image is experiencing issues when used in conjunction with CSS

I struggled to create a border around an image because the custom CSS I wrote was being overridden by the Image component's CSS. Despite trying to leverage Tailwind and Bootstrap to solve the problem, my efforts were unsuccessful. Now, I am at a loss ...

How to rotate a SVG transformation matrix around its center point

CSS .square { background-color: green; height: 40px; width: 40px; } JS var square = { sizeReal : { "width": 40, "height": 40 } , position : { "x": 100, "y": 100 } }; $(". ...

Managing the opening and closing of a Material UI Drawer with a single button/icon in a React Functional Component

I'm looking to create a way to control the opening and closing of the Material UI Drawer using just one button within a React Functional Component. const handleDrawerOpen = () => { setOpen(true); }; const handleDrawerClose = () => { se ...

Issue: Module '/Users/MYNAME/Desktop/Projects/MYPROJECTNAME' not found

I am currently in the process of compiling Node using TypeScript, and I'm still getting acquainted with it. An issue I encountered was that my /src files were not being updated when I made changes and restarted the server. To troubleshoot, I decided ...

Tips for creating a div that slides from the right side to the left side

I received a code from someone and I need help with making the sliding div slide from right to left. Essentially, I want the div to hide on the right side and slowly move to the left within a width of 300px. Here is the HTML code: <a id="loginPanel"&g ...

Validation of decimal numbers in JavaScript without the presence of any other characters

Looking to create a JavaScript regex to validate an 8-digit number that may include decimals. The current regex /^\d+$/ allows for any other characters such as ( , * $ etc. How can I modify this to only accept numbers and periods? For example, the nu ...