I don't know why I can't wrap my head around how to use Material UI's DatePicker. It seems that the documentation is not complete? Am I correct?
Here is the basic example I have:
import {DatePicker, MuiPickersUtilsProvider} from '#material-ui/pickers';
import DateFnsUtils from "#date-io/date-fns";
... somewhere in the render:
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DatePicker
id="date"
value="2017-05-24"
allowKeyboardControl={false}
autoOk={true}
/>
</MuiPickersUtilsProvider>
At first I got errors that 'n' something something wasn't working, and that is because either date-io or date-fns (the newer versions) wheren't supported. After downgrading.. I got told that the _onChange is not a function. I randomly thought that I could add an empty onChange={()=>{}} to get that error to go away and it did. Now I am noticing that when I actually select a date, the DatePicker date displayed on my page doesn't update to the new date.
So.. am I supposed to supply an onChange event? Why is that not clear anywhere?
Also, is the date supposed to be updating by default, or is my onChange supposed to do that?
UPDATE:
So.. it turns out this page that documents Material UI Pickers has a "View Code" icon under their examples (https://material-ui.com/components/pickers/).
So that shows how to handle the onChange. I wish it was more obvious in this documentation.
Use #date-io/date-fns of v1.x
Pass required onChange callback:
function BasicDatePicker(props) {
const [selectedDate, handleDateChange] = useState(new Date());
return (
<DatePicker
value={selectedDate}
onChange={handleDateChange}
/>
);
}
Here is working example
Related
I have a custom component and would like to apply the exact same styles as the <Typography> component gets when setting the noWrap prop. The following does work:
<span className="MuiTypography-noWrap">
But there's of course no actual type-checking or "link" to anything here, which means if the name ever changes or is removed in a future version, I won't get any type/build error from it.
Is there a "Material UI way" to reuse/copy these classes? E.g. is there somewhere I can import/access these names from?
I assume you have a reason, but given your example of a span element, I can't help but wonder why you're not just using the MUI component.
I've never done this before, but I was curious and the styles are indeed exported. Not sure if this is a good idea or if there is another way...
import { styles } from '#material-ui/core/Typography/Typography';
const noWrapStyles = styles(theme).noWrap;
Hello everyone I'm trying to learn ReactJS and I would like to know why everybody is using tag to build forms.
I mean when I use this code:
import { TextInput, Form, View } from 'react-native'
<Form onSubmit={this.onSubmit}>
<TextInput/>
</Form>
I got this error :
Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: undefined. You
likely forgot to export your component from the file it's defined in.
Or when I use this code :
import { TextInput, form, View } from 'react-native'
render (){
return (
<View>
<form onSubmit={this.onSubmit}>
<TextInput/>
</form>
</View>
);
}
I got this error :
Expected a component class, got [object Object].
I'm trying to fix and use a form but I'm mostly trying to understand how it works :)
Thank you for your time and your responses in advance.
Cheers
React-Native doesn't actually contain a Form tag.
There are libraries such as react-native-form-generator that provide similar functionality to what you are looking for.
Moreover, the error you're getting is trying to tell you exactly that - a class or function which defines a react component is expected where you specify a tag, but it was undefined, since there is no such component.
Given the pop-up example at http://plnkr.co/edit/idrirF9zxvCMCQWTk8nr?p=preview how do I actually get the date if the user changes it?
I am guessing that I should do it in $scope.open = function($event) but I just don't know how. I have searched this site & googled extensively. What did I miss? Thanks.
you plunk link is not working.
I don't know what exactly happen in your code.
I think maybe your miss ng-model,
ng-model is the way to do two-way data binding in angular .
for example
<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" />
in this example date is binding to dt (ng-model="dt")
you can get data by $scope.dt
if you want to watch the date change
you can do
$scope.$watch('dt',function(val){
//to do
console.log(val)
})
I'm making a form with a drop down box. When I use dijit.form.Select, there is only one option and it's blank. When I use djiit.form.FilteringSelect, the box works as intended. records returns a store of the options. Code follows...
js:
oFetchLookup.drcrType(function(records) {
console.log(records)
dijit.byId("drcr_drcrtypeid").store = new Memory({
idProperty: "id",
data: records
});
});
html:
<select id="drcr_drcrtypeid" name="drcr_drcrtypeid"
data-dojo-type="dijit/form/Select"
data-dojo-props="intermediateChanges:true, style:'width:220px', tabindex:3">
</select>
The Select widget has a setStore(if the link doesn't work properly, navigate to "dijit/form/Select" from the treeview on the left and look for "setStore" in the "Method summary") method. Have you tried using it?
Also have you checked the dojo tutorials(especially this one)?
I'm not sure if this is your issue, but I had something similar happen. Apparently the font color was white on white. FilteringSelect changes the font color to black automatically, but it needs to be explicitly done in Select.
Prototype is great, but with the 1.6.1 release, the library still doesn't allow getting/setting of grouped inputs (checkboxes and radio buttons.) I'd like a way to get an array of selected values with $F($("form").checkboxes). I'd like to be able to set those checkboxes to an array of values, on the flip side.
Ideas?
You can always do something like this: (assumes you have your checkboxes have a class of checkboxes).
var checkedList = [];
$$('.checkboxes').each(function(ele){
if( $(ele).checked )
{
checkedList.push($(ele).name);
}
});
edit - just realised i misread the question, code below only good for setting values:
var form = $('options');
checkboxes = form.getInputs('checkbox');
checkboxes.each(function(e){ e.checked = 0 });
// or even checkboxes.invoke('checked',0);
could maybe use something like this though:
var cels = new Array();
$$('checkbox[checked="checked"]').each(el){
cels.push(el.value);
}
This is only for radio buttons, but still useful.
Get
$$('input:checked[name="radio_name"]')[0].value
Set
$$('input[name="radio_name"][value="to_select"]')[0].checked = true
"radio_name" is the name of your radio group. "to_select" is whichever value you want to select. The "[0]" works because only 1 radio button can be checked at a time.
On a side note, I kinda don't like prototype. A lot easier in jQuery, but you gotta use what you gotta use.
I ended up writing my own extensions to Prototype to do this. You can see them on Github. Here's a note from the project:
"These extensions allow you to use Prototype’s convenient $F() syntax to get and set the values of these grouped input elements. They’ve been tested with Prototype 1.6.0.3 and 1.6.1. There are other bits in these extensions as well. See the README.html file for more details."
The answers from seengee and Los are much appreciated, but I wanted a more integrated solution that would allow me to work with checkboxes and radio buttons with the natural $F() syntax that I already use with other form elements.
Given HTML:
<label><input type="radio" id="choiceA" name="choices" value="A" checked="checked" /> A</label>
<label><input type="radio" id="choiceB" name="choices" value="B" /> B</label>
This does a CSS styles query and returns the value for all of the elements.
$$('input:checked[type="radio"][name="group-name"]').pluck("value");