How to display the date in the correct format and sort by month???

Question

React Native

Good day!
I have such a task. I have a list of holidays and related categories of postcards (their id from the uCoz website)
It is necessary to display the date of the holiday not in the original format 12/31/2019, but December 31
And sort it, i.e. the user selects the month through the Picker and displays everything holidays for this month
In a React Native application, I created a calendarItem.js component
And I don’t know how to display the date in the format as above and sort

Server response example:

{
  "calendar": [
    {
      "category_info": {
        "id": 98,
        "name": "День Знаний",
        "image_url": "https://pozdravka.com/_ph/98/1/688564133.jpg"
      },
      "data": "01.09.2019"
    },
    {
      "category_info": {
        "id": 99,
        "name": "День нефтяника",
        "image_url": "https://pozdravka.com/_ph/206/1/655407025.jpg"
      },
      "data": "01.09.2019"
    },
    {
      "category_info": {
        "id": 91,
        "name": "Выходные"
      },
      "data": "01.09.2019",
      "image_url": "https://pozdravka.com/_ph/91/1/805473684.jpg"
    },
    {
      "category_info": {
        "id": 15,
        "name": "Пятница"
      },
      "data": "06.09.2019",
      "image_url": "https://pozdravka.com/_ph/15/1/908162079.jpg"
    },
    {
      "category_info": {
        "id": 208,
        "name": "День танкиска"
      },
      "data": "08.09.2019",
      "image_url": "https://pozdravka.com/_ph/208/1/267800162.jpg"
    },
    {
      "category_info": {
        "id": 103,
        "name": "День смайлика"
      },
      "data": "19.09.2019",
      "image_url": "https://pozdravka.com/_ph/103/1/201618409.jpg"
    },
    {
      "category_info": {
        "id": 98,
        "name": "День Знаний"
      },
      "data": "20.09.2019",
      "image_url": "https://pozdravka.com/_ph/98/1/688564133.jpg"
    },
    {
      "category_info": {
        "id": 99,
        "name": "День нефтяника"
      },
      "data": "21.09.2019",
      "image_url": "https://pozdravka.com/_ph/206/1/655407025.jpg"
    },
    {
      "category_info": {
        "id": 91,
        "name": "Выходные"
      },
      "data": "22.09.2019",
      "image_url": "https://pozdravka.com/_ph/91/1/805473684.jpg"
    },
    {
      "category_info": {
        "id": 15,
        "name": "Пятница"
      },
      "data": "23.09.2019",
      "image_url": "https://pozdravka.com/_ph/15/1/908162079.jpg"
    },
    {
      "category_info": {
        "id": 208,
        "name": "День танкиска"
      },
      "data": "24.09.2019",
      "image_url": "https://pozdravka.com/_ph/208/1/267800162.jpg"
    },
    {
      "category_info": {
        "id": 103,
        "name": "День смайлика"
      },
      "data": "28.09.2019",
      "image_url": "https://pozdravka.com/_ph/103/1/201618409.jpg"
    },
    {
      "category_info": {
        "id": 98,
        "name": "День Знаний"
      },
      "data": "01.10.2019",
      "image_url": "https://pozdravka.com/_ph/98/1/688564133.jpg"
    },
    {
      "category_info": {
        "id": 99,
        "name": "День нефтяника"
      },
      "data": "02.10.2019",
      "image_url": "https://pozdravka.com/_ph/206/1/655407025.jpg"
    },
    {
      "category_info": {
        "id": 91,
        "name": "Выходные"
      },
      "data": "10.10.2019",
      "image_url": "https://pozdravka.com/_ph/91/1/805473684.jpg"
    },
    {
      "category_info": {
        "id": 15,
        "name": "Пятница"
      },
      "data": "11.10.2019",
      "image_url": "https://pozdravka.com/_ph/15/1/908162079.jpg"
    },
    {
      "category_info": {
        "id": 208,
        "name": "День танкиска"
      },
      "data": "12.10.2019",
      "image_url": "https://pozdravka.com/_ph/208/1/267800162.jpg"
    },
    {
      "category_info": {
        "id": 103,
        "name": "День смайлика"
      },
      "data": "15.10.2019",
      "image_url": "https://pozdravka.com/_ph/103/1/201618409.jpg"
    },
    {
      "category_info": {
        "id": 98,
        "name": "День Знаний"
      },
      "data": "05.11.2019",
      "image_url": "https://pozdravka.com/_ph/98/1/688564133.jpg"
    },
    {
      "category_info": {
        "id": 99,
        "name": "День нефтяника"
      },
      "data": "07.11.2019",
      "image_url": "https://pozdravka.com/_ph/206/1/655407025.jpg"
    },
    {
      "category_info": {
        "id": 91,
        "name": "Выходные"
      },
      "data": "08.11.2019",
      "image_url": "https://pozdravka.com/_ph/91/1/805473684.jpg"
    },
    {
      "category_info": {
        "id": 15,
        "name": "Пятница"
      },
      "data": "10.11.2019",
      "image_url": "https://pozdravka.com/_ph/15/1/908162079.jpg"
    },
    {
      "category_info": {
        "id": 208,
        "name": "День танкиска"
      },
      "data": "12.11.2019",
      "image_url": "https://pozdravka.com/_ph/208/1/267800162.jpg"
    },
    {
      "category_info": {
        "id": 103,
        "name": "День смайлика"
      },
      "data": "18.11.2019",
      "image_url": "https://pozdravka.com/_ph/103/1/201618409.jpg"
    }
  ]
}

