Issues with php/javascript regarding value - javascript

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>

Related

Astra theme disabling javascript links

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>

Creating a Table with the days of the Month

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?

Scrollable Javascript Calendar

I am trying to make a calendar which can scroll between months using javascript. The calendar, at the moment, displays todays date and builds the months around it. I have a next button, which changes the month title, but the days remain completely unchanged. I have tried inserting "+ dayPerMonth[month+1] +" into the calendar body when 'next' is called, to no avail. It merely states above the table how many days the next month has.
var htmlContent ="";
var FebNumberOfDays ="";
var counter = 1;
var dateNow = new Date();
var month = dateNow.getMonth();
var nextMonth = month+1; //+1; //Used to match up the current month with the correct start date.
var prevMonth = month -1;
var day = dateNow.getDate();
var year = dateNow.getFullYear();
//Determing if February (28,or 29)
if (month == 1){
if ( (year%100!=0) && (year%4==0) || (year%400==0)){
FebNumberOfDays = 29;
}else{
FebNumberOfDays = 28;
}
}
// names of months and week days.
var monthNames = ["January","February","March","April","May","June","July","August","September","October","November", "December"];
var dayNames = ["Sunday","Monday","Tuesday","Wednesday","Thrusday","Friday", "Saturday"];
var dayPerMonth = ["31", ""+FebNumberOfDays+"","31","30","31","30","31","31","30","31","30","31"];
// days in previous month and next one , and day of week.
var nextDate = new Date(nextMonth +' 1 ,'+year);
var weekdays= nextDate.getDay();
var weekdays2 = weekdays
var numOfDays = dayPerMonth[month];
// this leave a white space for days of pervious month.
while (weekdays>0){
htmlContent += "<td class='monthPre'></td>";
// used in next loop.
weekdays--;
}
// loop to build the calander body.
while (counter <= numOfDays){
// When to start new line.
if (weekdays2 > 6){
weekdays2 = 0;
htmlContent += "</tr><tr>";
}
// if counter is current day.
// highlight current day using the CSS defined in header.
if (counter == day){
htmlContent +="<td class='dayNow' onMouseOver='this.style.background=\"#FF0000\"; this.style.color=\"#FFFFFF\"' "+
"onMouseOut='this.style.background=\"#FFFFFF\"; this.style.color=\"#FF0000\"'>"+counter+"</td>";
}else{
htmlContent +="<td class='monthNow' onMouseOver='this.style.background=\"#FF0000\"'"+
" onMouseOut='this.style.background=\"#FFFFFF\"'>"+counter+"</td>";
}
weekdays2++;
counter++;
}
function displayCalendar(){
var htmlContent ="";
var FebNumberOfDays ="";
var counter = 1;
var dateNow = new Date();
var month = dateNow.getMonth();
var nextMonth = month+1; //+1; //Used to match up the current month with the correct start date.
var prevMonth = month -1;
var day = dateNow.getDate();
var year = dateNow.getFullYear();
//Determing if February (28,or 29)
if (month == 1){
if ( (year%100!=0) && (year%4==0) || (year%400==0)){
FebNumberOfDays = 29;
}else{
FebNumberOfDays = 28;
}
}
// names of months and week days.
var monthNames = ["January","February","March","April","May","June","July","August","September","October","November", "December"];
var dayNames = ["Sunday","Monday","Tuesday","Wednesday","Thrusday","Friday", "Saturday"];
var dayPerMonth = ["31", ""+FebNumberOfDays+"","31","30","31","30","31","31","30","31","30","31"];
// days in previous month and next one , and day of week.
var nextDate = new Date(nextMonth +' 1 ,'+year);
var weekdays = nextDate.getDay();
var weekdays2 = weekdays
var numOfDays = dayPerMonth[month];
// this leave a white space for days of pervious month.
while (weekdays>0){
htmlContent += "<td class='monthPre'></td>";
// used in next loop.
weekdays--;
}
// loop to build the calander body.
while (counter <= numOfDays){
// When to start new line.
if (weekdays2 > 6){
weekdays2 = 0;
htmlContent += "</tr><tr>";
}
// if counter is current day.
// highlight current day using the CSS defined in header.
if (counter == day){
htmlContent +="<td class='dayNow' onMouseOver='this.style.background=\"#FF0000\"; this.style.color=\"#FFFFFF\"' "+
"onMouseOut='this.style.background=\"#FFFFFF\"; this.style.color=\"#FF0000\"'>"+counter+"</td>";
}else{
htmlContent +="<td class='monthNow' onMouseOver='this.style.background=\"#FF0000\"'"+
" onMouseOut='this.style.background=\"#FFFFFF\"'>"+counter+"</td>";
}
weekdays2++;
counter++;
}
// building the calendar html body.
var calendarBody = "<table class='calendar'> <tr class='monthNow'><th colspan='7'>"
+monthNames[month]+" "+ year +"</th></tr>";
calendarBody +="<tr class='dayNames'> <td>Sun</td> <td>Mon</td> <td>Tues</td>"+
"<td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>";
calendarBody += "<tr>";
calendarBody += htmlContent;
calendarBody += "</tr></table>";
// set the content of div .
document.getElementById("calendar").innerHTML=calendarBody;
}
function next(){
var calendarBody2 = "<table class='calendar'> <tr class='monthNow'><th colspan='7'>"
+monthNames[month++]+" "+ year +"</th></tr>";
calendarBody2 +="<tr class='dayNames'> <td>Sun</td> <td>Mon</td> <td>Tues</td>"+
"<td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>"
;
calendarBody2 += "<tr>";
calendarBody2 += htmlContent ;
calendarBody2 += "</tr></table>";
// set the content of div .
document.getElementById("calendar").innerHTML=calendarBody2;
}
.btns{
width: 48%;
height: 5%;
}
#legend{
font-size: 20pt;
}
.ui-content{
margin-top: 1%;
}
.calendar{
width: 100%;
height: 80%;
}
.monthPre{
color: gray;
text-align: center;
}
.monthNow{
color: black;
text-align: center;
font-size: 20pt;
}
.dayNow{
border: 2px solid black;
color: #FF0000;
text-align: center;
font-size: 20pt;
}
.calendar td{
htmlContent: 2px;
width: 40px;
border: 2px solid black;
}
.monthNow th{
background-color: #000000;
color: #FFFFFF;
text-align: center;
}
.dayNames{
background: #FF0000;
color: #FFFFFF;
text-align: center;
}
<html>
<head>
<title>Calendar</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<button class='btns' onclick=prev()>Prev</button>
<button style=margin-left:3.25%; class='btns' onclick=next()>Next</button>
<body onload="displayCalendar()">
<div id="calendar"></div>
</body>
</html>

