Develop Reference

Display all 12 months serially but starting from the current month

I am working on a requirement where I have 12 ion slides and the names of the slides are month names starting from the current month. For ex: If the current month is June, then the name of the first slide should start from June 2020 and go on till May 2021. Well I tried it but not able to achieve. Even if I handle the month, then I am not able to dynamically change the year after December. Here is my code:
my html file
<ion-toolbar class="toolbars" #ionDragFooter>
<ion-title class="ion-text-center">{{currValue}}</ion-title>
</ion-toolbar>
My .ts file
ngOnInit() {
swipeNext()
}
var monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
var d = new Date();
if(index == 1){
var curMn=monthNames[d.getMonth()]+ d.getFullYear();
console.log(curMn)
this.currValue=curMn;
}
else if(index == 2){
var curMn=monthNames[d.getMonth()+1]+ d.getFullYear();
this.currValue=curMn;
}
else if(index == 3){
var curMn=monthNames[d.getMonth()+2]+ d.getFullYear();
this.currValue=curMn;
}
and so on for all other month. I need to completely automate the month and year starting from the current month. May I know where I went wrong?

You can create a date, then increment the month by 1 eleven times to get 12 months of dates. The month name can be found using toLocaleString with appropriate options.
You need to be careful when incrementing months, e.g.
let d = new Date(2020,0,31); // 31 Jan 2020
d.setMonth(d.getMonth() + 1) // 31 Feb 2020 -> 2 Mar 2020
d.toDateString(); // Mon Mar 02 2020
So best to set the date to the 1st of the month initially:
// Optionally provide a date for the starting month
function getMonthNames(date = new Date()) {
// Copy input date so don't modify it
let d = new Date(+date);
// Set to 1st of month
d.setDate(1);
let result = [];
// Get 12 month names, starting with current month
for (let i=0; i<12; i++) {
result.push(d.toLocaleString('default',{month:'long'}));
d.setMonth(d.getMonth() + 1);
}
return result;
}
console.log(getMonthNames());

To properly change the date you have to increase the date by the amount of months in the date object (in your case d):
var d = new Date();
//REM: This will print out the next month, yet d still is unchanged
console.log(d.getMonth()+1);
console.log(d);
console.log('Month did not increase: ', d.getMonth());
//REM: You have to increase your date by one month in the date object
d.setMonth(d.getMonth() + 1);
console.log(d);
console.log('Month did increase: ', d.getMonth());
//REM: By which it will change the year for you, once it is time for it.
d.setMonth(d.getMonth() + 11); //REM: +1 from before
console.log(d);
console.log('Year did increase: ', d.getFullYear());
In your case that would be:
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var d = new Date();
d.setDate(1); //REM: To prevent month skipping.
for(var i=0; i<12; i++){
d.setMonth(d.getMonth() + 1);
console.log(monthNames[d.getMonth()], d.getFullYear())
};
Some further reading on the issue

This is what I came up with:
const monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
const today = new Date();
//gives you year
const year = today.getFullYear();
//gives you month as number/index;
const month = today.getMonth();
//stores sequenced month names
const sequencedNames = [];
//creates June 2020 through December 2020
for(let i = month; i < monthNames.length; i++) {
let monthName = monthNames[i];
sequencedNames.push(monthName + " " + year)
}
//creates January 2021 through May 2021
for(let i = 0; i < month; i++) {
let monthName = monthNames[i];
sequencedNames.push(monthName + " " + (year + 1))
}
console.log(sequencedNames)
Essentially 2 for loops, the first iterating from the current month to the end of the year, and then the second from the start of the year to the current month -- though adding 1 year.

Coverting DATETIME string to time and date in words Javascript or jQuery

i have a datetime parameter in a string from an JSON object
like this-
datetime:"2015-04-15 09.00.00"
my goal is to convert it to:
"15 April 09:00"
(2015 can be included as well but not necessary)
After i will append in in 2 different places, date and time.
Any suggestions? Can't seem to find any good info apart from getting a plugin.

You can parse the month like the answer here:
https://stackoverflow.com/a/1643468/2498251
var monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
so for your case you can make something like this:
var d = new Date("2015-04-15 09:00:00");
var day = d.getDay();
var month = monthNames[d.getMonth()];
var year = d.getYear();
var hour = d.getHours();
var min = d.getMinutes();
var fullDatetime = day + ' ' + month + ' ' + hour + ':' + min;

simplest way to convert MySql timestamp to month/year with javascript

I get this value from MySQL: 2014-01-11 14:11:10
I would like to take that value and format it like so: Jan 2014
What is the simplest way to do so?

