I installed material-ui "^1.0.0-beta.36". The documentation says there's date-picker.
But I can't find it in node_modules\material-ui , nor in any of the subfolders.
The change log suggests that a datepicker is planned to be supported in future releases:
1.0.0-beta.17 - Oct 16, 2017
As this garbage collection stabilize, we will be able to add new
features, like a stepper, extension panel or date/time pickers. But we
are not here yet.
Material-ui v1 currently provides several date pickers. However, there's no specific DatePicker component.
Instead, you use the type prop of the TextField component to specify that you want a date picker rather than your typical text input. Here's an example that will give you a classic date picker:
import TextField from 'material-ui/TextField';
<TextField
type="date"
defaultValue="2017-05-24"
/>
There are also other pickers with more than just the date. For example:
Time Picker: type="time"
Date and Time Picker: type="datetime-local"
You can find more information about this on the pickers page of the docs.
import TextField from 'material-ui/TextField';
<TextField
id="date"
label="Birthday"
type="date"
defaultValue="2017-05-24"
className={classes.textField}
InputLabelProps={{
shrink: true,
}}
/>
Material-UI npm package in itself only supports the native Date picker like this:
import TextField from '#material-ui/core/TextField';
<TextField
type="date"
/>
However there is a Material-UI supported and compatible npm package you can install with:
npm i #material-ui/pickers
And then in your code:
import { MuiPickersUtilsProvider } from '#material-ui/pickers';
// pick a date util library
import MomentUtils from '#date-io/moment';
import DateFnsUtils from '#date-io/date-fns';
import LuxonUtils from '#date-io/luxon';
function App() {
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<Root />
</MuiPickersUtilsProvider>
);
}
ReactDOM.render(<App />, document.querySelector('#app'));
Example copy pasted from the official documentation at https://material-ui-pickers.dev/getting-started/installation
Related
OVERVIEW:
We are using this plugin -- bootstrap-datetimejs (https://github.com/Eonasdan/bootstrap-datetimepicker). And I have it setup to show the time only
$(".timePicker").datetimepicker({
format: 'LT'
});
We are using ractivejs for our javascript library and my html goes like this
<label for="apptEndTime">End Time</label>
<div class="timePicker">
<input name="apptEndTime" id="apptEndTime" class="form-control date" type="text" value="{{apptEndTime}}" />
</div>
<label>Duration (mins)</label>
<input type="number" class="form-control" value="{{duration}}" id="duration" />
so apptEndTime is binded to ractive object data apptEndTime, and so does the duration. In my code, I made it that if the duration increases, it will also update the value of apptEndTime data. It successfully updated and displayed the apptEndTime.
PROBLEM:
Though it successfully updated and displayed the apptEndTime, when I click the clock icon of the datetimepicker, it still shows the previous time. As you can see on the screenshot below, it already displayed as 11:58 PM but when I click the clock icon, it still shows as 11:57 PM
QUESTION:
Is there a way that when I updated the value of apptEndTime, the time on the time selection menu (when the clock icon is clicked) will also gets updated?
I've already tried googling for day regarding this, but I can't seem to find the right solution. Also tried checking the documentation but can't find any related information
Ok my teammate was able to answer this question. He just added this line of code
$('input[name=appEndTime]').closest('.timePicker').data("DateTimePicker").date(appointmentObj.apptEndTime);
Where:
$('input[name=appEndTime]') is the affected input field
closest('.timePicker'). The '.timePicker' here is the name of your datetimepicker class/id when you initialize datetimepicker
data("DateTimePicker"). You just follow this, because all functions should be accessed via data("DateTimePicker") as mentioned on the plugin page:
https://getdatepicker.com/4/Functions/
date(appointmentObj.apptEndTime). date is the function name (though it is not found on the list of functions from their page :( ). And appointmentObj.apptEndTime is value that I want to set on the menu
I have a Typography component like so:
<Typography
variant="h2"
component="h1"
dangerouslySetInnerHTML={{
__html: t(`translation copy`, {
link: buildLink(message),
}),
}}
/>
I'm pulling in translation copy from a json file and I need to have links embedded into the copy. If I don't use dangerouslySetInnerHTML then the a tag is printed as a string instead of a rendered link.
In Material-UI v4 the fullWidth prop could be passed to the Datepicker component. However, in v5 this prop is not listed in the component API. All css selectors for this component are non-deterministic and so I am unable to use the width css property. Is there any alternative that I have missed?
Example:
https://codesandbox.io/s/material-ui-v5-forked-fvc3er?file=/src/App.js
For both the DatePicker and TimePicker components in Material-UI v5, you need to set the renderInput prop. When using the TextField component as a rendering component, you can then use the fullWidth prop to expand to the width of its parent.
<DatePicker
inputFormat="MM/dd/yyyy"
value={date}
onChange={(value) => setDate(value)}
renderInput={(params) => <TextField {...params} fullWidth />} <--- This right here
/>
For me the fullWidth Attribute didn't work. I am using the following versions: "#mui/lab": "^5.0.0-alpha.61", and "#mui/material": "^5.2.3".
My solution was simply exchange fullWidth width sx-styles like:
<DatePicker
inputFormat="MM/dd/yyyy"
value={date}
onChange={(value) => setDate(value)}
renderInput={(params) => <TextField {...params} sx={{width: '100%'}} />
Posting an answer for future reference since the above answers didn't work for me.
renderInput={(params) => <TextField {...params} sx={{ gridColumn: "span 4" }}/>
You can change the value of span to increase or decrease length according to your need.
Assuming that the original intention of the thread was for devs like myself who just wanted to know how to customize the size of Material UI's StaticDatePicker component here is my solution to this problem.
In Material v5 we can use the styled to customize any components we like. I also chose to customize the CalendarPicker over the StaticDatePicker because it was easier to target the .MuiCalendarPicker-root class this way.
I have a form which contain a date picker and it works as expected except the current date is not selected.
When I open the calendar it shows as follows
But I need the current date focused when ever I open the .date picker as follows
Add customTodayClass to the bsConfig and use css to change the background color of the date.
<input type="text"
placeholder="Datepicker"
class="form-control"
bsDatepicker
[bsConfig]="{'customTodayClass': 'today'}"
/>
Add CSS for today class like below.
.today{
background-color: #DCDCDC
}
When my input field is empty and not focused, Material UI would place the label inside the input field as a placeholder.
What I want is, to have the label above the input field all the times, similarly to what it looks like if the input field is selected.
How can I do this?
Example code:
<FormControl>
<InputLabel htmlFor="name">Name</InputLabel>
<Input name="name"
value={name}/>
</FormControl>
For those looking for how to achieve this with TextField component, here:
<TextField
variant="outlined"
InputLabelProps={{
shrink: true,
}}
/>
After 30 mins of pulling my hair... I finally got it. The property you are looking for is not called disableAnimation as one could thought, it's the shrink property. API docs - https://material-ui.com/api/input-label/
<FormControl>
<InputLabel htmlFor="name" shrink='true'>Name</InputLabel>
<Input name="name"
value={name}/>
</FormControl>