I want to define the current date displayed by a kendo scheduler like
in the JS approach:
$("#myscheduler").kendoScheduler({
date: new Date("2016/5/5")
});
source: telerik docu
I cannot find mvvm documentation for my task. This does not work:
<div id="myscheduler" data-role="scheduler"
data-date="new Date('2016/5/5')"
data-views="['month']"
data-bind="source: entries, events:{dataBound: schedulerOnDataBound}"
>
I also had no success with data-bind="value: new Date('2016/5/5')"
Did you try simply type the date as string? Please check the demo below (works on my side):
<div data-role="scheduler"
data-views="['day']"
data-date="2016/1/1"
Related
Apologies if this has been answered elsewhere, I have searched but not found anything as of yet.
I have a v-form stored in a database that I wish to pull back and display on a page. However, when I do so the form is not being rendered correctly. It remains as Vuetify template code and is not converted to HTML.
The form looks like this:
<v-form>
<v-container>
<v-row>
<v-col>
<div class="text-h4">Form 1</div>
</v-col>
</v-row>
<v-row>
<v-col
cols="12"
md="6"
>
<v-text-field
:counter="255"
label="Customer ID"
required
></v-text-field>
</v-col>
<v-col
cols="12"
md="6"
>
<v-text-field
label="Amount"
></v-text-field>
</v-col>
<v-col class="text-right">
<v-btn
#click="submitForm"
>
Submit
</v-btn>
</v-col>
</v-row>
</v-container>
</v-form>
I did come across a render function, but I've either not used it correctly or it is not have the desired effect - I'm a newbie at this so it may well be something simple!
The above form is pulled back from the database using axios, and the request happens in the created() function on the page where I wish to display it, using mapGetters() to grab it from the store and v-html in a v-card to show it.
Any help on this would be much appreciated.
Thanks for your time people!
How can I inject a Vuetify form from a database into a template?
You can't.
v-html docs
Updates the element’s innerHTML. Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates. If you find yourself trying to compose templates using v-html, try to rethink the solution by using components instead
Another note from docs
Note that you cannot use v-html to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.
So in short, you cannot insert any partial template into a template of a component at runtime.
But you can create component at runtime and use it as dynamic component
const vm = new Vue({
el: '#app',
data() {
return {
downloadedTemplate: '<div> Hello </div>', // pretend this was downloaded from the server
}
},
computed: {
myDynamicComponent() {
return Vue.component('myDynamicComponent', {
template: this.downloadedTemplate
})
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<component :is="myDynamicComponent" />
</div>
Note that to do this, you must use Vue distribution which includes the template compiler
I don`t know about your particular use case, but unless you are working with tens of different forms, storing templates in database sounds like a sub-optimal strategy - a lot of unnecessary work and hard to mainain
Im using ionic2-calendar to create a calendar in my app. The default event viewer only has time and title but I want to add description and other fields as well. Since I cant change the default, I looked around for some ways to make my own. It turns out that ionic has things called templates. I'm using the month view so the template of interest for me is this one.
<ng-template #template let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel">
...
</ng-template>
<calendar ... [monthviewEventDetailTemplate]="template"></calendar>
The issue I have is that I dont know how to access event info. My events have a "desc" field that holds a description of the event but idk how to access it here. Anyone familiar with this? I basically want something like {{event.title}} to give me the event's title.
You can access all event details by selectedDate.events and also you can add your own property to your events through handle it on your functions.
<ng-template #template let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel">
<calendar-event [events]="selectedDate.events"></calendar-event>
</ng-template>
In the other hand you can define more then one template for one calendar. For example if you want handle calender date view then use [monthviewDisplayEventTemplate]="dateTemplate"
<ng-template #dateTemplate let-view="view" let-row="row" let-col="col">
<span class="event-label">
{{view.dates[row*7+col].label}}
<ion-badge *ngIf="!view.dates[row*7+col].secondary" class="event-count-badge" color="danger">{{myEventsCount[view.dates[row*7+col].label] || ""}}</ion-badge>
</span>
</ng-template>
<ng-template #detailTemplate let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel">
<calendar-event [events]="selectedDate.events"></calendar-event>
</ng-template>
<calendar
[monthviewDisplayEventTemplate]="dateTemplate"
[monthviewEventDetailTemplate]="detailTemplate"
[eventSource]="eventSource"
[calendarMode]="calendar.mode"
[currentDate]="calendar.currentDate"
[showEventDetail]="true"
(onCurrentDateChanged)="onCurrentDateChanged($event)"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
(onTimeSelected)="onTimeSelected($event)">
</calendar>
The bootstrap validator plugin helps validating the form fields providing a bunch of cool features. One of those features are the feedback icons, which defaults to glyphicon.
Suppose I want to replace glyphicon with font awesome.
The documentation says they can be changed by passing a "feedback" JSON object as data attribute or via JavaScript.
Via JavaScript it's easy. But as data attribute, it is unclear where and how exactly add it, because simply adding:
feedback: {
success: 'fa-check',
error: 'fa-times'
}
as data attribute to the <form> or the <div class="form-group"> or the <input> itself it doesn't work.
After some time struggling with it, I realized that the JSON feedback object should be added to the element and also it needs to be added using this syntax (which was not specified in the docs):
<form ... data-feedback='{"success": "fa-check", "error": "fa-times"}'>
Note the quotes syntax.
Also, if we are not just changing the glyphicon but replacing it with a font-awesome one (like in my example), in the <div class="form-group"> we need to replace:
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
with:
<span class="fa form-control-feedback" aria-hidden="true"></span>
This is not very well documented, and I could not make it work. I ended up using a different form validator which accomplish the same functionality and it's easier to configure success/error formats using bootstrap classes:
var validator = $('#submitForm').validate({
validClass: "is-valid",
errorClass: "is-invalid",
jQuery Validator
I'm using Kendo ui's mvvm framework, and trying to get an input to apply a format so the number is formatted to two decimal places. Something like:
<input type="text" id="myTextbox" data-format="0.00" data-bind="value: variableInMyViewModel" />
...but it's not formatting the value. Can you use data-format on an input? If not, what is the best way to accomplish this?
I would probably not use a textbox to take in a number, I would switch to a kendo numerictextbox where you can set the format (n2), and the number of decimals.
<input data-role="numerictextbox" data-decimals="2" data-format="n2" data-bind="value: variableInMyViewModel" />
See demo at kendoui
http://demos.telerik.com/kendo-ui/numerictextbox/mvvm
See documentation at kendoui
http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#configuration-format
I'm trying to use one of these:
http://www.eyecon.ro/bootstrap-datepicker/
However, I'd like it to be the main element, i.e. always be displayed, not hide when clicked away from, and not display the element it writes to. I can't find any documentation or examples on how to do this. Any ideas?
I'd like to use this datepicker if at all possible because it's what I use in other areas of the site (where a non-persistent picker is needed) and would like to keep things consistent.
<input type="text" name="startdate" id="date" />
<div class="date" data-altfield="#date"></div>
$(function(){
$('.date').each(function(i,e){
var $d = $(this);
$d.datepicker({
altField: $d.data('altfield')
});
});
});
check it here : http://jsfiddle.net/MDTXS/2/