"react-admin": "^4.3.1",
How to setup DateInput in React Admin so that you copy and paste string to input?
I have DateInput like this
<DateInput source="to" label="End Date" />
and paste doesn't work on it.
<DateInput> uses a native date input. Your browser doesn't allow pasting arbitrary strings in an <input type="date">, so react-admin doesn't allow it either.
If you want to allow any date format, change to a <TextInput> and parse it to a Date manually using the parse prop.
Related
I am struggling to set my v-calendar datetime picker to 24h format.
I am reading the documentation but still could not make it work: https://vcalendar.io/
<v-date-picker is-expanded id="match-date-time" v-model="date" mode="dateTime" :timezone="timezone" />
I tried different settings but did not find the correct props / parameters for it.
Can someone help in this?
Got it, the secret is:
:is24hr="format24h"
where format24h is a boolean set to true in data definition
I have two datepickers in my code and i change them between each other by another parameter(duration which can be Single day or Multi day). By default it set as Single day. First calendar have right position, but when i change from single day to multi day and open range datepicker, calendar which have absolute position sets in top left corner of page (with top:0;left:0 parameters).
I tried change directive v-if to v-show in my code below, and it helps, but there is another problem. For some reason element-ui think that picked value is not range and throw parse error. So i need another solution.
That's piece of code with this datepickers:
<el-date-picker
v-if="duration === durations.SingleDay"
placeholder="Enter date"
value-format="yyyy-MM-dd"
#input="updateTime($event, 'dateValue')"
:value="value.dateValue"
></el-date-picker>
<el-date-picker
v-else-if="duration !== durations.SingleDay"
placeholder="Enter date"
type="daterange"
value-format="yyyy-MM-dd"
:value="value.dateValue"
#input="updateTime($event, 'dateValue')"
></el-date-picker>
I want to positionate range datepicker as usual, like in datepicker in Single day parameter.
FIDDLE
Demo on fiddle, first open calendar and change type and reopen it, you can see this bug
In that case, there're two ways to solve this:
Change v-if to v-show
Add different key attributes to the Datepicker components (Vue will know that this is two different components)
In fact, this is not a bug. You use the same component in v-if and v-else. The two component properties are basically the same, so Vue will reuse the previous components, but you should avoid multiplexing complex components in Vue. It's easy to go wrong, which is why you must add a key in v-for in vue.
You did not modify the internal reference this.$refs.reference when you reused the component, and the position of the popover cannot be calculated correctly.
I'm trying to find a way to add a new value using v-select previously not in the list. So that the new value entered will become the selected option.
This is my current code:
<v-select
ref="systemSelect"
v-model="reservation.system"
name="system"
label="Select System"
:disabled="isBusy"
:options="systems"
#input="getSystems"
/>
In UI the component looks like this. Here I use Vuex only to get :options. Currently if I enter a new value and click outside that value disappears since its not found in the list
Expected: Would like to enter a new value and use this value as current in the form and save it. Is there a way to achieve this?
Any help would be appreciated.
Thanks!
If you're using vue select, you can use the attribute taggable and multiple to push your own options:
<v-select taggable multiple />
See this link:
https://vue-select.org/guide/values.html#tagging
Currently I am building a hybride app for android devices. I am trying to use the ojInputNumber component to force a numeric keyboard show up on the device. Unfortunately, the component binding always gives type="text".
I have a list of objects which contains traits, while looping over traits, the following snippet will be loaded on screen based on the entrytype.
<div class="inputNumberWraper" data-bind="if: trait.getEntryType() === 'MANUALNUM'">
<input class="inputNumer"
data-bind="attr: {id: trait.getTraitCode()}
, ojComponent: {component: 'ojInputNumber'
, value: trait.getValue()
, min: trait.getMinValue()
, max: trait.getMaxValue()
, optionChange: changeListener
, required: trait.isMandatory() }"/>
<span data-bind="ojModule:{name: 'inputComponents/inputNumberFixer'}" />
</div>
I have tried to load a module (inputNumberFixer) after this the component is binded. To manually change the input type from text to number with jquery.
$(document).ready(function(){
$('.inputNumer').attr("type", "number");
$('.oj-inputnumber-button').hide();
});
this works until I select another object from the list and the input fields "refreshed". The type I have changed is put back to text but the inputnumberfixer did not run for the 2nd time.
Does anyone know how to force this component to bind the input type to number?
Unfortunately, no. There is not a way to force this today(v2.0.0 of JET). The ojInputNumber component is a generated component that provides the "spinner" option for easily increasing and decreasing the number value, but it does not set the number type so that the proper number keyboard shows up on a mobile device.
I've filed an ER for this to be fixed to show the proper keyboard. It should change in a future release.
I'm using a Dojo Time Text Box on my XPage. When I save a time in this field, the displayed time has a "T" prefix. Is there any way of removing this "T"? Here is my code:
<xp:inputText id="EventEndTime" value="#{document1.EventEndTime}" style="width:160px;"
role="button" title="used to pick a meeting time" required="true"
dojoType="dijit.form.TimeTextBox"
disableClientSideValidation="true">
<xp:this.dojoAttributes>
<xp:dojoAttribute name="required" value="false">
</xp:dojoAttribute>
</xp:this.dojoAttributes>
</xp:inputText>
You can add a custom converter to your inputText control which deletes the "T" before saving and adds "T" during rendering page:
<xp:this.converter>
<xp:customConverter>
<xp:this.getAsObject><![CDATA[#{javascript:value.substring(1)}]]></xp:this.getAsObject>
<xp:this.getAsString><![CDATA[#{javascript:"T" + value}]]></xp:this.getAsString>
</xp:customConverter>
</xp:this.converter>
This way time gets saved as string like "hh:mm:ss" instead of "Thh:mm:ss".
You could use a custom converter to save value as a Notes time value also.
Domino doesn't actually store "Time only", so you would want to use a viewScope variable to bind to your TimeTextBox first and use the load and save events to write to / read from that. I would use the SimpleDateFormat class for conversion which is way more comfortable that manual string operations. Actually a small Java helper class works wonders here.
Alternatively you could use a filter to clean this up.