I am getting data in nested array.
I am trying to display my data in this format
Jan
01 Mon newyear
13 sat bhogi
14 sun pongal
Feb
14 tue Valentine's day
Am little bit confused to loop it.
This is what I have tried
<table ng-repeat="list in holidayList" style="width:100%">
<thead>
<tr>
#*<th>{{list.}}</th>*#
</tr>
</thead>
<tbody>
<tr ng-repeat="leave in list">
<td width="14%">{{leave.date}}</td>
<td width="20%">{{leave.monthCode}}</td>
<td>{{leave.holiday_name}}</td>
</tr>
</tbody>
</table>
Converting date is doesn't matter I wrote custom filter and method for that so I can get expected date format by using this filter and method:
app.filter('jsonDate', function () {
return function (date) {
return new Date(date.match(/\d+/)[0] * 1);
}
})
$scope.dateFormat = function (date) {
$scope.formattedDate = date.getFullYear() + "-" + (((date.getMonth() + 1).length) == 2 ? (date.getMonth() + 1) : ("0" + (date.getMonth() + 1))) + "-" + ((date.getDay().length) == 2 ? date.getDay() : ("0" + date.getDay()));
return $scope.formattedDate
}
Current output:
/Date(1484397151447)/ 1 pongal
/Date(1484310751447)/ 1 Bhogi
/Date(1483273951447)/ 1 new year
/Date(1494855933060)/ 5 may day
Can any one tell me that how should I loop to get expected format.
You could just directly access the object: (I am assuming that the month is defined in each array item)
<table ng-repeat="list in holidayList" style="width:100%">
<tbody>
<tr>
<td>{{list[0].month}}</td>
</td>
<tr ng-repeat="leave in list">
<td width="14%">{{leave.date}}</td>
<td width="20%">{{leave.monthCode}}</td>
<td>{{leave.holiday_name}}</td>
</tr>
</tbody>
</table>
If month is not defined then use javascript array for months:
$scope.months = ["Jan", "February, "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
Then on your html:
<td>{{months(list[0].monthCode - 1)}}</td>
or just list[0].monthCode if monthCode starts with 0 for Jan.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am still learning web dev.
Thank you all for your feedbacks...
I would like to choose a month (MMMM-YYYY) from a dropdown and get the html table headers to display the month M, the last month M-1, M-3, M-6, M-11 and M-12
In other words. From the dropdown, if I selected June 2018
the table headers would be:
June 2018 | May 2018 | March 2018 | December 2017 | July 2017 | June 2017
I tried to approach the problem by row first (I just started learning JS) and I stuck on how to flip it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Untitled </title>
<style type="text/css">
</style>
</head>
<body>
<form onsubmit="return false">
<span class="bgthead" >
<select name="features" onchange="alterColumn(this.selectedIndex)">
<option value="1">June 2018</option>
<option value="2">May 2018</option>
<option value="3">April 2018</option>
</select>
</span>
<table>
<thead>
<tr>
</tr>
</thead>
<tbody id="tblBody">
<tr>
<td class="alt">June 2018</td>
</tr>
<tr>
<td class="alt">May 2018</td>
</tr>
<tr>
<td class="alt">March 2018</td>
</tr>
<tr>
<td class="alt">December 2017</td>
</tr>
<tr>
<td class="alt">July 2017</td>
</tr>
<tr>
<td class="alt">June 2017</td>
</tr>
</tbody>
</table>
</form>
The JS part is below:
var columnValues = [
["June 2018","May 2018", "March 2018", "December 2017", "July 2017", "June 2017"],
["May 2018", "April 2018", "February 2018", " November 2017", "June 2017", "May 2017"],
["April 2018", "March 2018", " January 2017", "October 2017", "May 2017", "April 2017"]
];
function alterColumn(grp) {
var sel = document.getElementById('tblBody').getElementsByTagName('td');
var k = 0; grp = Number(grp);
for (var i=0; i<sel.length; i++) {
if (sel[i].className == 'alt') { sel[i].innerHTML = columnValues[grp][k];
k++; }}}
The goal is to have an html table with cells that are filled with data coming from a DB using php. data in table cells changing according to the month displayed in the headers.
The dropdown can be built using the month column in the database table.
my only issue was/is the dynamic table header part using the dropdown...
Thank you again for your feedbacks, corrections... I am learning... I am growing.
Take care!
With this script you should be able to accomplish what you want.
var table = document.getElementsByTagName('td');
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var selectedDate = 'June 2018'; //Selected month from dropdown
var selectedMonth = selectedDate.split(' ')[0]; //Get the data before the frist ' '
var selectedYear = selectedDate.split(' ')[1]; //Get the data after the frist ' '
var wantedMonths = [0, -1, -3, -6, -11, -12]; //List of the month you want
var monthNumber = months.indexOf(selectedMonth); //Returns the month number - 1 (arrays start at 0)
monthNumber++ //True month number
for (i = 0; i < wantedMonths.length; i++) { //Display each month
if (monthNumber + wantedMonths[i] > 0) { //Check if we'll have to go back a year
table[i].innerHTML = months[monthNumber + wantedMonths[i] - 1] + ' ' + selectedYear; //Ouput the month and year
} else { //Not in the same year
table[i].innerHTML = months[(monthNumber + 12) + wantedMonths[i] - 1] + ' ' + (selectedYear - 1); //Taking year, giving 12 months
}
}
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
JS Explanation, first I selected the entire table (table), you may want to select just the row. Then there is a list of the months (months) which is used through out the script. After that there is the data from the drop down (selectectedDate)(I just defined in JS for simplification). Then I split is by the space giving me the month and year in separate variables (selectedMonth and selectedYear). Then the list of months that you want outputted repetitive to the selected month (wantedMonths). Then I get the month number (monthNumber) using the array of months. Then the script loops through the wanted months and outputs them to the table checking if it should go back a year or not. If you have any questions let me know.
You can give each select option a value that reflects the month and the year with a space between with which the String can be split. You can then create a new Date object with the month and year and subtract the number of months you want from it each time (after recreating the Date object).
showChange();
function showChange() {
var date = document.getElementById('dates').value;
var split = date.split(' ');
date = new Date(split[1], parseInt(split[0]) - 1, 17, 0, 0, 0, 0);
var month = date.getMonth();
document.getElementById("1").textContent = formatDate(date);
date.setMonth(month - 1);
document.getElementById("2").textContent = formatDate(date);
date = new Date(split[1], parseInt(split[0]) - 1, 17, 0, 0, 0, 0);
date.setMonth(month - 3);
document.getElementById("3").textContent = formatDate(date);
date = new Date(split[1], parseInt(split[0]) - 1, 17, 0, 0, 0, 0);
date.setMonth(month - 6);
document.getElementById("4").textContent = formatDate(date);
date = new Date(split[1], parseInt(split[0]) - 1, 17, 0, 0, 0, 0);
date.setMonth(month - 11);
document.getElementById("5").textContent = formatDate(date);
date = new Date(split[1], parseInt(split[0]) - 1, 17, 0, 0, 0, 0);
date.setFullYear(date.getFullYear() - 1);
document.getElementById("6").textContent = formatDate(date);
}
function formatDate(date) {
const monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
return monthNames[date.getMonth()] + " " + date.getFullYear();
}
<select onchange="showChange()" id="dates">
<option value="6 2018">June 2018</option>
<option value="5 2018">May 2018</option>
<option value="4 2018">April 2018</option>
</select>
<p/>
<table id="date">
<tr>
<th id="1"></th>
<th id="2"></th>
<th id="3"></th>
<th id="4"></th>
<th id="5"></th>
<th id="6"></th>
</tr>
</table>
var today = new Date();
//$('#timeStampID').val(today.getFullYear() + '-' +
('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' +
today.getDate()).slice(-2));
$('#timeStampID').val(String(('0' +
today.getDate()).slice(-2)) + ' ' +
String(('0' + (today.getMonth() + 1)).slice(-2)) + ' ' +
String(today.getFullYear()));
Here i'm getting output on input filed as : 23 04 2018 but i want to show Apr in place of 04 i.e name of the month
Unfortunately, there isn't a method for this built into the Date object. But you can do something like this:
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var monthName = months[today.getMonth()];
My code returns date in the format dd-MMM--YYYY (example: 13-Jan-2014). I want to add a random time next to it. Something like: 13-Jan-2014 03:00 PM or 13-Jan-2014 03:00 AM. What can I add to get the desired output? Thanks.
function randomDate(start, end) {
return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}
function DateAndTimeFormate(date) {
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var date = new Date(date);
return date.getDate() + '-' + monthNames[(date.getMonth() + 1)] + '-' + date.getFullYear();
}
var datewithformate = DateAndTimeFormate(randomDate(new Date(0000, 0, 0), new Date()));
//Start date
$("#time").val(datewithformate)
You can check this-
function randomDate(start, end) {
return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}
function DateAndTimeFormate(date) {
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var date = new Date(date);
var hours = date.getHours();
var t = hours >= 12 ? 'pm' : 'am';
var hour = (hours % 12).toString().length == 1 ? '0' + (hours % 12) : (hours % 12);
var minutes = date.getMinutes();
var minute = minutes.toString().length == 1 ? minutes + '0' : minutes;
return date.getDate() + '-' + monthNames[(date.getMonth())] + '-' + date.getFullYear() + ' ' + hour + ':' + minute + ' ' + t;
}
var datewithformate = DateAndTimeFormate(randomDate(new Date(0000, 0, 0), new Date()));
//Start date
$("#time").val(datewithformate)
https://jsfiddle.net/Luhtfzxj/3/
You already have a method which produces a random date time, it is only a question of formatting.
function randomDate(start, end) {
return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}
function DateAndTimeFormate(date) {
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var date = new Date(date);
// get the time
var time = date.toLocaleString('en-US', { hour: 'numeric', hour12: true });
// to fulfill your requirements some further manipulations
var ampm = time.slice(-2);
time = parseInt(time);
if (time < 10) { time = '0' + time }
time += ':00 ' + ampm;
return date.getDate() + '-' +
monthNames[(date.getMonth())] + '-' +
date.getFullYear() + ' ' +
time;
}
Example is here.
function DateAndTimeFormate(date) {
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];
var date1 = new Date(date);
date1.setTime(1332403882588);
return date1.getDate() + '-' + monthNames[(date1.getMonth() + 1)] + '-' + date1.getFullYear() + ' ' + date1.getHours() + ':' + date1.getMinutes();
}
You can use .setSeconds(x) method to add a random time with x is random number falls in range of 0 <= x < 86400. For example:
var date = new Date('13-Jan-2014');
// date = Mon Jan 13 2014 00:00:00 GMT+0700 (SE Asia Standard Time)
var randomSeconds = Math.floor((Math.random() * 86400));
// randomSenconds = 53135
date.setSeconds(randomSenconds)
// date = Mon Jan 13 2014 14:45:35 GMT+0700 (SE Asia Standard Time)
I think this javascript library http://momentjs.com/ is helpful for you to manipulate/format/... dates that you don't need to write long/complicated code like the code in your question. For example:
moment().format('MMMM Do YYYY, h:mm:ss a'); // January 13th 2017, 2:17:37 pm
Hello I just need another set of eyes on this. I created this code to set a calendar with the current dates on it, it was working fine but today, sat jan 30, the calendar was still showing it start at sat jan 23.
here is the link to my codepen of it:
http://codepen.io/cavascript/pen/MKXrbj
here is the code:
var date = new Date();
var saturday = date.getDate() - date.getDay() - 1;
var sunday = date.getDate() - date.getDay() ;
var monday = date.getDate() - date.getDay() + 1 ;
var tuesday = date.getDate() - date.getDay() + 2 ;
var wednesday= date.getDate() - date.getDay() + 3 ;
var thursday = date.getDate() - date.getDay() + 4 ;
var friday = date.getDate() - date.getDay() + 5 ;
var saturday = (new Date(date.setDate(saturday))).toDateString();
var sunday = (new Date(date.setDate(sunday))).toDateString();
var monday = (new Date(date.setDate(monday))).toDateString();
var tuesday = (new Date(date.setDate(tuesday))).toDateString();
var wednesday = (new Date(date.setDate(wednesday))).toDateString();
var thursday = (new Date(date.setDate(thursday))).toDateString();
var friday = (new Date(date.setDate(friday))).toDateString();
//add to html row
$('#dateRow').html('<td colspan="4">Date</td><td colspan="4">'+saturday+'</td><td colspan="4">'+sunday+'</td><td colspan ="4">'+monday+'</td><td colspan="4">'+tuesday+'</td><td colspan="4">'+wednesday+'</td><td colspan="4">'+thursday+'</td><td colspan="4">'+friday+'</td><td>Hours</td><td>Delete</td>');
And here is the HTML:
<div class="container-fluid">
<div class="table-responsive">
<table class="table table-bordered">
<tbody>
<tr id="dateRow">
</tr>
<tr>
<td colspan="4">Name</td>
<td colspan="2">Br/lnch</td>
<td colspan="2">Dinner</td>
<td colspan="2">Br/lnch</td>
<td colspan="2">Dinner</td>
<td colspan="2">Br/lnch</td>
<td colspan="2">Dinner</td>
<td colspan="2">Br/lnch</td>
<td colspan="2">Dinner</td>
<td colspan="2">Br/lnch</td>
<td colspan="2">Dinner</td>
<td colspan="2">Br/lnch</td>
<td colspan="2">Dinner</td>
<td colspan="2">Br/lnch</td>
<td colspan="2">Dinner</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
Thank you for any input
Your code
date.getDate() - date.getDay() - 1;
will return 23 as we are presently on 30/01/2016 - so it does exactly what you asked it to do :)
Check out Date.js or Moment.js which have a great many helper methods to make Datetime arithmetic much easier.
I guess you don't want the week shown to not always be from Saturday 23rd to Fri 29th.
Possible solution: call getDate() check if result is a Saturday use this as var saturday and from there you can deduce Monday - Friday. However, if getDate() is not a Saturday find previous saturday and use that.
Also, a useful resource for calendars
Have a go - if you can't do it then pop me a message and I'll gladly help out.
How to show clock with CST time format in HTML page using JavaScript? It should show exact CST time in this format "02 Jul 2015 10:34:45 PM"
Not sure if there is a better way but i was unable to find anything. This works though.
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
];
d = new Date();
//set the offset
var utcOffset = -6;
//get utc
var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
//create new date adjusting by the utcOffset to get local date/time
var localDate = new Date(utc + (3600000 * (utcOffset+1)));
//check if one character if so format as two by adding leading 0.
var formatDay = (localDate.getDate().length > 1) ? localDate.getDate() : '0' + localDate.getDate();
//string everything together
var fullDate = formatDay + ' ' + monthNames[localDate.getMonth()] + ' ' + localDate.getFullYear() + ' ' + localDate.toLocaleTimeString();
$('#div1').html(fullDate);
http://jsfiddle.net/ojga6a5u/