We Keep Coding

VueJS Datepicker change the position day and month

I am using this datepicker - vuejs-datepicker. Current date format is MM.DD.YYYY, but I need it in DD.MM.YYYY format. For this I used the following customFormatter function.
customDatepickerFormatter: function (date) {
return moment(date).format("DD.MM.YYYY");
},
However, the input for example 21.09.2022 is rejected because vuejs datepicker interprets the date as 09.21.2022 which is obviously not a valid date. Can you help me fix this?

Here is how I would integrate a simple but friendly formater supporting EU formatting.
<template>
<section>
<div>
Input your date (DD MM YYYY format)
<input type="text" v-model.lazy="date" /> <!-- updating on focus lost -->
</div>
<p>result: {{ formatted }}</p>
</section>
</template>
<script>
import { format } from "date-fns";
export default {
data() {
return {
date: "20 11 2020",
};
},
computed: {
formatted() {
let [day, month, year] = this.date.split(/\D/) // safe for the separation
return format(new Date(year, month - 1, day), "PPP") // month - 1 offset is to make it simpler to compute
},
},
};
</script>
This is how it looks
Otherwise it looks like this package could also be a nice fit for you apparently: https://vuejscomponent.com/vuejs-datepicker-europedateformat

Remove past dates and next months dates from the current month displaying

I am trying to figure out a way to remove past dates, future months dates, and both past and future dates events and only display current month dates and their events.
I am new to javascript and I am not able to determine how to add the following piece of code.
eventRender: function(event, element, view)
{
if(event.start.getMonth() !== view.start.getMonth()) { return false; }
}
into a code that took me a while to figure out but was able to use certain sections of fullcalendar to create another calendar:
<cffunction name="FullCalendar">
<cfscript>
var calendarid = $.getbean('content').loadby(title='Regal Events').getcontentid();
</cfscript>
<cfsavecontent variable="local.str">
<cfoutput>
<h3>Upcoming Events</h3>
<div id="UpcomingCal" class="calendarResize">
</div>
<script>
mura.loader()
.loadcss("#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar.css",{media:'all'})
.loadcss("#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar-custom.css",{media:'all'})
.loadcss("#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar.print.css",{media:'print'})
.loadjs(
"#$.siteConfig('requirementspath')#/fullcalendar/lib/moment.min.js",
"#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar.min.js",
"#$.siteConfig('requirementspath')#/fullcalendar/gcal.js",
function(){
$('##UpcomingCal').fullCalendar({
eventSources: [
{
url: '#variables.$.siteConfig('requirementspath')#/fullcalendar/proxy.cfc?calendarid=#esapiEncode("javascript",CalendarID)#'
, type: 'POST'
, data: {
method: 'getFullCalendarItems'
, calendarid: '#esapiEncode("javascript",CalendarID)#'
, siteid: '#variables.$.content('siteid')#'
, categoryid: '#esapiEncode('javascript',variables.$.event('categoryid'))#'
, tag: '#esapiEncode('javascript',variables.$.event('tag'))#'
}
<!---, color: '#this.calendarcolors[colorIndex].background#'
, textColor: '#this.calendarcolors[colorIndex].text#'--->
, error: function() {
$('##mura-calendar-error').show();
}
},
]
})
}
)
</script>
</cfoutput>
</cfsavecontent>
<cfreturn local.str />
</cffunction>
Any help would be appreciated, thanks
Update: I learned I need to use weekMode to hide both past months and future months days and the events that belong to them. However, not sure how to implement it to the code I have

How to extract only the months from the datepicker widget in Kendo UI to an alertbox?

