Datepicker calendar a previous and next date button - javascript

I am working on a datepicker calendar for adding a previous and next date feature, a button on click. I tried in PHP and JS and I did not have success on both.
window.onload = function () {
let today = new Date();
let D = String(today.getDate()).padStart(2, '0');
let M = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
let YYYY = today.getFullYear();
today = YYYY + '-' + M + '-' + D;
let today2 = new Date();
today2 = M + "/" + D + "/" + YYYY;
var prevday = new Date();
prevday.setDate(prevday.getDate() - 1);
var nextday = new Date();
nextday.setDate(nextday.getDate() + 1)
addRow('<tr><td colspan="2"><h3>Eventsz for '+ ' ' + today2 + ' ' + '<a href="#" id="prev" class="fa fa-chevron-right lg" title="Next Date"></h3></td></tr>');

Don't know if its a typo but in your snippet you are missing a trailing }.
window.onload = function () {
let today = new Date();
let D = String(today.getDate()).padStart(2, '0');
let M = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
let YYYY = today.getFullYear();
today = YYYY + '-' + M + '-' + D;
let today2 = new Date();
today2 = M + "/" + D + "/" + YYYY;
var prevday = new Date();
prevday.setDate(prevday.getDate() - 1);
var nextday = new Date();
nextday.setDate(nextday.getDate() + 1)
} // Missing
// addRow('<tr><td colspan="2"><h3>Eventsz for '+ ' ' + today2 + ' ' + '<a href="#" id="prev" class="fa fa-chevron-right lg" title="Next Date"></h3></td></tr>');

Related

How to enter newline character in bookmarklet JavaScript

I try to write a bookmarklet which creates email, but there is an issue about using newline character.
When I execute the below code from Chrome Console, it works fine. However, this code doesn't work when executing from bookmarklet. I checked the code and the cause seems var body1 includes newline character(%0D%0A).
Anybody knows how to insert newline character in bookmarklet JS?
javascript:(function(){
var today = new Date();
var url = 'https://mail.google.com/mail/?view=cm';
var to = 'emailfrombookmarklet#example.com';
var subject = '【weather%20report】【' + today.getFullYear() + '-' + ("00" + (today.getMonth() + 1)).slice(-2) + '-' + ("00" + today.getDate()).slice(-2) + '%20bar】%20email%20from%20bookmarklet';
var body1 = 'Hi%2C%0D%0A%0D%0AThis is Kim Kardashian%2E%0D%0AIt%27s%20sunny%20today%2E%0D%0A%0D%0Adate%3A';
var targetDate = '%20' + today.getFullYear() + '-' + ("00" + (today.getMonth() + 1)).slice(-2) + '-' + ("00" + today.getDate()).slice(-2);
var body2 = '%0D%0AName%3A%20Kim%20Kardashian%0D%0A';
var body3 = '%0D%0ABest%20Regards%2C';
url += '&to=' + to + '&su=' + subject + '&body=' + body1 + targetDate + body2 + body3;
window.open(url);})();
It would be better to get rid of using encoded characters at all:
javascript:(function() {
var today = new Date();
var url = 'https://mail.google.com/mail/?view=cm';
var to = 'emailfrombookmarklet#example.com';
var subject = '【weather report】【' + today.getFullYear() + '-' + ('00' + (today.getMonth() + 1)).slice(-2) + '-' + ('00' + today.getDate()).slice(-2) + ' bar】 email from bookmarklet';
var body1 = 'Hi,\n\nThis is Kim Kardashian.\nIt\'s sunny today.\n\ndate:';
var targetDate = ' ' + today.getFullYear() + '-' + ('00' + (today.getMonth() + 1)).slice(-2) + '-' + ('00' + today.getDate()).slice(-2);
var body2 = '\nName: Kim Kardashian\n';
var body3 = '\nBest Regards,';
url += '&to=' + encodeURIComponent(to) + '&su=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body1 + targetDate + body2 + body3);
window.open(url);
})();

Bootstrap: How to add custom button to bootstrap date picker?

I am trying to add a custom button to datepicker like today button, I want to add a button bottom of the calendar every month, The button name should be "End of the month", I have to calculate end of the current month value and display the input filed.
$('#route-from-date').datetimepicker({
autoclose: true,
language: 'pl'
});
$('#route-to-date').datetimepicker({
autoclose: true,
language: 'pl',
//todayBtn: 'ok'
});
$('.datetimepicker tfoot').append('DzisiajWczorajTydzień');
$('.datetimepicker tfoot th').on('click',function(){
var $th = $(this);
var d = new Date();
var fd,td;
if($th.hasClass('yesterday')){
d.setDate(d.getDate() - 1);
}
else if ($th.hasClass('week')){
d.setDate(d.getDate() - 7);
fd = d.getFullYear() + '-' + ((d.getMonth()<10)? '0'+(d.getMonth()+1) : d.getMonth()+1 ) + '-' + ((d.getDate()<10)? '0'+d.getDate() : d.getDate() ) + ' 00:00';
d.setDate(d.getDate() + 7);
td = d.getFullYear() + '-' + ((d.getMonth()<10)? '0'+(d.getMonth()+1) : d.getMonth()+1 ) + '-' + ((d.getDate()<10)? '0'+d.getDate() : d.getDate() ) + ' 23:59';
}
if(!$th.hasClass("week")){
fd = d.getFullYear() + '-' + ((d.getMonth()<10)? '0'+(d.getMonth()+1) : d.getMonth()+1 ) + '-' + ((d.getDate()<10)? '0'+d.getDate() : d.getDate() ) + ' 00:00';
td = d.getFullYear() + '-' + ((d.getMonth()<10)? '0'+(d.getMonth()+1) : d.getMonth()+1 ) + '-' + ((d.getDate()<10)? '0'+d.getDate() : d.getDate() ) + ' 23:59';
}
$('#route-from-date').val(fd).datetimepicker('update', fd);
$('#route-to-date').val(td).datetimepicker('update', td);
$('.datetimepicker').hide();
});
more info (Bootstrap - datetimepicker add custom button like Today)

how to get current time in razor view using javascript

I have tried many ways mentioned below but none of them is working
var currentTime = Date.parse(date + ' ' + currentDate.getHours() + ':' + currentDate.getMinutes() + ':' + currentDate.getSeconds());
var t = DateTime.Now.ToString("h:mm:ss tt")
DateTime.Now.TimeOfDay etc
thanks in advance
try using this function..
function $dateTime() {
var d = new Date();
var dd = d.getDate();
var mm = d.getMonth()+1;//January is 0!
var yyyy = d.getFullYear();
var h=d.getHours();
var m=d.getMinutes();
var s=d.getSeconds();
if(dd<10){dd='0'+dd}
if(mm<10){mm='0'+mm}
if(h<10){h='0'+h}
if(m<10){m='0'+m}
if(s<10){s='0'+s}
return yyyy + '-' + mm + '-' + dd + ' ' + h + ':' + m + ':' + s;
}
returns the value 2015-01-06 and current time..

setInterval not working with specific function

I have a script that creates a bar at the top right of the browser with current date and time. I'm trying to update it every thirty seconds so that it keeps a live time, and not just the time when the page loaded. You'll see that I create the time bar with the set_time() function onload, and then create a setInterval that is intended to call timer() which in turn updates the time by calling the set_time() function again. The timer is clearly firing because every 4 seconds I get an alert box with "hi" (from the timer() function), but then when it's supposed to call set_time() after this it isn't working. I should be getting an alert with "set time" (located at the end of the set_time() function) each time the timer is fired as well, which I do not. Can anybody help?
window.onload = function(){
set_time();
window.setInterval(timer, 4000);
};
function timer(){
alert('hi');
set_time();
}
function set_time(){
//create date object to manipulate
var d = new Date();
//current day of the week
var d_names= new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday");
curr_day = d.getDay();
//current date
var m_names = new Array("January", "February", "March",
"April", "May", "June", "July", "August", "September",
"October", "November", "December");
var curr_date = d.getDate();
var curr_month = d.getMonth();
var curr_year = d.getFullYear();
//current Time
var a_p = "";
var curr_hour = d.getHours();
if (curr_hour < 12)
{
a_p = "a.m.";
}
else
{
a_p = "p.m.";
}
if (curr_hour == 0)
{
curr_hour = 12;
}
if (curr_hour > 12)
{
curr_hour = curr_hour - 12;
}
var curr_min = d.getMinutes();
curr_min = curr_min + "";
if (curr_min.length == 1)
{
curr_min = "0" + curr_min;
}
element = document.getElementById('dateTime');
if(element){
//if dateDiv already exists, update contents
dateDiv.innerHTML = '';
dateDiv.innerHTML = '<p>' + d_names[curr_day] + ', ' + m_names[curr_month] + ' ' + curr_date + ', ' + curr_year + ' | ' + '<strong>' + curr_hour + ':' + curr_min + ' ' + a_p + '</strong>' + '</p>';
}
else{
//else create new dateDiv and append it to DOM body
var dateDiv = document.createElement('div');
dateDiv.innerHTML = '<p>' + d_names[curr_day] + ', ' + m_names[curr_month] + ' ' + curr_date + ', ' + curr_year + ' | ' + '<strong>' + curr_hour + ':' + curr_min + ' ' + a_p + '</strong>' + '</p>';
dateDiv.id = 'dateTime';
document.body.appendChild(dateDiv);
}
alert('set time');
//setTimeout("set_time()", 3000);
}
You are assigning the #dateTime div to the element variable and even check for it's existance, but when you have confirmed that element exists you use a dateDiv variable. That one is undefined and throws an exception on setting its innerHTML property; you should be able to see that in your browser's error console.
Use this code instead:
var element = document.getElementById('dateTime');
if (!element) {
element = document.createElement('div');
document.body.appendChild(element);
}
element.innerHTML = '<p>' + d_names[curr_day] + ', ' + m_names[curr_month] + ' ' + curr_date + ', ' + curr_year + ' | ' + '<strong>' + curr_hour + ':' + curr_min + ' ' + a_p + '</strong>' + '</p>';
If you look at your error console, you will see that javascript throws a 'dateDiv not defined' error here (just before the else):
dateDiv.innerHTML = '';
To avoid that (and get your script working), do this:
Code the div layer into your HTML (don't create it using javascript) like so:
<div id="dateTime"></div>
Remove the else block at the end (it is now superfluous because of step 1)
Add this to the top of set_time():
var dateDiv = document.getElementById( 'dateTime' );

Javascript Date Function Not working

Hi I am trying to add 31 days to 'myDate' which is the current date. It is supposed to get the date add 31 days, then the convertDate function is supposed to translate it to something like 'Nov 31, 2012'. But it doesn't work. Does anyone know why?
Here is the primary function...
function process (infoarray) {
var myDate = new Date();
//var final = convertDate(myDate);
var length = infoarray.length;
var final_string;
for (var b = 0; b < length; b++) {
if (b == 0) {
if (infoarray[b][3] == 'After') {
final_string = '<b>' + infoarray[b][3] + ' ' + infoarray[b][1] + '</b><br/>' + infoarray[b][0] + '<br/>';
} else {
final_string = '<b>' + infoarray[b][1] + ' ' + infoarray[b][3] + ' ' + infoarray[b][2] + '</b><br/>' + infoarray[b][0] + '<br/>';
}
} else {
if (infoarray[b][3] == 'After') {
final_string = final_string + '<br/><b>' + infoarray[b][3] + ' ' + convertDate(myDate.setDate(myDate.getDate() + 31)) + '</b><br/>' + infoarray[b][0] + '<br/>';
} else {
final_string = final_string + '<br/><b>' + infoarray[b][1] + ' ' + infoarray[b][3] + ' ' + infoarray[b][2] + '</b><br/>' + infoarray[b][0] + '<br/>';
}
}
}
return final_string;
}
Here is the line i am focused on from the function above...
final_string = final_string + '<br/><b>' + infoarray[b][3] + ' ' + convertDate(myDate.setDate(myDate.getDate() + 31)) + '</b><br/>' + infoarray[b][0] + '<br/>';
Here is the convertDate function...
function convertDate(d) {
var day = d.getDate();
if (day < 10) {
day = '0' + day;
}
var year = d.getFullYear();
var month = d.getMonth();
var months=['Jan','Feb','Mar','Apr','May','June','July','Aug','Sep','Oct', 'Nov','Dec'];
var currentMonth = months[month];
return (currentMonth + ' ' + day + ', ' + year);
}
myDate.setDate(...) modifies the value of the Date instance, but doesn't return anything.
You need to call setDate first, then pass the variable to your function.
Here.
First calculate then call
DEMO;
var myDate = new Date();
myDate.setDate(myDate.getDate()+31);
final_string = final_string + '<br/><b>' +
infoarray[b][3] + ' ' +
convertDate(myDate) + '</b><br/>' + infoarray[b][0] + '<br/>';
Or add it to the function:
.... convertDate(myDate,31) + ....
With
function convertDate(d,offset) {
if ( offset ) d.setDate(d.getDate()+offset);
var day = d.getDate();
if (day < 10) {
day = '0' + day;
}
var year = d.getFullYear();
var month = d.getMonth();
var months=['Jan','Feb','Mar','Apr','May','June','July','Aug','Sep','Oct', 'Nov','Dec'];
var currentMonth = months[month];
return (currentMonth + ' ' + day + ', ' + year);
}
DEMO
By using setDate, you tell the Date object to set the day number to something between 32 and 62, which doesn't make much sense.
A good way to add 31 days would be to use getTime, which returns the number of mseconds ellapsed since 1st Jan 1970:
myDate.setTime( myDate.getTime()+31*24*60*60*1000 );
//31Days x 24 hours x 60 minutes x 60 seconds x 1000 msecs

Categories

Resources