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 AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay