Diferencia entre revisiones de «Fecha Actual y Hora»

De enunpimpam
Saltar a: navegación, buscar
Línea 83: Línea 83:
 
         <p>
 
         <p>
 
           { this.state.currentYear }
 
           { this.state.currentYear }
 +
        </p>
 +
      </div>
 +
    );
 +
  }
 +
}
 +
render(<App />, document.getElementById('root'));</syntaxhighlight>
 +
 +
=Hora Actual=<syntaxhighlight lang="js">
 +
import React, { Component } from 'react';
 +
import { render } from 'react-dom';
 +
class App extends Component {
 +
  constructor() {
 +
    var today = new Date(),
 +
    time = today.getHours() + ':' + today.getMinutes() + ':' + today.getSeconds();
 +
    this.state = {
 +
      currentTime: time
 +
    }
 +
  }
 +
  render() {
 +
    return (
 +
      <div>
 +
        <p>
 +
          { this.state.currentTime }
 
         </p>
 
         </p>
 
       </div>
 
       </div>

Revisión del 15:14 19 ago 2020

Saber la fecha actual y la hora, pasarla por el estado y asignarla.

Fecha Actual

import React, { Component } from 'react';
import { render } from 'react-dom';
class App extends Component {
  constructor() {
   this.state = {
     currentDateTime: Date().toLocaleString()
    }
  }
  render() {
    return (
      <div>
        <p>
          { this.state.currentDateTime }
        </p>
      </div>
    );
  }
}
render(<App />, document.getElementById('root'));

Fecha Actual Y-m-d

import React, { Component } from 'react';

import { render } from 'react-dom';
class App extends Component {
  constructor() {
    var today = new Date(),
    date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
    this.state = {
      currentDate: date
    }
  }
  render() {
    return (
      <div>
        <p>
          { this.state.currentDate }
        </p>
      </div>
    );
  }
}
render(<App />, document.getElementById('root'));

Mes Actual

import React, { Component } from 'react';
import { render } from 'react-dom';
class App extends Component {
  constructor() {
    this.state = {
     currentMonth: new Date().getMonth()
    }
  }
  render() {
    return (
      <div>
       <p>
          { this.state.currentMonth }
        </p>
      </div>
    );
  }
}
render(<App />, document.getElementById('root'));

Año Actual

import React, { Component } from 'react';
import { render } from 'react-dom';
class App extends Component {
  constructor() {
    this.state = {
      currentYear: new Date().getFullYear()
    }
  }
  render() {
    return (
      <div>
        <p>
          { this.state.currentYear }
        </p>
      </div>
    );
  }
}
render(<App />, document.getElementById('root'));

=Hora Actual=

import React, { Component } from 'react';
import { render } from 'react-dom';
class App extends Component {
  constructor() {
    var today = new Date(),
    time = today.getHours() + ':' + today.getMinutes() + ':' + today.getSeconds();
    this.state = {
      currentTime: time
    }
  }
  render() {
    return (
      <div>
        <p>
          { this.state.currentTime }
        </p>
      </div>
    );
  }
}
render(<App />, document.getElementById('root'));