I am currently working on an ASP.NET MVC 4 project, in my view I am using Kendo UI. I want to display only the month and year from the Datepicker widget(Example: JANUARY 2016) into the alertbox, but instead I am getting the following:IMAGE
My view code is as follows:
#(Html.Kendo().DatePicker()
.Name("datepicker")
.Start(CalendarView.Year)
.Depth(CalendarView.Year)
.Format("MMMM yyyy")
.Value(DateTime.Today)
.HtmlAttributes(new { style = " width: 95.5%;})
.Events(e => e.Change("monthpicker_change"))
)
<script>
// monthpicker_change function
function monthpicker_change() {
var month = $("#datepicker").data("kendoDatePicker");
alert(month.value());
}
</script>
Please suggest me what changes I need to do in my script, in order to display only the selected Month and Year in an Alert box.
PS: I have formatted the datepicker to display only the MONTHS and YEAR, not the standard dates

kendoDatePicker.value method always return javascript Date.
You should use Date methods to extract month and year from date object:
var date = $("#datepicker").data("kendoDatePicker").value();
alert((date.getMonth()+1) + '.' + date.getFullYear());
Beware: getMonth() return values from 0 to 11; 0 is january.
Here is full reference of Date functions: http://www.w3schools.com/jsref/jsref_obj_date.asp

Javascript data needs to display HTML output as columns once the following year is evaluated

I have data from last 3 years that I need to display as YEARS for each column.
In C# /asp.net I am looping through and getting all the data and then in javascript I end up looping through the data and then just appending rows to a table.
The problem with this is that since the data goes from 2015 records to then onto 2014 and then 2013 that I will end up with 1 column and many rows
However I want to break it about and show it as
2015 2014 2013
a a a
b b b
Thus how can I do that with the data? I though about Pivoting the data, and I though about div tags , but nothing seems that clear to me
Mockup
Update
I see in another project that this was done in angular (not relevant to my issue) but the way in which it was done was to assume that there was ALWAYS data in each month folder for each year, however, this is not the case to which I have only 4 months to display for 2015
Example of the existing code:
<table class="table-light">
<tr>
<th ng-repeat="year in years"><h2>{{ year }}</h2></th>
</tr>
<tr ng-repeat="month in months">
<td ng-repeat="year in years" class="text-center">
<!-- directory path predicted based on history -->
<a target="_blank" class="link"
href="http://Logs\{{ year }} LOGS\{{ month.number }} - {{ year }}\&file=pdf">{{ month.title }}</a>
</td>
</tr>
</table>
Update 2
My data from chrome console looks like this
Then what I have showing on the web page ends up showing the 2015 months with data, but then It shows that I have files in the month January thus it is getting displayed
3 months from 2015 then 1 month of 2016 , so thus my c# code is correctly knowing to only return the month folders which have files, but I want to arrange them into 3 columns ( I want to display 3 years 2016, 2015, 2014)
I only want to show 1 distinct month if a month contains 1 to many files thus the logic in the javascript below
var strResult = "";
var month = "";
var final = "";
strResult = "<table class='table-light' id='myTableId'><thead><tr><th style='text-align:left;'><h2>2015</h2></th></tr></thead><tbody>";
var unique = {};
var distinct = [];
for (var i in files) {
if (typeof (unique[files[i].shortMonth]) === "undefined") {
distinct.push(files[i].shortMonth);
// do the work here
month = files[i].month;
if (month === "" || month === null) {
month = "";
}
strResult += "<tr><td><a target='blank' class='link ng-binding' href='files.html?id=sub&year=" + files[i].year + "&month=" + files[i].shortMonth + "' onclick=\"getFiles('" + files[i].year + "','" + files[i].shortMonth + "');\">" + month + "</a></td></tr>";
final += month + ",";
}
unique[files[i].shortMonth] = 0;
}
So hopefully that makes more sense as I know how to loop through javascript, but I want to end up displaying the html with the "look" of the screenshot under the word Mockup
However, with the caveat that that the reality is the data as it stands will really only show
2016 2015 2014
January August July
September August
October December

Angular performance issues, ng-repeat, unwanted callbacks

I'm facing some serious performance issues in my angular app, surely due to my bad ng-repeat implementation but I don't know how to do better. I've tried some other combinations but none give me the result I want, nor better performance. There have been some infinite loops, undefined variables due to asynch and $digest aborting.
This is how it should be looking (so that's the working result, but not optimized for now) : http://scr.hu/0ei9/8bpw9
Days with blue cells = user is present, red cell = absent. Beneath are the "shifts" per day (each shift can be done on various days).
When I console.log some of the functions, they are called way too many times than needed, for example isPresent (for checking if the user submited the day as available) is called 5x180 (180 being probably 5 users x 30 days of month) and getDayOfWeek (used in template for the shifts row) 28+840+812...there are 10 shifts. Whereas I would normally need to call isPresent only 1x180 for all cells and getDayOfWeek 1x30 days of month for one shifts row. That said, I don't really get why its called sooo many times and how to optimize it.
In addition, when I click on a blue cell, the setShift() function is called. I copied the function here but don't analyze it, I only wanted to show that it nowhere calls any of the previous functions, however I console.log an impressive 28x "days of the week" + 180 "is present" and + 812 "day of the week". No Idea where it comes from... to be frank, everything i click calls this same amout - if I change the month, year, click on an independent button...
I omitted some classes and css for better code reading.
Thanks for your help.
Edit
after commenting and decommenting some of the code I see that the most of those unwanted logs when I call the setShift() function come from the last sub-call : showPopover() where I open a $modal. When commented, there is like 1/3 of what I'm used to see. Before the modal appears there is the rest of this stuff. Furthermore I think that the temlpateUrl might be the cause because when commented it does not log all those houndreds of 'is present' and 'day of week'. And when I click anywhere on the modal, it recalls all those functions. Any ideas?
JS angular functions
$scope.isPresent = function(day, month, year, userId) {
console.log('is present')
var date = new Date(year, month - 1, day + 1)
var day = moment(date).format("D-M-YYYY");
for (var i = 0; i < $scope.presences.length; i++) {
var presentDay = moment($scope.presences[i].start).format("D-M-YYYY")
if (presentDay == day && userId == $scope.presences[i].coursierId) {
return true
}
}
}
$scope.getDayOfWeek = function(day, month, year) {
console.log('day of the week')
var date = new Date(parseInt(year), month - 1, day + 1)
var dayId = date.getDay();
return dayId;
}
/*
used for a limited ng-repeat
*/
$scope.getTimes = function(n) {
return new Array(n);
};
/*
Shows a list of sorted out shifts with corresponding
hours, cities and capabilities of coursier.
*/
$scope.setShift = function(day, month, year, userId, event) {
var date = new Date(year, month - 1, day)
var day = moment(date).format("D-M-YYYY");
var dayOfWeek = moment(date).day()
//SORT SHIFTs BY DAY OF WEEK clicked
var day_shifts = $scope.sortShiftByDayOfWeek(dayOfWeek)
//console.log(day_shifts)
//check if the day clicked is an dispo present day
for (var i = 0; i < $scope.presences.length; i++) {
var dispoDay = moment($scope.presences[i].start).format("D-M-YYYY")
//if yes, check the presence user id and the cell of user clicked
if (dispoDay == day) {
//then get all the shifts that fit into this coursier's time range
if ($scope.presences[i].coursierId == userId) {
var dispo = $scope.presences[i];
var dispoHours = $scope.getDispoHoursAndDay(dispo);
var time_shifts = $scope.compareDiposHoursAndShift(dispoHours, day_shifts);
//then sort the shifts by the dispo's and shift's cities
var time_city_shifts = $scope.compareDispoCityAndShift(time_shifts, dispo);
var time_city_able_shifts = $scope.compareUserAndShift(time_city_shifts, userId);
$scope.showPopover(time_city_able_shifts, event);
}
};
};
}
###Calendar table
<table class="table table-bordered">
<!--days of month-->
<tr class="mainHeader">
<th>coursier/jour</th>
##calendar.days = 30 days of month, for example
<th class="monthDay" ng-repeat=" numDay in [] | range: calendar.days">{{$index+1}} {{calendar.daysNames[$index]}}
</th>
</tr>
<!-- user name and days -->
<tr ng-repeat="user in coursiers">
<!-- <td class="coursierName">nom coursier</td> -->
<td>
{{user.name}}
</td>
<td ng-click="setShift($index+1, monthNum,year, user._id, $event)" ng-repeat="numDay in getTimes(calendar.days) track by $index" ng-class=" isPresent($index, monthNum,year, user._id) == true ?
'present' : isAbsent($index, monthNum,year, user._id) == true ?
'absent' : '' ">
</td>
</tr>
<tr>
<td>Shifts par jour</td>
<td class="shiftsParJourCell" ng-repeat="day in getTimes(calendar.days) track by $index">
<span ng-repeat="shift in shifts">
<span ng-repeat="jour in shift.jours">
{{jour.id ==
getDayOfWeek($parent.$parent.$index, monthNum, year) ? shift.nom : ''}}
</span>
</span>
</td>
</tr>
</table>

After a while, in my case the problem was that I wasn't using directives.
The scopes were having unwanted interactions (still don't know why) but after separing my html in angular directives there are no issues so far.