JavaScript to show <div> after a certain date - javascript

I believe this is a relatively simple question (a JavaScript noob here), but I can't seem to find a thread for this particular date function. I am doing website migration for an academic society from a PHP-based site to a drupal CMS. Some of the PHP has obviously broken and I'm trying to replace simple scripts with Javascript. One issue that is giving me a lot of trouble is how to get a text to appear only AFTER a certain date. In PHP my functioning code is:
<?php if (date('YmdH') > 2018011710 ) { ?>
<p class="error">Please note that the deadline for submitting proposals has passed.</p>
<?php } ?>
So I need something in JavaScript to do the same. Here is what I came up with (I apologize in advance for my sloppy code as I'm a beginner with JavaScript):
First CSS to hide the DIV:
<style type="text/css">
.DateDiv { display: none;}
</style>
Then the div itself:
<div class="DateDiv">
<h3>Please note that the deadline for submitting proposals has passed.</h3>
</div>
Finally, my JavaScript, which is not working:
<script>
$(document).ready(function() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth();
var yyyy = today.getFullYear();
if(dd<10) {
dd = '0'+dd
}
if(mm<10) {
mm = '0'+mm
}
today = mm + '/' + dd + '/' + yyyy;
// show only if current date is after January 16, 20018
if (today > 0, 16, 2018) {
$(".DateDiv").show();
}
});
</script>
If anyone could help me sort this out I would be very grateful. If I'm going about this in a manner that is more complicated than it needs to be I'd also appreciate any advice.
Thanks in advance.
PS: I am not asking to compare two dates, but to display a text after a certain date.

you just might want to do something like this:
if (new Date() >= new Date(2018, 0, 16))
months always start at 0 while days start at 1. don't ask why.
this is how the constructor is defined:
new Date(year, monthIndex [, day [, hour [, minutes [, seconds [, milliseconds]]]]]);
just go here for in-depth details about Date()

//show only if current date is after January 16, 20018
var date_to_check_with = new Date("20180116").getTime();
//.getTime() will give time in milliseconds (epoch time)
var current_date = new Date().getTime();
console.log(date_to_check_with < current_date);

Related

Get date from bootstrap-datepicker and print separately

I am using Bootstrap Date picker. I want to get date value(20-Sep-19) and print it in three different div's(so as i can style them differently).
<div class="input-group date">
<input type="hidden" id="date-input" value="20-Sep-19" class="form-control">
<div id="div1">20 </div>
<div id="div2">Sep'19</div>
<div id="div3">Wednesday</div>
</div>
$(function(){
$('.input-group.date').datepicker({
format: 'dd-M-yy',
todayHighlight: true,
autoclose: true});
});
I have tried some jquery but doesn't work.
$(document).on("change", "#date-input", function () {
var date = new Date($('#date-input').val());
day = date.getDate();
month = date.getMonth() + 1;
year = date.getFullYear();
alert([day, month, year].join('/'));
});
Anyone know how this can be achieved. Thanks in Advance.
Check out this fiddle for a quick implementation.
Your Javascript will need to parse the data sent back from the dateChange event of the datepicker element
picker.on("changeDate", function(e) {
div1.text(e.date.getDate());
var month = getMonthName(e.date.getMonth());
var year = ("" + e.date.getYear()).substr(1, 3);
div2.text(month + " '" + year);
div3.text(getDayOfWeek(e.date.getDay()));
});
The getMonthName and getDayOfWeek functions simply take in an integer and return the corresponding month/day.
From the sounds of things, you're relatively new to Javascript. I would highly recommend that you fully understand how to utilize Javascript and jQuery.
Please see the following resources for more information:
* JS Date and utilities
* jQuery .text()
* Bootstrap-datepicker changeDate documentation

hidden input wont pass to database

I'm trying to date when something is submitting into my database. This isn't working, no errors, just puts nothing into the database.
I have in the body...
<input type="hidden" id="thedate" name="DateModified">
<script type="text/javascript">
function getDate()
{
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;
var today = month + "/" + day+ "/" + year;
document.getElementById('thedate').value = today;
}
</script>
Then, at the bottom of the page before </body> I have...
<script type="text/javascript">
GetDate();
</script>
The form is...
<form method="POST" action="blabla.asp">
Everything else in my form goes to the database, just not the date.
Try the following:
Change GetDate() to getDate()
Make sure that you are reading "DateModified" in the server instead of "thedate" field.
I'd also suggest that you get the timestamp (UTC) in the server instead from the client's browser. Anyone can post to the url using tools like postman etc and send in bogus timestamp.
Just change your bottom script looks like below code.
<script type="text/javascript">
GetDate(); // wrong
getDate(); // right
</script>

