I'm new to vuejs and had to use date range picker. I'm using vue-rangedate-picker and after selecting a date range, $emit type event is fired and I found the required values in the payload of the event as shown below (event info taken from vue debugger):
name: "selected"
type: "$emit"
source: "<vue-rangedate-picker>"
payload: Array[1]
0: Object
end: "Fri May 31 2019 05:30:00 GMT+0530 (India Standard Time)"
start: "Wed May 01 2019 05:30:00 GMT+0530 (India Standard Time)"
I need to get the values in payload so I can assign to variables and use them later. I tried to find the solution for hours and had no luck.
Here is the element
<vue-rangedate-picker
righttoleft="true"
i18n="EN"
format="YYYY-MM-DD HH:mm:ss"
#selected="testDatePicker()"
></vue-rangedate-picker>
And the script
testDatePicker() {
console.log(/*what should I write here to get the payload?*/);
}
How do I get the payload values so I can assign them to variables? Please help me.
Your function testDatePicker will receive the range in the following form:
testDatePicker({start, end}) {
console.log(start, end);
}
or if you prefer:
testDatePicker(range) {
console.log(range.start, range.end);
}
Also, you should not use parenthesis in the call:
<vue-rangedate-picker
righttoleft="true"
i18n="EN"
format="YYYY-MM-DD HH:mm:ss"
#selected="testDatePicker"
></vue-rangedate-picker>
Like that, you pass a "reference" to your method, and the component will call it with needed parameters.
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.
I am using react native push notification.
But when i am trying to push local schedule, notification not show as time expected. It always showed when i reload the app (same behaviour like PushNotification.localNotification
how to set date for parameter inside PushNotification.localNotificationSchedule ? i am confuse to set value there. I already using timestamp but looks like the value is different.
1578909865373 => using date.now
1578907260 => i convert from string date to timestamp
my code :
function toTimestamp(strDate){
var datum = Date.parse(strDate);
return datum/1000;
}
const dated= toTimestamp('01/13/2020 16:21:00');
PushNotification.localNotificationSchedule({
//... You can use all the options from localNotifications
message: "testing notification", // (required)
date: date: new Date(dated) // in 60 secs
// date: new Date("2020/01/13")
});
}
please help how to insert or convert right value for date.
Thank you
Turn out i dont have to divide by 1000
timestamp is milliseconds.
so right function is
function toTimestamp(strDate){
var datum = Date.parse(strDate);
return datum;
}
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
I have a problem with sencha touch datepicker field. I want to set default (current date) in datepicker field but I am not able to find a way to do that. I am using sencha architect and there is no property exist to set default date in datepickerfield.
I am using the following code in value property of datepickerfield:
{
year: (new Date()).getFullYear(),
day: 1,
month: 5
}
But application stop working when using above code to display date.
Please tell me how to achieve this.
Checkout the 'value' property
http://docs.sencha.com/touch/2.2.1/#!/api/Ext.picker.Date-cfg-value
You'll want to add an initialize function to whatever class contains your datepicker.
Select that class.
Then add an initialize function from the config
panel.
Then add the following code to the initialize function:
var picker = this.down('datepicker');
picker.setConfig({
value: new Date()
});
this.callParent();
Of course if you have multiple datepickers you'll want to give it an item id and use this.down('#thedatepicker');
This can be done in the config of the container itself as follows:
xtype: 'datepickerfield',
value: new Date(),
picker: {
yearFrom: 2015,
yearTo: 2030
}