In this script it tries to do so that when you choose the date and the given format it shows. Of course, something is wrong with validation . If the "Select date format" option is selected, it will show an error. If you choose the other 2 formats, normally you should do
var nazwamiesiecy = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var nazwadni = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
let input = document.querySelector("input");
let guzik = document.querySelector("button");
guzik.addEventListener("click", () => {
event.preventDefault();
let wybranaData = new Date(input.value);
let format = document.querySelectorAll("select").value
let opcja1 = document.querySelectorAll("option")[0].value
let opcja2 = document.querySelectorAll("option")[1].value
let opcja3 = document.querySelectorAll("option")[2].value
if (!input.value) {
alert("Enter the date");
return;
}
if (!opcja1) {
alert("Enter the date format")
return;
}
if (!opcja2) {
document.getElementById("dataa").innerHTML = wybranaData.getDate() + " " + nazwamiesiecy[wybranaData.getMonth()] + " " + wybranaData.getFullYear().toString() + " roku";
return;
}
if (!opcja3) {
document.getElementById("dataaa").innerHTML = wybranaData.getDate() + "." + wybranaData.getMonth() + "." + wybranaData.getFullYear().toString();
return;
}
})
<form name="">
<div>
<label for="txtnum1">Date: </label>
<input type="date" name="txtnum1" id="txtnum1">
</div>
<label for="sztos">Date format: </label>
<select name="sztos" id="sztos">
<option value="">Choose a date format</option>
<option value="op">12/04/2000</option>
<option value="xd">12 April 2000</option>
</select>
<button type="submit">Calculate</button>
<div id="dataa"></div>
<div id="dataaa"></div>
</form>
Your opcja tests are wrong,
querySelectorAll returns a nodeList Just test the querySelector("select").value
your format is with dots, not slashes
you are not passing the event in the event listener
no need to use toString on numbers when you concatenate
var nazwamiesiecy = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var nazwadni = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
let input = document.querySelector("input");
let guzik = document.querySelector("button");
let dataa = document.getElementById("dataa")
guzik.addEventListener("click", (event) => {
event.preventDefault();
if (!input.value) {
alert("Enter the date");
return;
}
let format = document.querySelector("select").value
if (!format) {
alert("Enter the date format")
return;
}
let wybranaData = new Date(input.value);
let dateString = "";
if (format === "xd") {
dateString = wybranaData.getDate() + " " + nazwamiesiecy[wybranaData.getMonth()] + " " + wybranaData.getFullYear() + " roku";
} else if (format === "op") {
dateString = wybranaData.getDate() + "/" + wybranaData.getMonth() + "/" + wybranaData.getFullYear();
}
dataa.innerHTML = dateString;
})
<form name="">
<div>
<label for="txtnum1">Date: </label>
<input type="date" name="txtnum1" id="txtnum1">
</div>
<label for="sztos">Date format: </label>
<select name="sztos" id="sztos">
<option value="">Choose a date format</option>
<option value="op">dd/mm/yyyy</option>
<option value="xd">dd MMMMMM yyyy</option>
</select>
<button type="submit">Calculate</button>
<div id="dataa"></div>
</form>
Related
I have a working calendar demo. I have tested the code on more than one theme and everything works perfectly. The code however won't work with Astra Theme which is what I am using for my WordPress Website. I am not sure what the problem is at this point maybe someone would help me with this. This code also adds links to the dates. The problem is that Astra Theme strips the dates of the links when you change the date using the navigation buttons or date/month selector. Other themes seem to work perfectly. I checked console for errors and this is what I see:
(index):267 Uncaught TypeError: links is not a function
at previous ((index):267)
at HTMLButtonElement.onclick ((index):182)
The code is
<div class="wrapper">
<div class="container-calendar">
<h3 id="monthAndYear"></h3>
<div class="button-container-calendar">
<button id="previous" onclick="previous()">‹</button>
<button id="next" onclick="next()">›</button>
</div>
<table class="table-calendar" id="calendar" data-lang="en">
<thead id="thead-month"></thead>
<tbody id="calendar-body"></tbody>
</table>
<div class="footer-container-calendar">
<label for="month">Jump To: </label>
<select id="month" onchange="jump()">
<option value=0>Jan</option>
<option value=1>Feb</option>
<option value=2>Mar</option>
<option value=3>Apr</option>
<option value=4>May</option>
<option value=5>Jun</option>
<option value=6>Jul</option>
<option value=7>Aug</option>
<option value=8>Sep</option>
<option value=9>Oct</option>
<option value=10>Nov</option>
<option value=11>Dec</option>
</select>
<select id="year" onchange="jump()"></select>
</div>
</div>
</div>
<script>
function generate_year_range(start, end) {
var years = "";
for (var year = start; year <= end; year++) {
years += "<option value='" + year + "'>" + year + "</option>";
}
return years;
}
var today = new Date();
var currentMonth = today.getMonth();
var currentYear = today.getFullYear();
var selectYear = document.getElementById("year");
var selectMonth = document.getElementById("month");
var createYear = generate_year_range(2016, 2021);
/** or
* createYear = generate_year_range( 1970, currentYear );
*/
document.getElementById("year").innerHTML = createYear;
var calendar = document.getElementById("calendar");
var lang = calendar.getAttribute('data-lang');
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var dayHeader = "<tr>";
for (day in days) {
dayHeader += "<th data-days='" + days[day] + "'>" + days[day] + "</th>";
}
dayHeader += "</tr>";
document.getElementById("thead-month").innerHTML = dayHeader;
monthAndYear = document.getElementById("monthAndYear");
showCalendar(currentMonth, currentYear);
function next() {
currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear;
currentMonth = (currentMonth + 1) % 12;
showCalendar(currentMonth, currentYear);
links ()
}
function previous() {
currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear;
currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
showCalendar(currentMonth, currentYear);
links ()
}
function jump() {
currentYear = parseInt(selectYear.value);
currentMonth = parseInt(selectMonth.value);
showCalendar(currentMonth, currentYear);
links ()
}
function showCalendar(month, year) {
var firstDay = (new Date(year, month)).getDay();
tbl = document.getElementById("calendar-body");
tbl.innerHTML = "";
monthAndYear.innerHTML = months[month] + " " + year;
selectYear.value = year;
selectMonth.value = month;
// creating all cells
var date = 1;
for (var i = 0; i < 6; i++) {
var row = document.createElement("tr");
for (var j = 0; j < 7; j++) {
if (i === 0 && j < firstDay) {
cell = document.createElement("td");
cellText = document.createTextNode("");
cell.appendChild(cellText);
row.appendChild(cell);
} else if (date > daysInMonth(month, year)) {
break;
} else {
cell = document.createElement("td");
cell.setAttribute("data-date", date);
cell.setAttribute("data-month", month + 1);
cell.setAttribute("data-year", year);
cell.setAttribute("data-month_name", months[month]);
cell.className = "date-picker";
cell.innerHTML = "<span>" + date + "</span>";
if (date === today.getDate() && year === today.getFullYear() && month === today.getMonth()) {
cell.className = "date-picker selected";
}
row.appendChild(cell);
date++;
}
}
tbl.appendChild(row);
}
}
function daysInMonth(iMonth, iYear) {
return 32 - new Date(iYear, iMonth, 32).getDate();
}
function links () {
document.querySelectorAll('td.date-picker > span').forEach(element => {
var year = element.parentElement.getAttribute('data-year');
var month = element.parentElement.getAttribute('data-month');
var day = element.textContent;
if (month.length === 1) {
month = "0" + month;
}
if (day.length === 1) {
day = "0" + day;
}
element.innerHTML = '' + element.textContent + ' '
})
}
links ()
</script>
I am using blogger for few a few months. I found an archive Plain JavaScript from a blogging tutorial blog. Wherever I paste the script, it loads the archive posts successfully. But it takes several seconds to display the output and blocking the remaining page contents.
I want to place the JavaScript in the bottom of the body tag. I haven’t much idea to modify this script to load from the bottom of the body tag. It may not block the other contents if it placed in the bottom of the page.
The HTML
<body>
<header>
</header>
<div class="contents">
<div class="blog-posts"></div>
<div class="static_archive">
Archive output here.
<!-- If I place the script here, it runs ok but blocking the remaing contents of the page untill it loaded. -->
</div>
<aside>
<div class="widget1">
<div class="archive"></div>
</div>
</aside>
</div>
<footer>
</footer>
<script>
//I need Javascript placement here.
</script>
</body>
The JavaScript
<script>
function LoadTheArchive(TotalFeed) {
var PostTitles = new Array();
var PostURLs = new Array();
var PostYears = new Array();
var PostMonths = new Array();
var PostDays = new Array();
if ("entry" in TotalFeed.feed) {
var PostEntries = TotalFeed.feed.entry.length;
for (var PostNum = 0; PostNum < PostEntries; PostNum++) {
var ThisPost = TotalFeed.feed.entry[PostNum];
PostTitles.push(ThisPost.title.$t);
PostYears.push(ThisPost.published.$t.substring(0, 4));
PostMonths.push(ThisPost.published.$t.substring(5, 7));
PostDays.push(ThisPost.published.$t.substring(8, 10));
var ThisPostURL;
for (var LinkNum = 0; LinkNum < ThisPost.link.length; LinkNum++) {
if (ThisPost.link[LinkNum].rel == "alternate") {
ThisPostURL = ThisPost.link[LinkNum].href;
break
}
}
PostURLs.push(ThisPostURL);
}
}
DisplaytheTOC(PostTitles, PostURLs, PostYears, PostMonths, PostDays);
}
function DisplaytheTOC(PostTitles, PostURLs, PostYears, PostMonths, PostDays) {
var MonthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var NumberOfEntries = PostTitles.length;
var currentMonth = "";
var currentYear = "";
for (var EntryNum = 0; EntryNum < NumberOfEntries; EntryNum++) {
NameOfMonth = MonthNames[parseInt(PostMonths[EntryNum], 10) - 1]
if (currentMonth != NameOfMonth || currentYear != PostYears[EntryNum]) {
currentMonth = NameOfMonth;
currentYear = PostYears[EntryNum];
document.write("<br><div class='dateStyle'>" + currentMonth + " " + currentYear + "</div>");
}
var parsed_day = parseInt(PostDays[EntryNum], 10) > 9 ? "" + parseInt(PostDays[EntryNum], 10) : "0" + parseInt(PostDays[EntryNum], 10);
document.write("<div class='dayStyle'>" + parsed_day + ": </div><a href='" + PostURLs[EntryNum] + "'>" + PostTitles[EntryNum] + "</a><br>");
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=150&start-index=1&callback=LoadTheArchive" type="text/javascript">
</script>
I am just a beginner in HTML and JavaScript. Any idea friends?
I’m trying to change the document.write to outputting in idor class so I can add it to a div
I tried to use document.getElementById("demo").innerHTML but it doesn't seem to work, not sure if I’m doing it correctly.
<html>
<body>
<p id="demo"></p>
<script type="text/javascript">
var d=new Date()
var daynumber=new Array("0","1st","2nd","3rd","4th","5th","6th","7th","8th","9th","10th","11th","12th","13th","14th","15th","16th","17th","18th","19th","20th","21st","22nd","23rd","24th","25th","26th","27th","28th","29th","30th","31st","32nd")
var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var monthname=new Array("January","Febuary","March","April","May","June","July","August","September","October","November","December")
document.write(weekday[d.getDay()] + " ")
document.write(daynumber[d.getDate()] + " ")
// document.write(d.getDate() + " ")
document.write(monthname[d.getMonth()] + " ")
document.write(d.getFullYear())
</script>
</body>
</html>
Check Output or Edit Code on jsfiddle
It might help you
document.getElementById("demo").innerHTML = weekday[d.getDay()] + " "+daynumber[d.getDate()] + " "+monthname[d.getMonth()] + " "+d.getFullYear();
You could assign a new fuction with a closure over the target element.
But, as Chris Barr pointed out, "Overwriting built-in JavaScript functions is a bad idea."
document.write = (element => string => element.innerHTML += string)(document.getElementById('out'));
document.write('foo<br>');
document.write('bar');
<div id="out"></div>
You can use document.getElementById('idname') or even document.querySelector('#idname')
Here's a small demo with your code
//Vars
var d = new Date();
var outputElement = document.getElementById("current-date");
//Date Text arrays
var daynumber = ["1st", "2nd", "3rd", "4th", "5th", "6th", "7th", "8th", "9th", "10th", "11th", "12th", "13th", "14th", "15th", "16th", "17th", "18th", "19th", "20th", "21st", "22nd", "23rd", "24th", "25th", "26th", "27th", "28th", "29th", "30th", "31st", "32nd"];
var weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var monthname = ["January", "Febuary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
//Build up a string
var dateStr = weekday[d.getDay()] +
", the " + daynumber[d.getDate() - 1] +
" of " + monthname[d.getMonth()] +
", " + d.getFullYear();
//Output to screen
outputElement.innerHTML = dateStr
#current-date {
padding: 1px 4px;
background: #EFEFEF;
border: 1px solid #CCC;
border-radius: 4px;
}
<p>
Today's date is <strong id="current-date"></strong>
</p>
So I have this function that creates textareas depending on the month. So if it is March, then 31 textareas, April, then 30 textareas and so on. When the user clicks on one textarea and then the submit button, the value of the textarea should be submitted to the db. So if the user marks 2018-02-04, then that date should be inserted into the db. But, my problem right now is that the only value that is submitted is the last date of each month. Not sure why, and dont know how to solve it. Think it might be something with IDs. Or that I need to send the value in as an array. But not sure on how to do it.
Functions:
var showDate = new Date();
var months = ["Januari", "Februari", "March", "April", "May", "June",
"July", "Augusti", "September", "October", "November", "December"];
var weeks = ["Sunday","Monday","Tuseday","Wednesday","Thursday","Friday","Saturday"];
function drawTable(forDate) {
var daysInMonth = new Date(forDate.getFullYear(),forDate.getMonth()+1,0).getDate();
var cellsToDraw = daysInMonth;
var newdate = forDate.getFullYear() +"-"+ ("0"+ (forDate.getMonth() + 1)).slice(-2);
var table = document.getElementById("table");
table.innerHTML = "";
for (var r = 0; r < (daysInMonth / 7); r++) {
var newRow = document.createElement("tr");
table.appendChild(newRow);
for (var c = 0; c < 31 && cellsToDraw > 0; c++) {
var day1 = ("0" + (c + 1)).slice(-2);
var textarea = document.createElement("textarea");
textarea.setAttribute("placeholder", day1 );
//textarea.setAttribute("id", some_value); does not work
newRow.appendChild(textarea);
textarea.setAttribute("name", "day");
textarea.setAttribute("day", newdate + "-" + day1 )
textarea.innerHTML = newdate + "-" + day1;
cellsToDraw--;
}
}
}
window.onload = function() {
document.getElementById("displayingMonth").innerHTML = months[showDate.getMonth()];
drawTable(showDate );
};
function next() {
if (showDate.getMonth() == 11) {
showDate.setMonth( 0 );
showDate.setFullYear( showDate.getFullYear()+1 );
} else {
showDate.setMonth( showDate.getMonth()+1 );
}
document.getElementById("displayingMonth").innerHTML = months[showDate.getMonth()];
drawTable( showDate );
}
html:
<form class="" action="index.php" method="post">
<table id="table" cellspacing="0" cellpadding="0" border-collapse="collapse";>
<br>
<input id="btn" type="submit" name="" value="Send">
</form>
php:
<?php
include ("connection.php");
$day = mysqli_real_escape_string($conn, $_REQUEST['day']);
$stmt = "INSERT INTO table (day) VALUES('$day')";
if(empty($day)){
$_SESSION['error'] = "Please fill in required fields";
header('Location: index.php', true, 303);
exit();
} else {
if (mysqli_query($conn, $stmt)) {
header('Location: index.php', true, 303);
exit;
}else {
$error= "Error: " .mysqli_error($conn);
echo "$error";
}
}
?>
My test php:
$days = $_request['day'];
$error = array();
foreach ($days as $day) {
$day = mysqli_real_escape_string($conn, $day);
if (empty($day)) {
$error[] = array(
'day' => $day,
'error' => 'day was empty'
);
}
else if (
!mysqli_query(
$conn,
"INSERT INTO table (day) VALUES('$day)')"
)
) {
$error[] = array(
'day' => $day,
'error' => mysqli_error($conn)
);
}
}
if (count($error)) {
print_r($error);
}
header('Location: index.php', true, 303);
All help is appriciated! :)
As I understood, you want to send date selected by user to server but last date of month is getting submitted right now. If this is your purpose and issue respectively then see it
ON JSFIDDLE.NET
https://jsfiddle.net/wyn1cd5b/1/
STACKOVERFLOW SNIPPET
function drawTable(forDate) {
var table = document.getElementById('table')
var year = forDate.getFullYear()
var month = forDate.getMonth() + 1
document.getElementById('date').innerHTML = months[month - 1]
table.innerHTML = ''
var daysInMonth = new Date(year, month, 0).getDate()
for (i = 1; i <= daysInMonth; i++) {
table.insertAdjacentHTML('beforeend', '<textarea class="date-item" onclick="selectThis(this)">' + year + '-' + (month < 10 ? '0' + month : month) + '-' + (i < 10 ? '0' + i : i) + '</textarea>')
}
}
function selectThis(textarea) {
if (typeof selectedDate !== 'undefined')
selectedDate.classList.remove('selected-date')
selectedDate = textarea
selectedDate.classList.add('selected-date')
}
function send() {
if (typeof selectedDate === 'undefined')
alert('No date selected')
else
// I have printed selected here. do whatever you want with it
document.getElementById('info').innerHTML = 'Will send <b>' + selectedDate.value + '</b> to server'
return false
}
function next() {
if (showDate.getMonth() === 11) {
showDate.setMonth(0)
showDate.setFullYear(showDate.getFullYear() + 1)
} else {
showDate.setMonth(showDate.getMonth() + 1)
}
drawTable(showDate)
return false
}
window.onload = function() {
months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
// days = ['Sunday', 'Monday', 'Tuseday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
showDate = new Date()
drawTable(showDate)
}
.date-item {
cursor: pointer;
}
.selected-date {
background: #dbdbdb;
}
<form class="" action="index.php" method="post">
<table id="table" cellspacing="0" cellpadding="0" border-collapse="collapse" ;>
<h1 id="date"></h1>
</table>
<p id="info">Select date by clicking on it</p>
<input id="btn" type="submit" name="" onclick="return send()" value="Send">
<input id="btn" type="submit" name="" onclick="return next()" value="Next">
</form>
I've several problems at the moment and I can't see to find the solution.
I insert two dates and I have the list of month, year between them.
I'm trying to make a table to with:
Number of Day
Name of Day
and be able to:
select month/year from a combobox (this gives the amount of days in the month)
if it's exists you can use pagination to go to the next month,etc...
MY LAYOUT
First Problem:
I'm using Java to pass a List to JavaScript and I get this in the combobox:
The second problem is basically I cant do anything else without the combobox correct value.
<%
String initialDayEnd = session.getAttribute("initialSystemDate").toString();
String finalDayEnd = session.getAttribute("finalSystemDate").toString();
DateFormat format = new SimpleDateFormat("dd/MM/yyyy", Locale.US);
Calendar beginCalendar = Calendar.getInstance();
Calendar finishCalendar = Calendar.getInstance();
try {
beginCalendar.setTime(format.parse(initialDayEnd));
finishCalendar.setTime(format.parse(finalDayEnd));
} catch (ParseException e) {
e.printStackTrace();
}
List<String> dateList = new ArrayList<String>();
List<String> dateListMonthYear = new ArrayList<String>();
String[] dateSplitted;
while (beginCalendar.before(finishCalendar)) {
// add one month to date per loop
String date = format.format(beginCalendar.getTime()).toUpperCase();
System.out.println(date);
beginCalendar.add(Calendar.MONTH, 1);
dateSplitted = date.split("/");
dateList.add(dateSplitted[0] + "/" + dateSplitted[1] + "/" + dateSplitted[2]);
dateListMonthYear.add(dateSplitted[1] + "/" + dateSplitted[2]);
}
%>
<input type="hidden" id="dates" value="<%=dateListMonthYear%>">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th class="text-center">#</th>
<th class="text-center">Day</th>
</tr>
</thead>
<tfoot>
<tr>
<th class="text-center">#</th>
<th class="text-center">Day</th>
</tr>
</tfoot>
<tbody class="dayTableBody">
<%--JSON ARRAY CREATES THE TABLE--%>
</tbody>
</table>
JS:
$(document).ready(function() {
var dates = $('#dates').val();
console.log(dates);
$('#dataTable').DataTable({
"lengthMenu" : dates
});
});
var day, month, year;
$('.dates').change(DatesChanged);
DatesChanged();
function DatesChanged() {
var date = $('.dates').val();
var splitDate = date.split("/");
day = splitDate[0];
month = splitDate[1];
year = splitDate[2];
var maxDays = daysInMonth(month, year);
CreateJSONArray(maxDays, date);
}
function daysInMonth(month, year) {
return new Date(year, month, 0).getDate();
}
function CreateJSONArray(maxDays, date) {
var arr = [];
var monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
var dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
var d;
for (var day = 1; day <= maxDays; day++) {
d = new Date(date);
arr.push({
"dayNumber": day,
"dayName": dayNames[d.getDay()],
"monthName": monthNames[month - 1],
"year": d.getYear() + 1900
});
date = d.setDate(d.getDate() + 1);
}
DisplayTable(arr);
console.log(arr);
}
function DisplayTable(data) {
//heading
document.getElementsByClassName("month-year")[0].innerHTML = data[0].monthName + ", " + data[0].year;
//Table
$('.dayTableBody').empty();
$.each(data, function (index, value) {
data += '<tr align="center">';
data += '<td>' + value.dayNumber + '<input type="hidden" name="dayNumber" value="' + value.dayNumber + '">' + '</td>';
data += '<td>' + value.dayName + '</td>';
//get amount of types of Clients
var clientTypes = ["Individual","Corporation"];
for (var i = 0; i < clientTypes.length; i++) {
data += '<td>' + '<input class="text-center amountOfClients" type="number" value="0" name="amountOfClients-' + clientTypes[i] + '" data-error="Please, insert a value" required>' + '</td>'
data += '<div class="help-block with-errors"></div>'
}
data += '</tr>';
});
$('.dayTableBody').append(data);
}
Maybe there is a simpler way to make this?