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.
Related
I finished simple, intermediate and advanced blueprint tutorials of the Atlassian https://developer.atlassian.com/server/confluence/tutorials-and-guides/.
Currently, I have a soy file and a js file for Blueprint wizard page; a Java file as context provider and an xml file for template.
I added the current date to the title easily. I also want to insert current date and the current user (page creator) to the page before sending user to edit. (For example; default meeting notes blueprint). However I couldn't find how to set these values in template.
In xml template, the current date should be as following format:
<time datetime="2021-02-17"/>
So, I cannot add something like "<at:var>" for datetime value. So, I cannot change it from the context provider class.
Also, I tried to set this value through Javascript and JQuery, however I just can change things about the wizard page. I failed on manipulating the actual template page.
Nearly same issue with the page creator. I should add the user as following format:
<ri:user ri:userkey="2c9680f7405147ee0140514c26120003"/>
However, I couldn't set the userkey through Java and also I couldn't get the page creator value.
Thus;
How can I add the current date to the template page?
How can I add the user mention to the template page?
How can I get the creator of the page?
Thanks already for all your interests.
Have a nice day!
The answer is coming from me, too.
In template's xml, we are adding two variables for the date and the user with enabled XHTML support:
<at:var at:name="currentDate" rawxhtml=true />
<at:var at:name="currentUser" rawxhtml=true />
In the context provider class, we will set these variables with html tags:
context.put("currentDate", "<time datetime=\" + sdf.format(new Date()) + "\"/>");
context.put("currentDate", "<ri:user ri:userkey=\" + AuthenticatedUserThreadLocal.get().getKey() + "\"/>");
where the context is the context map for blueprint and sdf is the instance of SimpleDateFormat class with a pre-defined date (not date-time) format.
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
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.
I am using the angular UI bootstrap popup datepicker like the example here :
http://angular-ui.github.io/bootstrap/#/datepicker
When i combine this with the uiMask Directive ( http://angular-ui.github.io/ui-utils/) the values in the input get scrambled when i pick a date.
I suspect because of the difference in type on the angular model : datepicker wants JS Date object/ ui.mask wants (masked) string.
When the picked date gets formatted/parsed by uiMask, it goes wrong :-/
Is what i am trying to do even possible ?
kind regards, Tom.
I have a form and inside it I have a country/city/etc selection.
The form is inside a zone.
When calling the onSelected for make the change of the country/city, when returning I loose the other form data. How can I keep it ?
I think a zone inside the form would help, but I am getting:
Form components may not be placed inside other Form components.
The Ubigeos type is just a component with other selects that are filled from the pais select
My .tml is
<t:zone t:id="datosPersonalesZone">
<form t:type="form" t:id="formulariodatospersonales" t:zone="datosPersonalesZone">
<t:errors/>
Sexo: <select t:type="Select" t:id="sexo" t:value="actual.sexo" model="sexo" />
País: <input t:type="Select" t:id="pais" model="paises" t:value="pais" t:zone="ubigeosZone"/>
<t:zone t:id="ubigeosZone">
<input t:type="Ubigeos" t:id="ubigeo_nacimiento" t:ubigeo="ubigeoNacimiento" t:zone="ubigeosZone"/>
</t:zone>
</form>
Regards !
You either have to submit a form and process country selection differently (i.e. only updating form contents by returning a block) or try using ideas from FormFragment component and TriggerFragment mixin (probably you can't use them directly but you can try extending them to support select components).
Personally, I go with first option - I have a "SubmitFormOnEvent" mixin and attach it to select-s in the form. Then I found that similar approach is demonstrated at http://jumpstart.doublenegative.com.au/jumpstart/examples/javascript/ajaxselect1 -> so you just can start with that example and update it to your needs.