Create Date list bar (horizontal list) in React/React Native with moment library








sometimes you may need create horizontal date list to show to user..and block required dates. i had to create date bar in my work place. so this is how i solved that using moment library .


import moment from "moment";

//run function in component did mount..
 setInitialDate() {
        const tomorrowDate = moment().add(1, 'days').format("YYYY-MM-DD");
        const todayDate = moment().format("YYYY-MM-DD");
        const todayName = moment().format('dddd');


        //TODO: get blocked dates from backend
        const blockedDays =['2020-06-04','2020-06-05','2020-06-06','2020-06-07'];
        


        let dateList = [];
        
        //if need to remove weekend day you can add like this
         //this code part using to for set 'today' date
        if ((!(todayName == 'Sunday' || todayName == 'Saturday')) && moment().isBefore(moment("17:00", 'HH:mm'))) {
            if (!blockedDays.includes(todayDate)) {
                dateList.push({ item: moment() }); 
            }

        }


        for (i = 1; i < 12; i++) {    //12 is limit. it can change to any positive int number

            const dates = { item: moment().add(i, 'days') };  
            const tmpFormated = dates.item.format('YYYY-MM-DD');
            const dayname = dates.item.format('dddd');
    

               //remove weekend days and blocked days
            if (dayname == 'Sunday' || dayname == 'Saturday'  || blockedDays.includes(tmpFormated)) {
                continue;
            }

            
            dateList.push(dates);
        }

        this.setState({ selectedDate: dateList[0].item.format("YYYY-MM-DD"), todayDate, tomorrowDate,dateList }, () => {
           //add any functions if need to run after data set to state
        });
    }


now dates are successfully stored in state.. now we need to view it in horizontal list 
here is the function to render it.(PS: i did this on react native ui/ you can easily convert it to reactJs


 showDateHeader() {

        const { tomorrowDate, todayDate, selectedDate ,dateList} = this.state;


        return (
            <View> //<div> in ract

                <ScrollView horizontal={true} //you can use suitable alternative in reactJs , i recommend slick carousel in reactJs
                showsHorizontalScrollIndicator={false}
                
                >
                    <View style={styles.container}>

                        {dateList.map(({ item }, i) => {
                            const fromated = item.format('YYYY-MM-DD');
                            let dateName = (todayDate == fromated) ? "Today" : (tomorrowDate == fromated) ? 'Tomorrow' : item.format('DD MMM');

                            return (
                                <TouchableOpacity
                                onPress={() => {
                                    this.ClickDay(fromated); ///Click day function will receive formatted date
                                }}
                                 key={i + "key"}
                                >
                                
                               <View
                                   
                                    style={[styles.container1, (selectedDate == fromated) ? styles.clickedContainer : {}]}>
                                   
                                        <Text>
                                            {dateName.toLocaleUpperCase()}
                                        </Text>
                                    
                                </View>
                            </TouchableOpacity>
                            )

                        })
                        }
                    </View>
                </ScrollView>
            </View>
        );
    }



thank you!.. please comment any of ideas and suggestions









Comments

Post a Comment

Popular posts from this blog

How to use Spatie packages to enhance your Laravel development experience

Image
Spatie is a company(https://spatie.be)  that creates open source packages for Laravel, PHP and JavaScript. Spatie packages are useful for Laravel development because they provide solutions for common problems and tasks, such as managing user permissions and roles, backing up your app, transforming data for APIs, manipulating images and more. Spatie packages are easy to use, well documented and tested. You can find a list of Spatie packages on their website or on their GitHub page also . as a laravel developer i have using their packages for various tasks and fetures, they are really useful and life saving of the developer. Some of their most popular packages are laravel-permission,activity lo, laravel-backup, laravel-medialibrary.     < 1.      Laravel-Permission   One of the essential aspects of web application development is managing user permissions and roles. Laravel-Permission is a Spatie package that simplifies this process by prov...
Read more

Handling undefined variables in laravel

Handling undefined variables in your laravel code is critically important because it can help prevent errors and improve the stability of your program. Undefined or null variables occur when you try to access a variable that has not been declared or assigned a value. If you try to use an undefined variable in your code, it can cause errors that can break your program or produce incorrect results. By handling undefined variables correctly in your laravel project, you can ensure that your program runs smoothly and produces the desired results in production. There are several ways to handle undefined variables, such as checking for their existence before using them, setting default values,  using type coercion, or using try-catch blocks to handle errors.   the try catch is a great way to achieve error handling. its better to wrap  your controller route connected methods with try-catch block. but when a handling small variable the try catch block not always great. here some...
Read more

Some Briefs of Data Mining

Image
I am currently learning data mining and I thought of sharing some interesting facts I have learned from my notes. I hope these facts will be useful for those who are interested in data mining :)                 Why data mining is required?    Data mining is required because it helps us to extract useful information and insights from large amounts of data. With the growth of technology, we are generating more data than ever before, and this data can be used to make better decisions, improve business operations, and gain a competitive advantage. Data mining techniques can help us to identify patterns, relationships, and trends in the data that may not be immediately apparent. By analyzing this data, we can gain insights into customer behavior, market trends, and other important factors that can help us to make better decisions. Data mining is used in many different fields, including finance, healthcare, m...
Read more