Is there a way to implement a Static read only calendar displaying available dates like for the booking system when you review an apartment and its availability with Material UI pickers?
I have tried to use StaticDatePicker:
<StaticDatePicker
disablePast
displayStaticWrapperAs="desktop"
disabled
openTo="date"
value={value}
renderInput={(props) => <TextField {...props} />}
pickerProps={{ readOnly: true }}
/>
However, it still allows picking some date from that calendar...I would like it to be display only, showing what dates are taken and what available
Something like this displaying available & prohibited dates while not allowing user to pick any date (readOnly) Example
You can use the - shouldDisableDate handler to prohibit all dates except the allowed ones:
https://v4-0-0-alpha-12.material-ui-pickers.dev/api/DatePicker
Related
I am using Vue3Datepicker in our project (Composition Api).
What I am trying to do is to give the users ability to type in any format. e.g. if the user types in any of the following, it can parse it to 2nd Feb 2022:
02/02/2022
02-02-2022
02.02.2022
I have checked different events of the datepicker but couldn't find one that triggers while user is typing. most of the events are for when the model has been updated, which in this case if the format is for example DD/MM/YYYY, typing 02.02.2022 doesn't update the model so that is not hit at all.
import Datepicker from '#vuepic/vue-datepicker';
<Datepicker v-model="props.modelValue"
format="dd/MM/yyyy"
autoApply
textInput
:enableTimePicker="false" />
Any help is appreciated.
I am using latest material-ui/pickers v4-alpha7.
Is is possible to show action buttons for the DateRangePicker. I know that they are shown by default for MobileDateRangePicker but can not find the solution for the regular DateRangePicker.
function BasicDateRangePicker() {
const [selectedDate, handleDateChange] = React.useState<DateRange>([null, null]);
return (
<DateRangePicker
startText="Check-in"
endText="Check-out"
value={selectedDate}
onChange={date => handleDateChange(date)}
renderInput={(startProps, endProps) => (
<>
<TextField {...startProps} />
<DateRangeDelimiter> to </DateRangeDelimiter>
<TextField {...endProps} />
</>
)}
/>
);
}
Br, Igor
From their current docs:
Date/Time pickers experience is extremely different on mobile and desktop. Here is how components will look on different devices. The default DateRangePicker component is responsive, which means that Mobile or Desktop mode will be rendered according to device viewport.
You can either use the DateRangePicker - which will be responsive, or decide that you prefer to force specific behaviour by using MobileDateRangePicker or DesktopDateRangePicker.
Source: https://mui.com/components/date-range-picker/#responsiveness
There is no prop that you can pass to the DateRangePicker to force using the mobile version in order to show the buttons (you can just use the MobileDateRangePicker if you need it to work this way).
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
I have the following code in a template:
<?= $this->Form->date('selected_date', ['required' => true]) ?>
This displays a lovely new dynamic date picker, but with the US format "mm/dd/yyyy". What I want is "dd/mm/YYYY"
In app.php I've set the APP_DEFAULT_LOCALE to en-GB.
In AppController.php I've set the following:
I18n::setLocale('en-GB');
Time::setDefaultLocale('en-GB'); // For any mutable DateTime
FrozenTime::setDefaultLocale('en-GB'); // For any immutable DateTime
Date::setDefaultLocale('en-GB'); // For any mutable Date
FrozenDate::setDefaultLocale('en-GB'); // For any immutable Date
How do I change the format? I can't find anything in the docs or online.
You can't change it, at least there's no reliable, cross browser/device compatible way, the control is rendered by the browser, and the current state of things is that browsers use the locale the browser currently runs in to format the control.
If you want something solid, then you'll have to use a custom JavaScript datepicker. If you want to walk on the edge, look into web components.
See also Is there any way to change input type="date" format?.
I created a Pivot Project on Visual Studio 2013.
I created the following control:
<DatePicker Header="Data" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0" Width="341"/>
When I tap on it on my phone, it displays the date as M/D/Y. Is it possible to display it as D/M/Y?
Also, don't know if I should create another question, but how can I translate to pt-BR the day/month names shown within the control? As well as that "Choose a date".
The DatePicker format is using user's preferred language and region. This control will automatically look different, for my region it's day/month/year like you wish it to be. I've tried to force the control to use other language, but it seems to be taking it directly from phone settings. Some information you may find here at MSDN:
If you need to allow users to choose a date or select a time, use the standard date and time picker controls. These will automatically use the date and time formats for the user's preferred language and region.
The other bad news you can find here at MSDN about formating that particular control:
Note This section applies to Windows Store apps using C++, C#, or Visual Basic. Formatting is ignored in Windows Phone Store apps.
So in current API it may be hard to change the formatting.
The good news is for the CHOOSE DATE text at the top - it's automatically localized, depending on user's language and region. So you don't have to worry about it if your app supports user's language. But I've not found way to change it to other text.
As for the text displayed inside the button before it's clicked, you can always use Button with DatePickerFlyout, a simple example with apropriate converter:
<Button Content="{Binding ElementName=chosenDate, Path=Date, Converter={StaticResource DateFormatConverter}}">
<Button.Flyout>
<DatePickerFlyout x:Name="chosenDate" />
</Button.Flyout>
</Button>
and the converter class:
public class DateFormatConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
DateTimeOffset chosen = (DateTimeOffset)value;
return string.Format("{0}/{1}/{2}", chosen.Day, chosen.Month, chosen.Year);
// or use chosen.ToString() with format provider
}
public object ConvertBack(object value, Type targetType, object parameter, string language) { throw new NotImplementedException(); }
}