Try the below code, I have put the common code into getCal() method and updated little bit.
Similarly, added prev() method for previous
var htmlContent = "";
var FebNumberOfDays = "";
var counter = 1;
var dateNow = new Date();
var month = dateNow.getMonth();
var curMonth = month;
var day = dateNow.getDate();
var year = dateNow.getFullYear();
var curYear = year;
// names of months and week days.
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thrusday", "Friday", "Saturday"];
var dayPerMonth = ["31", "" + FebNumberOfDays + "", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"];
// days in previous month and next one , and day of week.
var nextDate, weekdays, weekdays2, numOfDays, nextMonth, prevMonth;
//to set the correct htmlContent
function getCal() {
htmlContent = "";
nextMonth = month + 1; //+1; //Used to match up the current month with the correct start date.
prevMonth = month - 1;
counter = 1;
//Determing if February (28,or 29)
if (month == 1) {
if ((year % 100 != 0) && (year % 4 == 0) || (year % 400 == 0)) {
FebNumberOfDays = 29;
} else {
FebNumberOfDays = 28;
}
}
// names of months and week days.
monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thrusday", "Friday", "Saturday"];
dayPerMonth = ["31", "" + FebNumberOfDays + "", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"];
// days in previous month and next one , and day of week.
nextDate = new Date(nextMonth + ' 1 ,' + year);
weekdays = nextDate.getDay();
weekdays2 = weekdays;
numOfDays = dayPerMonth[month];
// this leave a white space for days of pervious month.
while (weekdays > 0) {
htmlContent += "<td class='monthPre'></td>";
// used in next loop.
weekdays--;
}
// loop to build the calander body.
while (counter <= numOfDays) {
// When to start new line.
if (weekdays2 > 6) {
weekdays2 = 0;
htmlContent += "</tr><tr>";
}
// if counter is current day.
// highlight current day using the CSS defined in header.
if (counter == day && month == curMonth && year == curYear) {
htmlContent += "<td class='dayNow' onMouseOver='this.style.background=\"#FF0000\"; this.style.color=\"#FFFFFF\"' " +
"onMouseOut='this.style.background=\"#FFFFFF\"; this.style.color=\"#FF0000\"'>" + counter + "</td>";
} else {
htmlContent += "<td class='monthNow' onMouseOver='this.style.background=\"#FF0000\"'" +
" onMouseOut='this.style.background=\"#FFFFFF\"'>" + counter + "</td>";
}
weekdays2++;
counter++;
}
}
function displayCalendar() {
getCal(); // to get the htmlContent
// building the calendar html body.
var calendarBody = "<table class='calendar'> <tr class='monthNow'><th colspan='7'>" +
monthNames[month] + " " + year + "</th></tr>";
calendarBody += "<tr class='dayNames'> <td>Sun</td> <td>Mon</td> <td>Tues</td>" +
"<td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>";
calendarBody += "<tr>";
calendarBody += htmlContent;
calendarBody += "</tr></table>";
// set the content of div .
document.getElementById("calendar").innerHTML = calendarBody;
}
function next() {
debugger;
if(month+1==12){
++year;
month=-1;
}
var calendarBody = "<table class='calendar'> <tr class='monthNow'><th colspan='7'>" +
monthNames[++month] + " " + year + "</th></tr>";
calendarBody += "<tr class='dayNames'> <td>Sun</td> <td>Mon</td> <td>Tues</td>" +
"<td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>";
calendarBody += "<tr>";
getCal(); // to get the htmlContent
calendarBody += htmlContent;
calendarBody += "</tr></table>";
// set the content of div .
document.getElementById("calendar").innerHTML = calendarBody;
}
function prev() {
if(month-1==-1){
--year;
month=12;
}
var calendarBody = "<table class='calendar'> <tr class='monthNow'><th colspan='7'>" +
monthNames[--month] + " " + year + "</th></tr>";
calendarBody += "<tr class='dayNames'> <td>Sun</td> <td>Mon</td> <td>Tues</td>" +
"<td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>";
calendarBody += "<tr>";
getCal(); // to get the htmlContent
calendarBody += htmlContent;
calendarBody += "</tr></table>";
// set the content of div .
document.getElementById("calendar").innerHTML = calendarBody;
}
.btns {
width: 48%;
height: 5%;
}
#legend {
font-size: 20pt;
}
.ui-content {
margin-top: 1%;
}
.calendar {
width: 100%;
height: 80%;
}
.monthPre {
color: gray;
text-align: center;
}
.monthNow {
color: black;
text-align: center;
font-size: 20pt;
}
.dayNow {
border: 2px solid black;
color: #FF0000;
text-align: center;
font-size: 20pt;
}
.calendar td {
htmlContent: 2px;
width: 40px;
border: 2px solid black;
}
.monthNow th {
background-color: #000000;
color: #FFFFFF;
text-align: center;
}
.dayNames {
background: #FF0000;
color: #FFFFFF;
text-align: center;
}
<html>
<head>
<title>Calendar</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<button class='btns' onclick=prev()>Prev</button>
<button style=margin-left:3.25%; class='btns' onclick=next()>Next</button>
<body onload="displayCalendar()">
<div id="calendar"></div>
</body>
</html>

month and date in two digits in javascript

I am trying to add end date with javascript.
<head>
<? $duration1 = $member_data['advt_duration']; //Using for var duration ?>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(function() {
$('#start_date').datepicker({dateFormat: 'yy-mm-dd',timeFormat: "hh:mm tt"});
});
});
function getdate() {
var tt = document.getElementById('start_date').value;
var date = new Date(tt);
var newdate = new Date(date);
var duration = '<?php echo $duration1 ;?>';
//alert(duration);
if (duration ==="One Month") {
newdate.setDate(newdate.getDate() + 30);
}
if (duration ==="Three Months") {
newdate.setDate(newdate.getDate() + 90);
}
if (duration ==="Six Months") {
newdate.setDate(newdate.getDate() + 180);
}
if (duration ==="One Year") {
newdate.setDate(newdate.getDate() + 365);
}
var dd = newdate.getDate();
var mm = newdate.getMonth() + 1;
var y = newdate.getFullYear();
var someFormattedDate = y+ '-' + mm + '-' + dd;
document.getElementById('end_date').value = someFormattedDate;
}
</script>
</head>
<body>
From : <input name="start_date" type="text" id="start_date" style="border:1px solid #333;"/>
<input type="button" onclick="getdate()" value="Get End Date" style="background-color:#999; border:1px solid #333;"/>
To : <input name="end_date" type="text" id="end_date" style="border:1px solid #333;" readonly/>
</body>
Now I am Getting START DATE in YYYY-MM-DD Format...But END DATE is Not getting in that format...
e.g. If we set start date and suppose var duration = "One Year"...
start_date = "2016-05-09" //09 May 2016
Then
getting
end_date = "2017-5-9" Instead of "2017-05-09"

