i wish to get the date in the format yyyy/MM/dd
but it doesn't seem to work when i console.log the value
<DatePicker dateFormat='dd/MM/yyyy' selected={startDate} onChange={(date)=>{
setStartDate(date)
console.log(startDate)
}}/>
i get the following format
Fri Dec 31 2021 18:10:31 GMT+0530 (India Standard Time)
i will want in the form yyyy-mm-dd to finally insert the date into a sql table
i can see that format in the date-picker component but when console.log then it shows a different format or it will be useful even if it possible to get the value shown directly like e.target.value
The dateFormat prop controls how the date is displayed in the input field next to the date picker.
The actual value of the date picker will still be a Date object.
There are various ways of getting only the date (in a specific format) form this date.
I would suggest applying one of these for example (.toLocaleDateString()) before you send it to your api/server.
Keep in mind that .toLocaleDateString() also allows you to pass the locales, and or any options like a timezone, or a format which you might want to specify. See the documentation here for more examples.
Related
I am using in the React. This defines a date picker. This date picker is working in my components. Now my problem is how to separate time and date into two different input types?
For example datetime-local show the date picker below:
But now I want to separate the date and time into 2 input types.
For example, I want to show the only date in the input type like below:
For example, I want to show the only time in the input type like below:
This one is my existing coding show the datetime picker in the react:
<Form.Control
type="datetime-local"
name="appointmentDate"
value={selectedDate}
min={newDateValue}
onChange={(e) => handleDateChange(e.target.value)}
format={SAASDateTimeFormat}
/>
Reasons:
Why do I want to use the datetime-local input type to separate time and date? Because I want to standardize to the same UI for all Date & Time on the webpage, some pages use dateime-local input type to show the date picker with time, some pages only use time input type, some pages only use date input. So I want to try to use datetime-local type to separate date and time.
May I know if is it possible to separate date and time in the datetime-local type? Hope someone can guide me on how to solve these problems. Thanks.
You can just define the date and time in your input type.
For example:
Time-
type="time"
Date-
type="date"
I am using Ant Design (3.x) in my react application. It's a timezone based application. we have timezone list as dropdown in the top bar. when we select any timezone, all the date and time fields ( Table column data, Tooltip, summary data, etc...) in the app are changing accordingly.
HKT Time:
IST Time:
But, Inputting date and time in DatePicker is not changing based on Timezone
HKT Time:
IST Time:
It is only taking the computer's timezone (My guess). I am using moment timezone package for converting date and time based on Timezone. This package only antd is using.
Try setting/updating the timezone upon drop-down value change with moment-timezone (call the setDefault with specific timezone value upon drop-down change). For example,
moment.tz.setDefault("America/New_York");
Ant design DatePicker is picking the timezone as per moment.tz.setDefault - CodeSandbox example for the same
For additional information on default timezone check the official docs
With dayjs the accepted solution didn't work for us. We wanted our date to be displayed in UTC and ended up making a custom format like
format={date => date.utc().format("MMM DD, YYYY HH:mm:ss")}
You could do something similar with a timezone like
format={date => date.tz("America/Los_Angeles").format("MMM DD, YYYY HH:mm:ss")}
Note: you will need to add the utc and timezone plugins
import utc = from 'dayjs/plugin/utc';
import timezone = from 'dayjs/plugin/timezone';
dayjs.extend(utc)
dayjs.extend(timezone)
I am trying to display initial values on my redux form when it first load. Every fields work except the date input field. I tried to use moment to format string (YYYYMMDD) to MM/DD/YYYY and it's not working. No matter how I formatted, the field fail to display and instead showing the default place holder character mm/dd/yyyy until I selected a date. I am using the default redux-form input component date type. How should I do this right? Appreciate for any help.
When you are setting the initial date in your state, you need to provide it as per ISO-8601 standards, so YYYY-MM-DD, i.e. 2018-08-22 for 22nd August 2018.
I have never used redux-form library before, but I found a codesandbox example in their guide, and managed to get it to work here by just relying on them having followed the ISO standard. Feel free to play around with it.
I am using this calendar https://github.com/mattlewis92/angular-bootstrap-calendar for showing events and time slots for people all over the world. During sign up, every user has to set his timezone and then my application uses this timezone for further date computation rather than client machine timezone.
The problem is that when I make user timezone default using moment.tz.setDefault(timezone) and change the machine's timezone, the calendar calculates dates wrongly.
Here is my excerpt of my code:
moment.tz.setDefault($rootScope.timezone)
vm.calendarView = 'month';
vm.viewDate = moment().startOf('month').toDate();
vm.cellIsOpen = true;
Attached is the screenshot:
[Screenshot]
You can see that user's timezone is currently Asia/Karachi +5 and my machine's timezone is Beijing +8. Today's date is 8 September and the day is Friday, but on the calendar 8 September is showing as a Saturday instead of Friday.
mwl-calander did not provide support for timezone, you can use full calander
https://fullcalendar.io/
Demo https://fullcalendar.io/js/fullcalendar-2.9.1/demos/timezones.html
Its angular directive can be found at
https://github.com/angular-ui/ui-calendar
It would appear that this particular UI control does not support selecting a time zone. Simply using moment.tz.setDefault is not good enough, because everything the control is doing both internally and in its external API is using Date objects, which cannot represent arbitrary time zones. In other words, the author of that control would have to remove all .toDate() calls and use Moment objects as the primitive in the control instead of Date objects. That would be a breaking change for them.
I suggest filing an issue in that project's GitHub repository, and reference this page.
Given a ui control that when you select 01/01/2017 it returns a Javascript date as "Sun Jan 01 2017 05:00:00 GMT+0000" (note, an actual Javascript Date object) so its not a string...
However, I definitely need the date part (01/01/2017) and "as UTC"
C# has a DateTime.SpecifyKind(datetimevalue, DateTimeKind kind) method
Basically whats the equivalent to this that doesnt convert it:
moment(vm.theDate).specifyKind(utc)
Looking for to get a moment instance that is 01/01/2017, isUtc=true, from that type of Javascript Date UI control. (Its the Angular ui-datepicker control)
You should look in the UI control's docs for a way to retrieve the selected value as a string instead of a date object. A date object will be influenced by the local time zone, which will throw off your results - especially around DST transitions. Many good datepicker controls will offer this as a separate property (ex, theControl.value or theControl.text instead of theControl.date). Without knowing the specific control you are using, I can't offer anything more specific.
Once you have the string, use moment.utc(yourInputString, yourInputFormat)