Код скрина:

import React from 'react'
import { StyleSheet, View, ScrollView, Picker, Text, TouchableOpacity } from 'react-native'
import { Header, CalendarItem } from '../uikit'

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
    width: '100%'
  },

  sortListContainer: {
    backgroundColor: '#fff',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
    flexDirection: 'column',
    width: '90%',
    borderWidth: 1,
    borderColor: '#f2f2f2',
    borderStyle: 'solid',
    marginLeft: '5%',
  },

  sortListContainerTitle: {
    backgroundColor: '#fff',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
    flexDirection: 'column',
    width: '90%',
    marginLeft: '5%',
    marginBottom: '2.5%',
    marginTop: '2.5%'
  },

  sortList: {
    width: '100%',
    height: 64,
    color: '#333',
    fontSize: 16,
    fontWeight: '100'
  },

  sortListTitle: {
    color: '#333',
    fontSize: 16,
    fontWeight: '100'
  }
})

const url = 'https://pozdravka.com/ap/calendar.json'

export default class CalendarScreen extends React.Component {

state = {
  title: 'Праздники',
  mount: 0,
  isFetch: true,
  data: []
}

componentDidMount = () => {
  try {
    this.setState({ isFetch: false })
    return fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({ data: responseJson, isFetch: true })
    })
    .catch((error) =>{
      console.error(error);
    });
  } catch (e) {
    throw e
  }
}

render () {
  const { title, data, isFetch } = this.state
  const { container, sortListContainer, sortList, sortListTitle, sortListContainerTitle } = styles
  const mounts = [{
      name: 'Январь',
      calendar_num: 1
    },
    {
      name: 'Февраль',
      calendar_num: 2
    },
    {
      name: 'Март',
      calendar_num: 3
    },
    {
      name: 'Апрель',
      calendar_num: 4
    },
    {
      name: 'Май',
      calendar_num: 5
    },
    {
      name: 'Июнь',
      calendar_num: 6
    },
    {
      name: 'Июль',
      calendar_num: 7
    },
    {
      name: 'Август',
      calendar_num: 8
    },
    {
      name: 'Сентябрь',
      calendar_num: 9
    },
    {
      name: 'Октябрь',
      calendar_num: 10
    },
    {
      name: 'Ноябрь',
      calendar_num: 11
    },
    {
      name: 'Декабрь',
      calendar_num: 12
    }]

  return (
    <View style={container}>
      <Header title={title} />
      <View style={sortListContainerTitle}>
        <Text style={sortListTitle}>Выберите месяц:</Text>
      </View>
      <View style={sortListContainer}>
        <Picker style={sortList}
        selectedValue={this.state.mount}
        onValueChange={(itemValue, itemIndex) =>
          this.setState({ mount: itemValue })
        }
        >
          {mounts.map((mount, key) => (
            <Picker.Item label={mount.name} value={mount.calendar_num} key={key} />
          ))}
        </Picker>
      </View>
      <ScrollView>
        {data.calendar&&data.calendar.map((calendar, key) => {
          const { name, id } = calendar.category_info
          const { image_url } = calendar

          return (<TouchableOpacity onPress={() => alert('hi')} key={key}>
            <CalendarItem name={name} id={id} uri={image_url} date={calendar.data} />
          </TouchableOpacity>)
        })}
      </ScrollView>
    </View>
  )
}

}

Component code:

import React, { Component } from 'react'
import { StyleSheet, Text, View, Image } from 'react-native'

const styles = StyleSheet.create({
  calendarContainer: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row',
    width: '100%',
    padding: 12.5,
    backgroundColor: '#fff',
    borderTopWidth: 1,
    borderTopColor: '#f2f2f2',
    borderStyle: 'solid'
  },

  calendarName: {
    color: '#333',
    fontSize: 22,
    fontWeight: '800'
  }
})

const CalendarItem = props => {
  const { calendarContainer, calendarName, calendarCover, calendarItemContainer, calendarData } = styles
  const { name, uri, date } = props

  return(
    <View style={calendarContainer}>
      <Text style={calendarData}>{Date(date).getMonth ()}</Text>
      <View style={calendarItemContainer}>
        <Image source={{ uri: uri }} style={calendarCover} /><Text style={calendarName}>{name}</Text>
      </View>
    </View>
  )
}

export { CalendarItem }

Please help if you can, thanks in advance!

Answer 1

the user selects a month through the Picker and displays all the holidays for this month

const findByMonth = m => {
  return data.calendar.filter(item => {
    const month = +item.data.split(".")[1]
    return month === m
  })
}

findByMonth(11)
// (6) [{…}, {…}, {…}, {…}, {…}, {…}]