I've tried to find an algorithm (Salesforce, aura) but without success. Probably, you have any ideas!
I have:
attribute
<aura:attribute name="bulkApply" type="Map" default="{}"/>
datetime input:
<lightning:input label=""
class="label-hidden"
variant="label-hidden"
type="datetime-local"
value="{!v.bulkApply.SchedStartTime}"
/>
and time input:
<lightning:input type="time"
label=""
class="label-hidden"
variant="label-hidden"
name="startTimeOnly"
value="{!v.bulkApply.startTimeOnly}"
/>
This is what they look like and what I need to do:
inputs
After click the button to action replace logic I have the following values:
let startTimeOnly = cmp.get('v.bulkApply.startTimeOnly');
let schedStartTime = cmp.get('v.bulkApply.SchedStartTime');
console.log(startTimeOnly); //00:30:00.000
console.log(schedStartTime);//2023-02-08T13:00:00.000Z
//here should be algorithm
The main problem is that I have time value with applied user timezone and datatime value in UTC format. Salesforce User timezone is Australia (GMT+11). That is why I have 2023-02-08T13:00:00.000Z instead of 9 Feb, 00:00.
Please note, that browser timezone can be differ from salesforce user timezone.
Related
I seem to be having a bit of a weird bug wherein as the title states, MomentJS is providing a time that is an hour behind. This is my code so far:
import { AdapterMoment } from "#mui/x-date-pickers/AdapterMoment";
import moment from "moment";
...
const [job, setJob] = useState({
name: "",
outgoingDateTime: moment.now(),
jobStartDateTime: moment.now(),
returningDateTime: moment.now(),
jobFinishDateTime: moment.now(),
isJobStartLinked: jobStartLinked,
isJobFinishLinked: jobFinishLinked,
contact: null,
});
const handleOutgoingDateTimeChange = (newValue) => { setJob({...job, outgoingDateTime: newValue}); }
With the above code, when I trigger the DateTimePicker to be displayed, it displays the correct time. For example, if I trigger it on 19/09/2022 at 23:45, it will display 19/09/2022 23:45.
This is what I'm using to display this:
<LocalizationProvider dateAdapter={AdapterMoment}>
<DateTimePicker
label="Outgoing Date and Time"
value={job.outgoingDateTime}
onChange={handleOutgoingDateTimeChange}
inputFormat="DD/MM/YYYY HH:mm"
ampm={false}
renderInput={(params) => <TextField {...params} />} />
</LocalizationProvider>
Might I also add that when I change the value of the DateTimePicker, it correctly states the input. For example, let's say I input 25/09/2022 07:30. It would display 25/09/2022 07:30.
Now, when I then tap save, the returned value is an hour behind. So, for example, let's take what I entered just now 25/09/2022 07:30. It would come back as 25/09/2022 06:30.
I'm checking my back end to see if that was the issue, however, upon doing so, I could see that the front end is passing along the hour behind data.
What could be happening and how could I fix this?
So, after looking into this a little further, I found that my back end was using LocalDateTime which, living in the UK is bad... Bad because LocalDateTime is not Daylight Saving aware. After changing the variables to ZonedDateTime (which is DST aware) and zoning it in to Europe/London, it now saves to the database properly.
I've created a form the user fills out, and then can update. When the form renders to update, the date that is stored in the user's database entry won't show up. I get this error: The specified value "Mon Jul 27 1987 20:00:00 GMT-0400 (Eastern Daylight Time)" does not conform to the required format, "yyyy-MM-dd"
I have another form, and it seems to work just fine, but for some reason this form won't load the date upon rendering.
This is how the date is set when the form is originally submitted and updated:
<div>
<label>Date of birth</label>
<input name="dateOfBirth" label="Date of birth" type="date" value={dateOfBirth} onChange={(e)=> setDateOfBirth(e.target.value)} />
</div>
and this is how the state is loaded:
const HHForm = ({user, userState}) => {
const [dateOfBirth, setDateOfBirth] = useState(userState?.healthHistory[0]?.dateOfBirth ? ((userState?.healthHistory[0]?.dateOfBirth) : (''))
But when the component renders to update the form, the date is just left as an empty date selector, as if there is no date data, but the database has an entry for the dateOfBirth.
HTML 5 date pickers should be in format of yyyy-MM-dd. You should format your date. You can use moment to do that. https://www.npmjs.com/package/moment
import moment from 'moment'
setState(moment(your date here).format('YYYY-MM-DD'))
Here is full code https://codesandbox.io/s/date-picker-76lgw?file=/src/App.js
How to select a past date in the DOB field? What Javascript function can I use in Cypress automation?
It is not a free text field, only can select from the date picker. Here is the screenshot and the HTML
<input _ngcontent-kgi-c484="" id="dob" formcontrolname="dob" readonly=""
bsdatepicker="" placeholder="Optional" class="form-control
plore-form-control ng-valid ng-touched ng-dirty" ng-reflect-name="dob"
ng-reflect-bs-config="[object Object]"
ng-reflect-max-date="Fri Apr 16 2021 00:00:00 GMT+1">
I tried this function but it didn't work
cy.get('#dob').invoke('val').then((text) => {
expect('08/05/1999').to.equal(text);
What I did was add a custom command (we have various datepickers throughout our system, each having a slightly different selector).
Cypress.Commands.add("setDateInput", (selector, value) => {
// wait for the flatpickr instance to be applied before setting the date
// 'flatpickr-input' class is added on initiation
cy.get(`${selector}.flatpickr-input`).then($el => {
$el.get(0)._flatpickr.setDate(value, true)
})
});
Here, you can pass in a changing selector and then the DD/MM/YYYY format as parameters. Hope this helps someone.
The control is a bunch of buttons, you can click them in Cypress, e.g
cy.get('button').contains('8').click(); // select the 8th day
The chevrons (left and right) you'll need to click a few times,
cy.get('button.uib-left').click().click().click().click() // keep going for MM/YY
You can click on that middle part, but I can't figure that one out exactly.
Ok, I figured it out, click "April 2021" once to choose the month
cy.get('button').contains('April 2021').click();
// now select the month
cy.get('button').contains('May').click()
OR click the "April 2021" then "2021" to select the year
cy.get('button').contains('April 2021').click();
cy.get('button').contains('2021').click();
cy.get('button.uib-left').click().click() // get decade with 1999
// now select the year
cy.get('button').contains('1999').click()
But you get the idea, interact the way a user does.
I have tried to change the value of selection in angular material date picker to YYYY-MM-DD format as follows:
In dateInput event of the field I call a function which will change the format of date using date pipe and set value back. However, the format doesnt change.
HTML Code
<input matInput placeholder="Stop Date" [matDatepicker]="stopDate" (dateInput)="OnStopDate($event.value)" formControlName="stopDate">
<mat-datepicker-toggle matSuffix [for]="stopDate"></mat-datepicker-toggle>
<mat-datepicker #stopDate></mat-datepicker>`
TS Code
`OnStopDate(Value){
const update= this.datepipe.transform(Value, 'YYYY-MM-dd'); //this value is being update
this.myForm.controls.stopDate.setValue(update,{emitEvent: false}); // the value is not being set in yyyy-mm-dd but in mm-dd-yyyy
}
I did see a solution provided using MomentDateAdapter as here. Is this the only solution proceed and why ?
I have just started using the react-day-picker library. I have the following code sandBox which is a fork of the range with 2 inputs example,
https://codesandbox.io/s/w6vnlox29l
I have it working the way I want but I want to input the dates as MM/DD/YYYY instead of the default format, YYYY-MM-DD. When I add the following attributes
<DayPickerInput
value={from}
format="M/D/YYYY"
formatDate={formatDate}
parseDate={parseDate}
placeholder="MM/DD/YYYY"
onDayChange={this.handleFromChange}
dayPickerProps={{
selectedDays: [from, { from, to }],
modifiers,
disabledDays: {
after: new Date(),
},
numberOfMonths: 2,
toMonth: new Date(),
}}
/>
I can no longer correctly enter the date in the input field the date. When I remove the format, formatDate and parseDate attributes the date picker input functions the way I expected. I have read the documentation but think I may be missing something simple. How can I use the input text box and date picker with dates formatted as MM/DD/YYYY?