Adding date countdown to jquery counter

Can someone help me with adding a date counting too to https://github.com/sophilabs/jquery-counter/blob/master/src/jquery.counter.js ?
The current counter is working fine with hour, minute and seconds. Its lacking only date. I am not an expert with it. Please help, thank you
I am not an expert but I think you can use this:
<script language='javascript' type= 'text/javascript>
function showdate()
{
var d = new date();
document.getElementById('date').innerHTML = d.toLocaleDateString();
}
</script>

Javascript: Adding days to any date

I've read through a number of topics now and have not found one quite on point.
Here's what I'm trying to do:
1) Parse a bill date that is provided in the format mm/dd/yy and is frequently not today
2) Add a variable number of days to the date. The terms are saved in the dueTime array below. I limited it to 30 days here.
3) Based on the bill date + the payment terms, calculate the date that the bill is due and return that in the mm/dd/yy format.
Here's what I've tried. The information I pass into new Date is what I expect, but the output from new date is never what I expect.
Thanks for your help.
<html>
<head>
<script>
function calculateDueTime(){
var billDate = document.getElementById('billDateId').value;
var key = document.getElementById('termsId').value;
var dueTime = new Array();
dueTime[1] = 30;
var billDate = billDate.split('/');
var newDate = new Date( parseInt( billDate[2] ) + '/' + parseInt( billDate[0] ) + '/' + ( parseInt( billDate[1] ) + parseInt( dueTime[key] ) ) );
document.getElementById('dueDateId').value = newDate.toString();
}
</script>
</head>
<body>
<input name="billDate" id="billDateId" value="5/1/11" />
Or any value in mm/dd/yy or m/d/yy format
<select name="terms" id="termsId" onchange="calculateDueTime()">
<option value="1">Net 30</option>
</select>
<input name="dueDate" id="dueDateId" />
</body>
</html>
Just add the number of days to the date:
var dt= new Date();
dt.setDate(dt.getDate() + 31);
console.log(dt);
I would suggest taking a look at Datejs (http://www.datejs.com/). I use this library quite a bit to deal with dates, which I find to be a real pain in JS.

Help with jquery datepicker calendar date disabling

I'm hoping to get some help with my problem i have been having with jquery datepicker.
Please visit this site for information regarding the problem with code samples:
http://codingforums.com/showthread.php?p=929427
Basically, i am trying to get the 1st day and day 31st working and have yet to find a way to do this. They say it may be an error within the jquery calendar.
Here is the code.
//var disabledDays = ['3-31-2010', '3-30-2010', '3-29-2010', '3-28-2010', '3-2-2010', '3-1-2010', '4-1-2010' ];
var checkDays = null;
function noWeekendsOrHolidays(date)
{
// optional: ensure that date is date-only, with no time part:
date = new Date( date.getFullYear(), date.getMonth(), date.getDate() );
// no point in checking if today is past the given data:
if ( (new Date()).getTime() > date.getTime() ) return [false,'inthepast'];
if ( checkDays == null )
{
checkDays = [];
// convert disabledDays to a more reasonable JS form:
for ( var d = 0; d < disabledDays.length; ++d )
{
var p = disabledDays[d].split("-");
checkDays[d] = new Date( parseInt(p[2]), parseInt(p[0])-1, parseInt(p[1]) );
}
}
var datetime = date.getTime();
for ( var i = 0; i < checkDays.length; i++)
{
if ( checkDays[i].getTime() == datetime ) return [false,'holiday'];
}
return [true,'']; // default CSS style when date is selectable
}
jQuery(document).ready(function() {
<%
response.write "var theSelectedDay = $.datepicker.parseDate(""y-m-d"", '" & theDate & "');" & vbcr
%>
jQuery('#datepicker2').datepicker({
dateFormat: 'yy-mm-dd',
constrainInput: true,
firstDay: 1,
defaultDate: theSelectedDay,
beforeShowDay: noWeekendsOrHolidays,
onSelect: function(date) {
endDate = date;
startDate = theSelectedDay;
}
});
});
The theSelectedDay is formatted like ['2010-3-1']
I have set the clock back on my computer in order to test this out. It's set on March 1st.
I have a big calendar on the main page and when the user clicks on a day it pops up this datepicker. Like i said, it all works fine for days 2-30 but not for day 1 and 31.
If they choose day 2 (and it was march 2nd) then Monday would not be selectable of course since its a past day.
Hope that helps.
You mean valueOf(), not getTime().

Categories