DatePicker not Available for telerik GridDateTimeColumn - datepicker

I created a telerik:GridDateTimeColumn using the markup below. However, the date in the grid is not editable. Am I missing something?
<telerik:GridDateTimeColumn
DataField="VerificationDate"
HeaderText="Verification Date"
UniqueName="VerificationDate"
PickerType="DatePicker"
DataFormatString="{0:M/d/yyyy}"
ItemStyle-Wrap="false"
ItemStyle-Width="200px"
HeaderStyle-Width="200px" />

Related

Vue 3 Datepicker update as user types

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.

Vue validation with Vuetify

I'm working with a form done using Vuetify and my question is, how can I add a success attribute to the v-text-field once the input has been validated by the :rules?
<v-text-field
v-model="halfPayment.month"
v-mask="'##'"
:rules="[$rules.required, $rules.minCharacters(2), $rules.between(1, 12)]"
label="month expired"
outlined
dense
:success=
background-color="white"
/>
You can add
:success="!!halfPayment.month"
to the text field to show when it successfully passed the validation rules.
I hope this helps, otherwise, you can just drop a comment!

A Basic Example of How to Use Material UI DatePicker

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

Is wicket:label needed with wicket:for?

In the past I have built labels for my form like this:
<label wicket:for="name"><wicket:label><wicket:message key="name"></wicket:message></wicket:label>:</label><input wicket:id="name" type="text"/>
Do I still need to use the wicket:label tag? I am not using wicket:label in wicket 7 and it seems to work fine. I may not be understanding the purpose of using wicket:label. It seems like wicket:label is just additional markup. Below is what I am doing now. Is this correct?:
<label wicket:for="name"><wicket:message key="name"></wicket:message>:</label><input wicket:id="name" type="text"/>
This example is related to Wicket XHTML tags
Have a look at the JavaDoc of AutoLabelResolver and AutoLabelTextResolver.
The <label wicket:for="name"> is handled by AutoLabelResolver. It links the HTML label tag to the HTML form component (in your case the input tag) by filling in the correct ID in the HTML for attribute of the label. It also adds css classes to the label tag for for example errors, so you can style the text in the label tag in case of an error.
The <wicket:label> has two purposes. If you give it a value either by the key attribute (as you did) or by having some text between the tags, the text is set as the label model of the Java FormComponent, which then is used in validation messages like this '${label}' is required. (see LabeledWebMarkupContainer#setLabel and LabeledWebMarkupContainer#getLabel).
If you don't assign any text to the <wicket:label> tag, then it is used as output. That means the value of the label model of your Java FormComponent is used to replace the tag.
If you have no <wicket:label> in the HTML markup and no label model set in your Java code, then your Java FormComponent will have an empty label model and Wicket falls back to using the Wicket ID as label. So depending on how your Wicket IDs look, you will get validator messages like 'user_name' is required. instead of something nice looking like 'User name' is required.

iPad datetime input value format

I'm developing a webapp for iPad and i got stuck on something that should be pretty basic.
I have a form with a datetime input which can be edited but it's supposed to show a default value. I tried using the followin tag
<input type="datetime" id="xyz" name="xyz" value="1996-12-19T16:39:57" />
no default value shown, picker works fine, and if edited everything is fine, just not showing the default value I'm setting.
If I use this instead (which of course I can't use...) everything works perfectly and the default value is regularly shown
<input type="date" id="xyz" name="xyz" value="1996-12-19" />
I tried changing the date format in many ways, as suggested by various articles I found on the web, no luck...
After a day search I found the solution while looking for something else (!!!)
Future reference for whoever gets stuck on this like me, the correct format on iOS for DATETIME input type is
yyyy-MM-ddTHH:mm:ss.fffZ
and remember that it the date is GMT+0 (mine was off 2 hours)
hope it helps