Diferencia entre revisiones de «Fecha Actual y Hora»
De enunpimpam
(Página creada con «Saber la fecha actual y la hora, pasarla por el estado y asignarla. =Fecha Actual= <syntaxhighlight lang="js"> import React, { Component } from 'react'; import { render }…») |
|||
(No se muestran 2 ediciones intermedias del mismo usuario) | |||
Línea 1: | Línea 1: | ||
+ | [[Categoría:React]] | ||
Saber la fecha actual y la hora, pasarla por el estado y asignarla. | Saber la fecha actual y la hora, pasarla por el estado y asignarla. | ||
=Fecha Actual= | =Fecha Actual= | ||
− | <syntaxhighlight lang=" | + | <syntaxhighlight lang="jsx"> |
import React, { Component } from 'react'; | import React, { Component } from 'react'; | ||
import { render } from 'react-dom'; | import { render } from 'react-dom'; | ||
Línea 15: | Línea 16: | ||
<p> | <p> | ||
{ this.state.currentDateTime } | { this.state.currentDateTime } | ||
+ | </p> | ||
+ | </div> | ||
+ | ); | ||
+ | } | ||
+ | } | ||
+ | render(<App />, document.getElementById('root'));</syntaxhighlight> | ||
+ | =Fecha Actual Y-m-d= | ||
+ | <syntaxhighlight lang="jsx"> | ||
+ | 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'));</syntaxhighlight> | ||
+ | |||
+ | =Mes Actual= | ||
+ | <syntaxhighlight lang="jsx"> | ||
+ | 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'));</syntaxhighlight> | ||
+ | |||
+ | =Año Actual= | ||
+ | <syntaxhighlight lang="jsx"> | ||
+ | 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'));</syntaxhighlight> | ||
+ | |||
+ | =Hora Actual=<syntaxhighlight lang="jsx"> | ||
+ | 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 actual del 14:51 21 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'));