this will work
mm = ( mm < 10 ) ? ( "0" + ( mm ).toString() ) : ( mm ).toString();
dd= ( dd< 10 ) ? ( "0" + ( dd).toString() ) : ( dd ).toString();

Get selected date ID (from database) in input field's value with UI Datepicker

I have a registration form, where people can select multiple dates selected from a database. I use the jQuery UI Datepicker. Everything works fine, but when I submit the form it saves me the date itself like this : "09/16/2012,08/04/2011,04/19/1994". I would like to store the ID of the date instead.
Does anyone know how to get the ID of the selected date, and put it in the value="" attribute?
<input type="text" class="datepicker" name="live[]" value="">
<script>
var dates = [<?php $i=0; while($dataDate = mysql_fetch_object($dates)) : echo ($i>0) ? ", " : ""; echo '"'.date("n-j-Y", strtotime($dataDate->date)).'"'; $i++; endwhile;?>];
var enabledDays = dates;
function enableAllTheseDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < enabledDays.length; i++) {
if($.inArray((m+1) + '-' + d + '-' + y,enabledDays) != -1) {
return [true];
}
}
return [false];
}
$('.datepicker').datepicker({
beforeShowDay: enableAllTheseDays,
yearRange: "1994:2012",
changeMonth: true,
changeYear: true
});
</script>