You can instantiate the Date object with the string given, like
var date = new Date("2014-01-11 14:11:10");
and then manipulate with that object. Unfortunately, there is no built-in way to transform it to the format you wish. However you can do this on your own.
In other words, you could do something like
var m_names = new Array("January", "February", "March",
"April", "May", "June", "July", "August", "September",
"October", "November", "December");
var dateString = "2014-01-11 14:11:10";
var date = new Date(dateString);
var msg = m_names[date.getMonth()] + " " + date.getFullYear();
alert(msg);

How to find the next and previous months with JavaScript?

My jQuery function takes in the current month. I would like to display the next and previous months depending on the buttons clicked.
My question is, is there a default Date() function I can call to know the next and previous months of a current month ?
$(document).ready(function () {
var current_date = $('#cal-current-month').html();
//current_date will have September 2013
$('#previous-month').onclick(function(){
// Do something to get the previous month
});
$('#next-month').onclick(function(){
// Do something to get the previous month
});
});
I can write some code and get the next and previous months, but I was wondering if there is any already defined functions for this purpose?
SOLVED
var current_date = $('.now').html();
var now = new Date(current_date);
var months = new Array( "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
$('#previous-month').click(function(){
var past = now.setMonth(now.getMonth() -1);
$('.now').html(months[now.getMonth()]+' '+now.getFullYear());
});
$('#next-month').click(function(){
var future = now.setMonth(now.getMonth() +1);
$('.now').html(months[now.getMonth()]+' '+now.getFullYear());
});

If you just want to get the first day of the next month, you could do something like:
var now = new Date();
var future = now.setMonth(now.getMonth() + 1, 1);
var past = now.setMonth(now.getMonth() - 1, 1);
This will prevent the "next" month from skipping a month (e.g. adding a month to January 31, 2014 will result in March 3rd, 2014 if you omit the second parameter).
As an aside, using date.js* you could do the following:
var today = Date.today();
var past = Date.today().add(-1).months();
var future = Date.today().add(1).months();
In this example I am using today's date, but it works for any date.
*date.js has been abandoned. If you decide to use a library, you should probably use moment.js as RGraham suggests.

Can we get datetime in desired format (July 24th) using Jquery/Javascript?

Can i get DateTime string into desired format.
I want to get current Date into this format July 24th.
How can i get this format using jquery/javascript?
I know about the Jquery DateTime, but i did't find way to convert this into this July 24th format.
My code -
var CurrentDate = new Date();
CurrentDate.format("MMMM dd");
but this code always give me - July 24. How can i convert into my desired format.
Thanks for help, any help will be appreciable.

Test this in jsfiddler here http://jsfiddle.net/Pedro3M/rDW9v/4/
var currentTime = new Date();
var Month=new Array("January", "February", "March","April", "May", "June", "July", "August", "September", "October", "November", "December");
var Suffix=new Array("th", "st", "nd", "rd", "th", "th", "th", "th", "th", "th");
var day = currentTime.getDate();
var month = currentTime.getMonth();
if (day % 100 >= 11 && day % 100 <= 13)
today = day + "th";
else
today = day + Suffix[day % 10];
alert(Month[month]+" "+ today);

Use the plugin of jQuery for datetime format.
The plugin is here: jquery-dateFormat.

I may be completely wrong, but I don't know of any jQuery plugins that support adding "rd", "th" etc. to a date. A quick google didn't get me any results.
Here's some pseudo-code to get you started:
var toAppend = 'th';
var day = CurrentDate.getDate();
switch(day){
case '1':
toAppend = 'st';
break;
case '2':
toAppend = 'nd';
//Add the rest of the special cases
}
// If date is July 24
CurrentDate += toAppend;

Jquery date formatting and a little customization will do the job.
$(document).ready(function(){
var formattedDate = $.datepicker.formatDate("MM dd", new Date());
var day = $.datepicker.formatDate("dd", new Date());
day=parseInt(day);
if(day==1)
formattedDate+="st";
else if(day==2)
formattedDate+="nd";
else if(day==3)
formattedDate+="rd";
else
formattedDate+="th";
alert(formattedDate);
});
Include Jquery & Jquery UI library to get this functionality
Check JSFiddle HERE

As mentioned in this Link, You can do it by getting date separately and then combine as you wish. See the link please.
Some Code:
<script type="text/javascript">
<!--
var m_names = new Array("January", "February", "March",
"April", "May", "June", "July", "August", "September",
"October", "November", "December");
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth();
var curr_year = d.getFullYear();
document.write(curr_date + "-" + m_names[curr_month]
+ "-" + curr_year);
//YOUR FORMAT : (MMMM dd)
document.write(m_names[curr_month]+ ' ' + curr_date);
/* The last two lines above have
to placed on a single line */
//-->
</script>
Be lucky