I cannot for the life of me figure out how to default the time of day in DateRangePicker to 00:00:00 for start date and 23:59:59 for end date.
The time of day simply defaults to the current time on the computer, which, frankly, is rarely what the requirements for a date range are. So It's hard for me to imagine there is no way to do what I'm trying to do. Check out the screenshot:
Here I picked the date range of Apr 22 to May 4. But notice the time of day. In order to set those to 00:00:00 and 23:59:59 respectively, I have to click on those times and scroll around to pick specific time of day, which is super annoying to do every time.
The documentation says nothing about the time. Also their GitHub issues page does not address this. What am I missing here. It seems like such an obvious oversight to not allow you to set a default time of day.
You can set the default time on the calendar via defaultCalendarValue.
<DateRangePicker
format="yyyy-MM-dd HH:mm:ss"
defaultCalendarValue={[new Date('2022-02-01 00:00:00'), new Date('2022-03-01 23:59:59')]}
/>
This has also been updated in the example on the rsuite official website.
https://rsuitejs.com/components/date-range-picker/#date-time-or-time
Related
I’m trying to work with date-fns-tz in my react-based webpage and couldn’t make the following use-case to work.
I have a date input in a form that should be submitted to the backend that stores the data in local timezone.
A user in GMT+2 timezone selects 14:00 on 1/Feb/2021 in the UI, which correlates to 1612180800 timestamp (as the UI was opened in GMT+2), but it should eventually get sent to the backend as 14:00 in GMT-8, which is actually 1612216800 timestamp.
What’s the right way to get this conversion (from 1612180800 --> 1612216800 ) to work?
I tried to work with various date-fns functions, but hadn’t found the right one.
You'll need two things to make this work correctly:
An IANA time zone identifier for the intended target time zone, such as 'America/Los_Angeles', rather than just an offset from UTC.
See "Time Zone != Offset" in the timezone tag wiki.
A library that supports providing input in a specific time zone.
Since you asked about date-fns, you should consider using the date-fns-tz add-on library.
Alternatively you could use Luxon for this.
In the past I might have recommended Moment with Moment-TimeZone, but you should review Moment's project status page before choosing this option.
Sticking with date-fns and date-fns-tz, the use case you gave is the very one described in the docs for the zonedTimeToUtc function, which I'll copy here:
Say a user is asked to input the date/time and time zone of an event. A date/time picker will typically return a Date instance with the chosen date, in the user's local time zone, and a select input might provide the actual IANA time zone name.
In order to work with this info effectively it is necessary to find the equivalent UTC time:
import { zonedTimeToUtc } from 'date-fns-tz'
const date = getDatePickerValue() // e.g. 2014-06-25 10:00:00 (picked in any time zone)
const timeZone = getTimeZoneValue() // e.g. America/Los_Angeles
const utcDate = zonedTimeToUtc(date, timeZone) // In June 10am in Los Angeles is 5pm UTC
postToServer(utcDate.toISOString(), timeZone) // post 2014-06-25T17:00:00.000Z, America/Los_Angeles
In your case, the only change is that at the very end instead of calling utcDate.toISOString() you'll call utcDate.getTime().
Note that you'll still want to divide by 1000 if you intend to pass timestamps in seconds rather than the milliseconds precision offered by the Date object.
You can use 'moment' to convert timezone.
1.Create a moment with your date time, specifying that this is expressed as utc, with moment.utc()
2.convert it to your timezone with moment.tz()
For example
moment.utc(t, 'YYYY-MM-DD HH:mm:ss')
.tz("America/Chicago")
.format('l');
This should be a 2 hour 50 minute event starting at 5pm PST on a thursday evening repeating weekly. When imported into google calendar or Evolution, the first occurrence is correct, but subsequent weeks have the event on Wednesdays.
DTSTART:20170908T000000Z
DTEND:20170908T025000Z
RRULE:FREQ=WEEKLY;UNTIL=20171201T080000Z;BYDAY=TH
Other events that my application generate occur on multiple days i.e. BYDAY=TH,TU so simply removing the BYDAY is not a solution for my problem.
You are mixing up the timezone of the event and the display timezone. As far as recurrence calculation goes, the only thing that counts is the timezone that you declare in the VEVENT. Here you are using UTC. So:
The first instance is on the 20170908 which is a Friday. From there, you ask for a recurrence every thursday. The next thursday after 20170908 is 20170914, so the next instance starts on 20170914T000000Z.
When viewed with a display timezone of PST, this event has indeed its first instance on Thursday evening. But the second instance, as calculated above, is on a Thursday UTC time, so on a Wednesday PST time.
Besides this particular issue, you also need to worry about daylight saving changes. If your event is really taking place in PST timezone, the event, as expressed above will see its time change in November, after the DST transition takes place.
Hence it is almost never a good idea to express a recurring event by using UTC (Zulu) time.
You should have your event expressed in local time with timezone, i.e. use:
DTSTART;TZID="America/Los_Angeles":20170907T170000
Is there some way to find out what is the time zone of a user, in UTC format(like UTC+1, UTC+2,...etc)
What I am trying to accomplish is that after user selects UTC time zone from drop down and selects time and date, I want to show date and time values in his time zone (time zone from browser or system).
So if for example user selects: UTC+2 and 13:00 11-03-2016 and his system time zone is UTC than I want to show in some label: In your time that is: 11:00 11-03-2016 (since the UTC is minus 2 hours comparing to UTC+2)
Does somebody has suggestions on how to accomplish something like this?
Just create new Date object without specifying the time zone - JavaScript will use the browser's time zone and when getting a date, without specifying the time zone, the result is converted to the browser's time zone.
Please review examples on http://www.w3schools.com/js/js_dates.asp
Hope it will help. Handling dates in js and angular is a bit tricky;)
I am working with getting previous date for various time zone based on the current date.Right now in my code, I got the US current time in milli seconds and then setting the time which in another Calendar object.
Then I am modifying that Calendar object Date with negative values to get previous dates.
When I checked, Calendar object is returning different values than the values which I set.May be I did not understand how Calendar object works.
Please explain why the time is different.
Below code gets the current time in US
Timestamp currTimeInGMT = DateTimeUtils.getCurrentTimeInGMT();
Timestamp currTime = DateTimeUtils.convertDateTime(currTimeInGMT,TimeZone.getTimeZone("GMT"),TimeZone.getTimeZone("PST"));
Using the above code, I am getting Current US time as September 18 1.12 AM Then I am converting the time into milli seconds using this code
Long currentTimeInLong = currTime.getTime();
Then I am setting the above time in Calendar object
Calendar yesterdayCal = Calendar.getInstance(TimeZone.getTimeZone("PST"));
yesterdayCal.setTimeInMillis(timeInMillis);
After setting the time,
First I tried to get time from Calendar object using yesterdayCal.getTime(), I am getting September 18 1.12 AM
Then I tried to get Date, Hour, Minute using below code
Date=yesterdayCal.get(Calendar.DATE)
Hour=yesterdayCal.get(Calendar.HOUR)
Minute=yesterdayCal.get(Calendar.MINUTE)
I am getting the following results.
Date=17, Hour=12, Minute=42
Why I am getting two different results for two methods getTime() and get().
As #mwe answered, if it sets the time in UTC, then I should get the same time for both the methods even if its wrong time.
Please explain clearly, as I am really confused with these methods
If you use setTimeInMillis it sets the time in UTC.
So you have to add the time difference to you time zone, PST, to the long value.
yesterdayCal.setTimeInMillis(timeInMillis+8000l);
I am using angular-strap to save date and time for a project, but the time being displayed is not the same time being saved. I can not find any information anywhere on fixing this issue. Has anyone else had this problem?!
Screen shot of data
The value 2015-04-21T09:00:00.000Z means we are talking about the specific point in time described as "The 21. of April in the year 2015, at 9 o'clock UTC". That is, it includes a time zone denoted by the trailing Z. The timepicker you use automatically presents that value to the user, the exact same point in time, but takes the time zone his system is set to into account.
TL;DR The value is correct. Use this value for calculations and store this value in your database. Whenever you present this value to a user, convert it to his time zone.