Okay so heres totally new aproach to get desired outcome.
first of all, put the dates in json obejct.
make your SQL query select id, date from database
now if you have php json available, just use
<?php
while($row = mysql_fetch_object($query) ) {
$data[] = array( "id" => $row['id'], "date" => $row['date'] );
}
echo "var dates = [" . json_encode($data) . "];";
?>
otherwise you can do it like this:
<?php
echo "var dates = [";
while($row = mysql_fetch_object($query) ) {
$data[] = '{"id" : "' .$row["id"] . '", "date" : "' . $row["date"] . '" }';
}
echo implode(',', $data);
echo "];";
?>
Now we got json object which should look like
[{"id" : "12", "date": "2012-02-01"},{"id" : "33", "date": "2012-02-03"}]
i tweaked your function little bit, to work with our json object
function enableAllTheseDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
var datestr = y + "-" + m + "-" + d;
for (i = 0; i < dates.length; i++) {
if( dates[i].date == datestr) {
return [true];
}
}
return [false];
}
$('.datepicker').datepicker({
beforeShowDay: enableAllTheseDays,
yearRange: "1994:2012",
changeMonth: true,
changeYear: true
});
Now back to getting the id
$('.datepciker').on('change',function() {
for(var i = 0; i < dates.length; i++) {
if( dates[i].date == $(this).val() )
var index = dates[i].id;
}
$("#date_id_holder").val( index );
});
and now your $("#date_id_holder") contains the id of selected date

Categories

Resources