how to display the selected date and time using react DateTime? - javascript

i'm using react DateTime and i want to display or at least console the selected date and time so i could save it in a database later on
the input takes today's date and current hour as a initiale value and i can console it easily, but when i select an other day an exeption shows up.
there is a useState hook that i use to initialize the date variable
const [date,setDate] = useState(new Date() )
<Datetime
isValidDate={(current)=>{
let today= new Date()
return current.isAfter(today)
}}
dateFormat="DD-MM-YYYY"
onChange={()=>setDate((e)=>e.target.value)}
value={date}>
</Datetime>

According to https://www.npmjs.com/package/react-datetime, your onChange should be:
onChange={(val) => setDate(val)}. You get a moment date as input for onChange.
Furthermore, you get an exception because your current onChange is totally invalid:
It doesn't receive an event but the actual selected moment value.
Even it it was getting an event, the e should be coming from the onChange and not from the state setter:
onChange={(e) => setDate(e.target.value)}.

Related

Get correct data from input type="date" with javascript

I'm trying to understand how to retrieve the date from an input type="date"
My HTML code is <input type="date" class="form-control" id="id_date" name="date" value="">
I have a JS that read when the input type change and print on the console the timestamp
const date_value = document.getElementById('id_date')
date_value.addEventListener('change', function (e){
console.log(e)
console.log(e.timeStamp)
var date = new Date(e.timeStamp);
})
For some reason, I can get the actual date chosen from the input form as my function returns always the 1st Jan 1970. I know that Date.now() method returns the number of milliseconds elapsed since January 1, 1970 00:00:00 UTC but the form should return the milliseconds from that date to the date I have selected but it won't-
Below is a screen of my output. How do I manage this data?
Goodday
As I can understand you just need to fetch the selected date from the input field and print it in the console.
then simply just do this...
const date_value = document.getElementById('id_date');
date_value.addEventListener('change', function (){
console.log(date_value.value);
})
Whenever the user selects a date, the function will be called and it will console the update date value from the field.
I hope this will help you, still if you have any doubt please let me know comment below.

Get day from a Date - React Native

in my program when I click on a calendar I am getting the "selectedDate" variable changed. Like if I click on 4/6/2021 the value of selectedDate = 04-06-2021, Like if I click on 14/7/2021 the value of selectedDate = 14-07-2021.
I need to get which day of the week the dates are. I am trying in this way:
<View>
<H1 color={color.white}>{days[selectedDate.getDay()]}</H1>
</View>
I need to get which day of the week is the selected date. this syntax is giving an error "Property 'getDay' does not exist on type 'string'"
Use moment https://momentjs.com/
import moment inside your file
moment().format('dddd');
this is the method to get day from a given date
you can use moment(https://momentjs.com/) for this. With the help of moment we can get date in different formats. I hope you this will help

Searching in input gives incorrect date in material date picker need to convert it into UTC

I am extending MomentDateAdapter for my requirement. When i am selecting a date from the calendar i am getting the correct output but when i manually type something in the input field i get wrong output.
For the selected date i am using _moment.utc({ year, month, date }).locale(navigator.language); to convert the selected value to UTC format but i am not sure on how to do the same when user searches in the input field.
StackBlitz.
to reproduce:
Try to select a value from calendar and see the console (notice the date is converted to UTC)
Now try to add a date manually by typing in and see the console (date is not converted to UTC).
You need to adapt your parse method call of moment to:
return moment.utc(value, parseFormat, this.locale, true);
to get utc Date from your input.
Here is your adapted Stackblitz.
The methods format and createDate are called if you set your date via picker, the parse method is called if you set it via input.

Parse date/time value from react-datetime

I'm using react-datetime to render a calendar to user for date/time selection. How can I get the parse the value stored in state and turn it into a readable date so I can render that elsewhere in my UI.
I sent date in a post request and the value looks like: 2018-10-26T18:15:47.608Z. When I try to render that time in a table it gets stripped to this value 1540577747608. I want to display the zulu time for now.
this.state = {
date: new Date()
}
dateChange = date => this.setState({ date });
render() {
return (
<div>
<label>Choose a start date/time:</label>
<Datetime
onChange={this.dateChange}
value={this.state.date}
input={false}
isValidDate={validDate}
open={true}
utc={false}
onClickDay={value => alert("day" + value + "clicked")}
/>
</div>
</div>
In a different component where I want to render the date,
the value is being retrieved from an api call and being stored
formatDate: response.data.data.date
Then, I'm rendering in a table: <td key={schedule.formatDate}>{schedule.formatDate}</td>
Date does not have easy method for time formatting.
If you want to display the UTC time - or zulu time - you must use the dedicated methods to access hours, minutes and seconds and format them manually.
For example, the following displayes the UTC hours and minutes:
`${event.getUTCHours()}h${event.getUTCMinutes()}`

Loading PrimeNG calendar (date picker) with empty date

I am using PrimeNG calendar component. Initially I want to render the date input control without any date value and just a placeholder (mm-dd-yy), also as I need date value as a string so I am specifying dataType='string'
JS:
private datePickerValue = '';
HTML
<p-calendar [(ngModel)]="datePickerValue" dateFormat="mm-dd-yy" placeholder="mm-dd-yy" dataType="string"></p-calendar>
Problem here is, if my model value (datePickerValue ) is empty string, then the datepicker simply doesn't render.
Now if I initialize model with some string date like:
private datePickerValue = '01-01-2017'; then the datepicker control will render but it will also render the given date (01-01-2017).
How to render datepicker control without any default date?
Had the same problem, however in our case the datatype is Date and using Reactive Forms.
The issue is that if the date is initialized with new Date() p-calendar will show a date. The solution was to set the null/empty date to ''.
birthdate: (data.birthdate==null ? '': new Date(data.birthdate))

Categories