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
Related
I want to set a custom timezone in vue-bootstrap-datetimepicker. Is there any way to acheive it. I have tried searching for it but could not find any workable thing.
<v-date-picker
v-model="leg.date" :timezone="CustomTimezone"
:min="hcDate(maxDate)"
#input="leg.datepicker = false"
#change="setUTCDate"
disabled
></v-date-picker>
The CustomTimezone value can be any php string for timezone. (America/Los_Angeles,Asia/Karachi)
I have to show date field. After giving multiple true, the picker is showing wrong value.
Added code:
<v-date-picker :landscape="$store.state[parentName].landscape" v-model="$store.state[parentName].picker"
:multiple= "true"
#input="handleInput" >
</v-date-picker>
Please help me out. From where this 10 selected is coming. Where did i went wrong.
I think from your code, your v-model data, $store.state[parentName].picker already have any value.
You can see this value using Vue.js devtools.
If don't have any value on v-model, please anotate the comment.
If you already have any value, and you don't expect
You should clear the $store.state[parentName].picker in beforeMount or beforeCreate.
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 want to limit the user input in ion-input to just 1000, not the max length of the user input.
How do I achieve that?
You set this "maxlength" property
like, This
<ion-input type="text" maxlength="1000"></ion-input>
You should use a size prop
<ion-input type="text" size="1000"></ion-input>
For anyone who stumble on the same problem with me, I found the solution by using 'max' Validators. You can about all available Validators here:
Angular Validators
I've created a DateTextBox like:
<input dojoType="dijit.form.DateTextBox" constraints="{max: Date.now()}" id="startDate" />
When the page loads there is no value in the field. I would like the value to default to today. Is there a way to handle this? I know I could use the "value" attribute and set it in the declaration, but that only allows me to put a static date in the field, not a dynamic date.
It would also be good if the solution works with a form reset too.
Thanks for the help!
The parser supports the "now" keyword, so you could do:
<input dojoType=dijit.form.DateTextBox value="now">
Of course, for programmatic creation you would simply do:
new dijit.form.DateTextBox({value: new Date()})
Your solution:
<input dojoType=dijit.form.DateTextBox value="now">
If you want to make the date other than today:
<input dojoType=dijit.form.DateTextBox value="now" constraints="{max: new Date()}">