I am trying to restrict image format for the material UI Input component by adding accept props(as like default input tag). But when I add accept prop it throws an error. Am I using the correct component?. Is there any other way to restrict image Formats? Thanks in advance
Use inputProps prop to apply attributes to the input element. Read more in Docs
Related
I'm trying to pass a parameter on the URL provided in images_upload_url.
This parameter changes depending on a field on the page. (A date input)
Is there any way I can set the value of images_upload_url dynamically on TinyMCE?
Ok, so I ended up removing and initializing TinyMCE again.
function onChangeInput(){
tinymce.remove();
initEditor();
}
Not beautiful but it works just fine :)
From the documentation, it describes having an uncontrolled field by omitting the value and onChange attribute. The React website says to use a ref on any uncontrolled inputs, but doing this with a TextField only refs its container, a div. What is the recommended way of retrieving the value of an uncontrolled TextField in Material UI? I could use a querySelector to find the element, but that doesn't seem like a proper way.
use inputRef prop on TextField
<TextField inputRef={ref} ... />
you can access its value by this: ref.current.value
A clarification: value deals with controllability, and onChange deals with observability. They are separate from each other.
You only make inputs controlled by setting the value prop. Setting the onChange prop can be used separately to observe the input changes without acquiring control over it, thus, achieving what you are asking for.
The way to provide a ref to the rendered input is via the innerRef prop on the TextField component. Here's the a link to the API where it states that. From there you can access the value of the input as such, ref.current.value
<TextField innerRef={ref} />
I am not sure if I am just blind, but. In Mapbox you can filter your dataset.
So what I want is to display all lines of a given class, that have a certain attribute NOT set. I see options for Exists, Is and Is Not. But there is no Does not exist, right? Is there a way to define that? Or do I have to do that when exporting my dataset beforehand?
You will want to wrap your expression in the logical negation operator:
["!",{{your expression here}}]
In Mapbox Studio, after creating the filter, you can switch from the UI editor to the JSON editor at the bottom of the pane:
With the sap.m.DateTimePicker, it's possible for a user to either select a value from the drop-down list or enter it manually. I'm wondering if there's a way to add a mask to the manual input box that matches the valueFormat of the DateTimePicker.
I know there's a sap.m.MaskInput as well, so maybe there's a way to combine the two elements.
There is a new private module named sap.m.MaskEnabler which the sap.m.InputBase (i.e. DateTimePicker) is supposed to make use of.
(MaskEnabler) should be applied to the prototype of a sap.m.InputBase.
The mask feature is currently enabled only in sap.m.TimePicker (v1.54). According to this commit message, however, the same feature will arrive to the Date(Time)Picker as well:
This change prepares for refactoring of DatePicker and TimePicker so the
common code of both pickers can be moved to a new common control that
they may extend.
Therefore, if it's not urgent, and depending on your project, I'd not create a new custom control and then throw it away once the mask feature has arrived.
I'll update my answer when it's available.
Until then (and even afterwards), you can still guide the user to enter the data in the correct format via OData binding type sap.ui.model.odata.type.DateTime:
<DateTimePicker
value="{
path: 'myODataModel>myDateTime',
type: 'sap.ui.model.odata.type.DateTime',
constraints: {
isDateOnly: true,
displayFormat: 'Date'
}
}"
minDate="{...}"
maxDate="{...}"
/>
In contrast to formatter, type allows us to keep two-way data binding.
The entered value is automatically intercepted from updating the model data when...
It could not be parsed due to an invalid format (fires parseError)
It could be parsed but the constraints were violated (fires validationError)
If you enable handling UI messages
additionally, the framework will then take care of creating the appropriate
message for the user:
Example: https://stackoverflow.com/a/48482544
I think the only way to combine the two sap.m.DateTimePicker and sap.m.MaskInput is to develop your own control . Documentation : https://sapui5.hana.ondemand.com/#/topic/91f1703b6f4d1014b6dd926db0e91070.
Another way is to just use the Placeholder of the DateTimePicker Input field. This does not provide the same functionality as a MaskInput, but helps the user which valueFormat is expected in the input when entering it manually.
If you have a binding in your input box, you could set the type in the binding to eg. sap.ui.model.type.Date. This way you get some automatic formatting when field validation is triggered. There are other types available and you could inherit from sap.ui.model.SimpleType to code your own.
Let's take a form of student details;
I want take take all these input data into a List or Set.
Please check the attached picture and give me any suggestions.
To get the inputs and the select you can use a selector like:
input, select option[selected=selected]
to get only the input use css selector for input tag:
input
to get also the selected inputs you could use:
input[type=radio], input[type*=text], select option[selected=selected]
you will need to add an extra attribute for the radio input to get only the selected ones, you might need to do dome updates for the select also.
These selectors are only an estimate of what you need since the html is not available.