How to use reactive form and set form-control value (e.g.2018) in ngb-datepicker as only year picker?
I used below link code but can't set/selected value in year picker.
Please See this link : https://stackblitz.com/edit/angular-year-datepicker-ng-bootstrap-8ag1xe
Related
My Dispatch Calendar
I am developing a scheduling calendar that displays each employee and the task assigned to them. I need help in changing the employee axis with the timeline. Similar to the following picture:
Desired Result
V-calendar code:
<v-calendar
category-show-all
ref="calendar"
event-overlap-mode="stack"
v-model="filter.date"
type="category"
:categories="category.list"
:events="category.events"
:event-color="getEventColor"
:now="minimumDate"
#change="getEvents"
:row-height=60
:interval-height="20"
#click:event="showEvent">
</v-calendar>
I am not sure how to change the axis of v-calendar
I am trying to get the current month in an input type month in vue.js, but I have no clue how, does anybody have a clue please?
HTML:
<input type="month" v-model="month">
JS:
data()
{
return{
date: new Date().toISOString().slice(0,10)
};
},
Your v-model attribute on your input element is not referencing your date data property. It does not know where to bind its input value:
<input type="month" v-model="date">
From the docs:
You can use the v-model directive to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type.
I got the problem, the slice was not doing the right amount it should be:
new Date().toISOString().substr(0,7)
instead of
new Date().toISOString().substr(0,10)
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.
Is there any way to highlight (show selected) current date in dojo DateTextBox when the text box is empty? I do not want to show the date in the text box (it should remain empty), but just to show today's date as selected.
I tried to use the 'dropDownDefaultValue' attribute provided by dojo for this, but it is not working (current value is not shown as selected or highlighted).
I am using dojo version 1.7.1.
Any suggestions in this regards that will be great.
If you look at the html that is used for the DateTextBox popup you'll see that the td for the current date looks like this:
<td class="dijitCalendarEnabledDate dijitCalendarCurrentDate dijitCalendarCurrentMonth dijitCalendarDateTemplate" role="gridcell" data-dojo-attach-point="dateCells" aria-selected="false" tabindex="0">
<span class="dijitCalendarDateLabel" data-dojo-attach-point="dateLabels">30</span>
</td>
If you want to style the current date so that it appears differently you should update add a css selector like
.dijitCalendarDateTemplate.dijitCalendarCurrentDate{
/*your styling */
background-color: green;
}