DEV Community

vidvatek
vidvatek

Posted on • Originally published at vidvatek.com

2

How to Add Days in Date in React Native Calendar

Hey developers! Ever wondered how to manipulate dates in a React Native calendar? In this guide, we'll explore the step-by-step process of adding days to a date. Get ready to elevate your app's date-handling capabilities!

In this article, we'll learn about adding days to date in react native using moment js. In the moment js calendar, you can add a custom day to date in react native.

So, let's see how to create a custom calendar in react native, react native adds days to the calendar.

Here's a step-by-step guide on how to add days to a date in a React Native calendar:

Step 1: Set Up Your React Native Project

Ensure that you have a React Native project set up. You can use Expo or React Native CLI for this.

expo init MomentJSCalendar
cd MomentJSCalendar
Enter fullscreen mode Exit fullscreen mode

Step 2: Install Moment.js

Install Moment.js using:

npm install moment
Enter fullscreen mode Exit fullscreen mode

Step 3: Add a Date Manipulation Function in App.js

Add a function to manipulate the date by adding days.

import React,{useState} from 'react';
import { StyleSheet, Text, View} from 'react-native';
import moment from 'moment'

export default function App() {
    return (
      <View style={styles.container}>
        <Text style={styles.date}>{moment().add(1, 'days').calendar() }</Text>
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },

  text: {
    fontSize: 24,
  },

  date: {
    fontSize: 24,
    fontWeight: 'bold',
    padding: 15
  }

});
Enter fullscreen mode Exit fullscreen mode

Step 4: Run Your Expo App

Run your Expo app using:

expo start
Enter fullscreen mode Exit fullscreen mode

Conclusion:

And there you have it! Adding days to a date in your React Native calendar is a breeze. Now, you learn about how to add days to date in the moment js calendar in React JS.

Keep coding, and may your calendars always stay up-to-date and user-friendly!


You might also like:

Read Also: How to Create Moment JS Calendar in React Native

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay