I faced a problem while trying to calculate between 2 different times.
I am using vue-moment, and i tried to calculate the time with diffs but with no success.
data() {
return {
date: moment('12-11-2019').format("DD-MM-YYYY"),
date2: moment('13-11-2019').format("DD-MM-YYYY"),
startTime: this.date.diff(this.date2)
what is the right way of using moment in data and methods?
P.S.
i want to calculate the hours also and parse it with the date in the same argument, but i couldnt do it right.
You should be able to make it work with a computed property no problem:
computed: {
startTime() {
return this.date.diff(this.date2);
}
}
Working example
Related
I am using vuejs-datepicker and I set datepicker (calendar) to today date by default like this:
<datepicker v-model="theDate" format="yyyy-MM-dd"></datepicker>
<!--shows yesterday date in calendar instead of today. "format" needed to get right format.-->
...
data() {
return {
myDate: null
}
},
...
created() {
this.myDate = this.$moment().format("YYYY-MM-DD")
console.log(this.myDate) //gives me today date in right format but no shows the same
}
...
This must be very basic and simple thing. But I don't really get why it is showing yesterday date and how to fix it.
Update: this describes my issue: https://github.com/charliekassel/vuejs-datepicker/issues/23
Finally, I found one solution here https://github.com/charliekassel/vuejs-datepicker/issues/158.
I just started programming in vue. js.
I want to program a clock that outputs as text a time after typing it in hh:mm format.
To do this, I have to divide the input into minutes and hours and save the values in a variable. How do you do that? Can I use split?
You may use VueJS Computed & Javascript Split function to achieve what you need.
Eg:
data: () => ({
userInput: '' // 08:33
}),
computed: {
hours: function() {
return this.userInput.split(":")[0] // return 08
},
minutes: function() {
return this.userInput.split(":")[1] // return 33
}
}
Computed method will listen to the change of userInput in this case. Meaning if the user key in 08:33, then decided to change to 08:44, the minutes will react and change to 44.
Okay, so I have an input field with below code and wanting use decimals to look like 10,000 for 100000.
input#payment.form-control(type='number'
v-model='payment')
Payment for v-model is coming from computed data using mixin and updates new value using methods.
computed:{
get () { return this.NameOfMixin.payment },
set (value) {this.updateStore('payment', value)}
},
methods: {
updateStore(field, value) {
...
}
}
All the code above are working fine except now I want to display decimals and use a plain number for updating the store.
I have tried using creating methods to convert the value to decimals and v-money but nothing worked as I wished.
This looks to be answered many different times but I can't seem to get it working with my implementation. I am trying to format and limit the data in a sap.m.Input element. I currently have the following:
var ef_Amount = new sap.m.Input({
label: 'Amount',
textAlign: sap.ui.core.TextAlign.Right,
value: {
path: '/amount',
type: 'sap.ui.model.type.Currency'
}
});
The first problem is that it kind of breaks the data binding. When I inspect the raw data (with Fiddler) submitted to the server it is an array like this:
"amount": [1234.25,null]
The server is expecting a single number and as such has issues with the array.
When I use the following, the binding works as desired but no formatting is performed.
var ef_Amount = new sap.m.Input({
label: 'Amount',
textAlign: sap.ui.core.TextAlign.Right,
value: '{/amount}'
});
The second problem is that the data entered is not limited to numbers.
I have tried using sap.m.MaskedInput instead but I don't like the usage of the placeholders because I never know the size of the number to be entered.
And lastly, it would be nice if when focus is placed on the input field, that all formatting is removed and re-formatted again when focus lost.
Should I be looking into doing this with jQuery or even raw Javascript instead?
Thank you for looking.
the array output is a normal one according to documentation. So you need to teach your server to acccept this format or preprocess data before submission;
this type is not intended to limit your data input;
good feature, but ui5 does not support this, because the Type object has no idea about control and it's events like "focus" it only deals with data input-output. So you have to implement this functionality on your own via extending the control or something else.
I would suggest using amount and currency separately. It's likely that user should be allowed to enter only valid currency, so you can use a combobox with the suggestions of the available currencies.
So, after much work and assistance from #Andrii, I managed to get it working. The primary issue was that onfocusout broke the updating of the model and the change event from firing. Simply replacing onfocusout with onsapfocusleave took care of the issues.
The final code in the init method of my custom control:
var me = this;
var numberFormat = sap.ui.core.NumberFormat.getCurrencyInstance({maxFractionDigits: 2});
me.addEventDelegate({
onAfterRendering: function() {
// for formatting the figures initially when loaded from the model
me.bindValue({
path: me.getBindingPath('value'),
formatter: function(value) {
return numberFormat.format(value);
}
});
},
onfocusin: function() {
// to remove formatting when the user sets focus to the input field
me.bindValue(me.getBindingPath('value'));
},
onsapfocusleave: function() {
me.bindValue({
path: me.getBindingPath('value'),
formatter: function(value) {
return numberFormat.format(value);
}
});
}
});
I'm pulling a JSONP date for different events and workshops from RegOnline, which gives me:
/DATE(1408545000000)/
I'm using Handlebars to list the different events, and I'm attempting to use MomentJS as a registerHelper. objs is the array of objects I'm pulling from RegOnline:
function bindEvents(objs) {
Handlebars.registerHelper('formatDate', function(objs){
return new Handlebars.SafeString(
moment(objs.StartDate).format("LL")
);
});
var eventHost = $("#eventHost").html();
var eventTpl = Handlebars.compile(eventHost);
$(".event-list").append(eventTpl(objs));
}
Here's my template:
<span class="timestamp">{{City}}, {{State}} - {{formatDate StartDate}}</span>
This gives me the current date, instead of the date of the event. What am I missing?
Figured it out! I didn't need to define objs.StartDate in the Moment line. Handlebars takes care of that for me, so I just needed to use objs.