I have a Yup schema, that in its shape contains an atribute like this:
date_of_birth: yup.date().required()
Which, when I submit the form, pass to the Payload a value in a format similar to this "1990-01-31T02:00:00.000Z".
Basically, I need only the date, without the timezone, like this: "1990-01-31"
I've tried to use the transform() method,
date_of_birth: yup.date().transform(* fn here? *)required()
but it asks for a function and my JavaScript is not very good.
So, how can I manage to get only the 'yyyy-mm-dd', as in the example would be "1990-01-31'.
PS: In my JSX, I have a MUI Component like this:
<TextField
value={value}
type='date'
label='Date of Birth'
onChange={onChange}
placeholder='1990-01-01'
error={Boolean(errors.date_of_birth)}
/>
Related
I need to add data-test attribute to column header for automated testing of different operations, such as sorting, filtering etc., so that scripts could find where to click.
How it can be done? I would like to keep all the functionality of default headers, just add the attribute.
Thanks!
You can use the renderHeader and pass the attributes you want like below:
columns={[
{
field: "name",
renderHeader: (params) => (
<span data-testid="header-test-id"> // Here pass your data-testid
{"Header with attr "}
</span>
)
}
]}
I am trying to use Yup with Formik for my user profile screen. The validation works fine but it expects the format of the date entered by the user to be in USA format MM/DD/YYYY rather than the application required European/UK standard format DD/MM/YYYY. Entering 31/12/1995 fails validation.
dateOfBirth: Yup.date()
.required("Date of Birth is required")
.max(dateToday, "Future date not allowed")
I have searched through the Yup docs and SO but I can't work out how to do this. Any ideas?
You can use the transform method to parse value.
Like:
startDate: Yup.date()
.transform(value => {
return value ? moment(value).toDate() : value;
})
.required("Date of Birth is required")
.max(dateToday, "Future date not allowed");
I had this same issue myself and resolved it using the example in the Yup README replacing MomentJS with date-fns which is what I use for date manipulation.
Value returns Invalid Date before you custom transform is applied so you must use the original value and context to check to see if you need to run the transform logic at all and if so run it on the value from the field and not the transformed value.
Yup transform docs and date example
import { parse } from 'date-fns';
[...]
date()
.transform((value, originalValue, context) => {
// check to see if the previous transform already parsed the date
if (context.isType(value)) return value;
// Date parsing failed in previous transform
// Parse the date as a euro formatted date string or returns Invalid Date
return parse(originalValue, 'dd/MM/yyyy', new Date());
})
This works perfectly for me and works for both US and UK date formats (you will still need to perform manipulation on the date if its in the us format as it will submit this value as valid)
If you ONLY want UK/Euro dates then just remove the context type check
.transform((value, originalValue) => parse(originalValue, 'dd/MM/yyyy', new Date()))
In my report I have a field tripDate as java.util.GregorianCalendar:
<field name="tripDate" class="java.util.GregorianCalendar"/>
I need to create a JSON datasource and pass this field.
I tried with different kind of solutions such as:
...
"tripDate": "1601897363" // value as timestamp
...
or as Datetime object:
"tripDate": {
"date": "2020-08-12 10:10:10",
"timezone_type": 3,
"timezone": "Europe/Paris"
}
In both cases i get the error:
Unable to get value for JSON field "tripDate" of class java.util.GregorianCalendar
Field "tripDate" is of class java.util.GregorianCalendar and can not be converted.
There is a way to pass a java.util.GregorianCalendar field from JSON datasource?
JSON/JSONQL datasources work with java.util.Date and its subclasses.
So you should use one of those for your textField class.
Regarding parsing of the date/time JSON string, depending on how you feed the JSON to your report you could try:
with a dataAdapter XML file, you can set the date pattern either with Jaspersoft Studio or by hand:
<jsonDataAdapter ...>
...
<datePattern>yyyy-dd-MM hh:mm:ss</datePattern>
...
</jsonDataAdapter>
if you don't use a data adapter and rely only on the net.sf.jasperreports.json.source property, you also need to set this property in your JRXML:
<property name="net.sf.jasperreports.json.date.pattern" value="yyyy-dd-MM hh:mm:ss"/>
In the same manner you could set a pattern for parsing numbers.
What I want to accomplish is to trigger an event when the user selects a date from a date input field in HTML using KnockoutJS. Regardless of the date the user chooses, I want to set the first day of the selected month.
I don't want to post the date field on a form yet. I want the event to be triggered when the user just selects the date from the input field.
If you bind the value of the date input to an observable, you can subscribe to changes on that observable and change the value to the first day of the selected month.
This is more straightforward than the answer that I had previously written here.
const vm = {
theDate: ko.observable('')
};
vm.theDate.subscribe(function(newValue) {
vm.theDate( newValue ? newValue.replace(/\d\d$/, '01') : '');
});
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<input type="date" data-bind="value: theDate">
var data = d3.nest()
.key(function(d) { return d.date;})
.rollup(function(d) {
return d3.sum(d, function(g) {return g.something; });
}).entries(csv_data);
using this code above I can group by date which is in the format yyyy-mm-dd , but I want to group using the month as key. How do I do this ?
You can use the builtin method d3.timeMonth() to get the first day of the month for a date like:
d3.nest()
.key(function(d){ return d3.timeMonth(d.date); });
If d.date is not already a javascript Date object you have to first parse it to be one.
var date_format = d3.timeFormat("%Y-%m-%d");
csv_data.forEach(function(d, i) {
d.date = date_format.parse(d.date);
};
You need to change the key function to return the value you want to nest by. In most cases, the key function just returns a property of the data object (like d.date), but in your case the function will require a little more calculation.
If your date is stored as a string of the format "yyyy-mm-dd" you have two options for extracting the month: either
use regular expressions to extract the portion of the string in between the "-" characters, or
convert it to a date object and use date methods to extract a component of the date.
Browsers differ in which date formats they can convert using the native Javascript new Date(string) constructor, so if you're using date objects you may want to use a d3 date format function's format.parse(string) method to be sure of consistent results.