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)) {


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

<View style={styles.container}>

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

return (
onPress={() => {
this.ClickDay(fromated); ///Click day function will receive formatted date
key={i + "key"}


style={[styles.container1, (selectedDate == fromated) ? styles.clickedContainer : {}]}>




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


Popular posts from this blog

Handling undefined variables in laravel

How to use Spatie packages to enhance your Laravel development experience

Some Briefs of Data Mining