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.
Related
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 want to change the language a date picker is displayed in based on a moment() locale. Not just a translation of the date chosen by the user, but the date picker itself.
I have a datepicker with the following date-formatter
<b-datepicker
:date-formatter="(date) => moment(date).locale('ar').format('YYYY-MM-DD')"
></b-datepicker>
But am unable to get the date picker to change language. I've made sure to import and set the moment locale before hand.
Set locale, then format the date and then return it.
moment(date).locale('ar').format('LLLL');
You can format the date in different formats.
UPDATE:
To change moment language just define reactive data property (for example lang):
export default {
data() {
return {
lang: "ar"
}
}
}
and in your template:
<b-datepicker
:date-formatter="(date) => moment(date).locale(lang).format('YYYY-MM-DD')"
></b-datepicker>
So whenever you change lang, your date will be reformatted accordingly to your selected language.
Use month-names and day-names to translate the date picker. See here.
With moment, you can do that way:
<b-datepicker
:date-formatter="(date) => moment(date).locale(lang).format('YYYY-MM-DD')"
:month-names="moment.locale(lang).month()"
:day-names="moment.locale(lang).weekdaysShort()"
/>
But you should define locale(lang) at a global scope instead in component template...
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.
I am using FullCalendar v2 now and I found it is quite useful. However, I have encountered a problem when I want to show the end time of an event.
I want to show both start time and end time within a day in week and daily view like "09:00-17:00". I have found a solution in Display ending time in fullcalendar week view only but it seems a v1 version. I use this in v2 and failed.
How can I show both start time and end time within a day?
I found that this answer worked for me: https://stackoverflow.com/a/24951989/590382
In FullCalendar >= 2.0.1, there is a setting called displayEventEnd.
Documentation: http://fullcalendar.io/docs/text/displayEventEnd/
Whether or not to display an event's end time text when it is
rendered on the calendar.
Example:
displayEventEnd: {
month: false,
basicWeek: true,
"default": true
}
The answer here: Fullcalendar event's end time is missing works for version 1.6.1. However, the formatDates function has been replaced by formatRange in v2. So, use
eventAfterRender: function(event, $el, view) {
var formattedTime = $.fullCalendar.formatRange(event.start, event.end, "HH:mm");
// If FullCalendar has removed the title div, then add the title to the time div like FullCalendar would do
if($el.find(".fc-event-title").length === 0) {
$el.find(".fc-event-time").text(formattedTime + " - " + event.title);
}
else {
$el.find(".fc-event-time").text(formattedTime);
}
}
No need for such a convuluted answer as the one above.
I had the same issue and I fixed it by simply configure the fullcalendar properties as so:
timeFormat: {
month: "HH:mm",
week: "HH:mm",
day: "HH:mm"
},
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
}