Formatting date using jquery datepicker - javascript

I apologise if this is a really basic question but I am using the following jquery plugin:
http://jonathanleighton.com/projects/date-input
I want to change the date from YYYY-MM-DD to DD/MM/YYYY using his suggestion under customisations. I tried to do the following which I thought would work but it completely breaks it:
$.extend(DateInput.DEFAULT_OPTS, {
stringToDate: function(string) {
var matches;
if (matches = string.match(/^(\d{4,4})-(\d{2,2})-(\d{2,2})$/)) {
return new Date(matches[1], matches[2] - 1, matches[3]);
} else {
return null;
};
},
dateToString: function(date) {
var month = (date.getMonth() + 1).toString();
var dom = date.getDate().toString();
if (month.length == 1) month = "0" + month;
if (dom.length == 1) dom = "0" + dom;
return date.dom + "/" + month + "/" + getFullYear();
}
});
It's the following line where it all goes wrong:
return date.dom + "/" + month + "/" + getFullYear();
Could anyone offer a suggestion as to what I'm doing wrong?

You should try using the jQuery UI datepicker. Very easy to format the date
http://jqueryui.com/demos/datepicker/

i don't think you need the "date" in date.dom:
try replacing this:
return date.dom + "/" + month + "/" + getFullYear();
with this:
return dom + "/" + month + "/" + getFullYear();

Related

how to remove the leading zeros in date format as string

im using jquery calendar from here it basically change the background color of the disabled dates in red
<input id="iDate">
<script>
var unavailableDates = ["09-10-2018", "14-09-2018", "15-10-2018"];
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
$(function() {
$("#iDate").datepicker({
dateFormat: 'd-m-yy',
beforeShowDay: unavailable
});
});
</script>
as you can see i have 3 disabled dates, the "09-10-2018" and "14-09-2018" does not disable in my calendar because of the leading zeros of day and month but when i try to remove the zeros of the day and month its working.
i also look in here but i dont undestand
by the way the unavailaDates are coming from database so its not hardcoded thats why it generate leading zeros in day and month.
i appreciate whoever help me.
im a beginner
sorry for bad english
The issue is that date.getDate() and date.getMonth() return integers, which cannot have leading zeros, therefore there will never be a match.
Simple fix, create a function:
function pad(num) {
var s = "" + num;
if ( num < 10 ) {
s = "0" + num;
}
return s;
}
Then do:
dmy = pad(date.getDate()) + "-" + pad(date.getMonth() + 1) +
"-" + date.getFullYear();
You can use padStart and compare both formats:
var unavailableDates = ["01-10-2018", "2-10-2018", "13-10-2018"];
function unavailable(date) {
var dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
var dmy2 = ((date.getDate()+'').padStart(2,'0')) + "-" + (((date.getMonth() + 1)+'').padStart(2,'0')) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1 && $.inArray(dmy2, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
$(function() {
$("#iDate").datepicker({
dateFormat: 'dd-mm-yy',
beforeShowDay: unavailable
});
});
.ui-datepicker td.ui-state-disabled>span{background:#c30;}
.ui-datepicker td.ui-state-disabled{opacity:100;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/black-tie/jquery-ui.css"/>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js"></script>
<input id="iDate">
I think #Bryanh maybe on to something.
But direct answer to your question is:
let d = '09-10-2018';
let newD = d.split('-').map(n=>{
return parseInt(n)
}).join('-')
console.log(newD);

Time Stamps on Omegle Using Greasemonkey/Tampermonkey

I was wondering if it was possible to add live time stamps to omegle using greasemonkey.
I did some digging up and found the function to add time but I got no experience with javascript and was not sure where am I supposed to add the code.
This is the code I found: http://stackoverflow.com/questions/10211145/getting-current-date-and-time-in-javascript
function getCurrentTime() {
var currentdate = new Date();
var datetime = currentdate.getDate() + "/"
+ (currentdate.getMonth()+1) + "/"
+ currentdate.getFullYear() + " # "
+ currentdate.getHours() + ":"
+ currentdate.getMinutes() + ":"
+ currentdate.getSeconds();
return datetime;
}
I would appreciate it if someone could point me to the right direction (if this is even possible in the first place)
Here's what I've been using so far. It's terribly hacky but works fine.
if (!window.Timestamp$Element)
Timestamp$Element = Element;
Element = function (a, b) {
let elem = Timestamp$Element(a, b);
if (typeof a == "string" && b && (b["class"] == "youmsg" || b["class"] == "strangermsg")) {
let stamp = new Timestamp$Element("span", {"class": "timestamp"});
stamp.appendText(new Date().toLocaleTimeString() + " ");
elem.grab(stamp);
}
return elem;
};
Object.assign(Element, Timestamp$Element);
Or as a fully-cooked userscript with XrayWrapper handling and such, https://pastebin.com/czc0aLbG

JavaScript switch statement confusion

getDateRange = function () {
date = new Date();
var test;
selectedOption = $('#daterange').change().val()
console.log(selectedOption) // reusult 0
switch (selectedOption) {
case 0:
test = '/' + date.getFullYear() + '-' + 0 + date.getMonth() + '-' + date.getDate() + '/' + date.getFullYear() + '-' + 0 + (date.getMonth() + 1) + '-' + date.getDate()
break
}
return test
}
console.log($('#daterange').change().val()) // result 0
console.log(getDateRange()) // result "undefined". Why?
Why is the result of the switch statement always undefined?
Change your case statement to case '0' since val() returns a string.
Also: If you are not doing any other things after your switch statement except returning your test variable, you could also just return your value and get rid of var test.
getDateRange = function() {
date = new Date();
selectedOption = $('#daterange').change().val();
switch (selectedOption) {
case '0':
return '/' + date.getFullYear() + '-' + 0 + date.getMonth() + '-' + date.getDate() + '/' + date.getFullYear() + '-' + 0 + (date.getMonth() + 1) + '-' + date.getDate();
}
}
console.log(getDateRange());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="daterange" value="0" />
$('#daterange').change().val() returns a string, but in switch you compare with a number.
Also, in the current example, you don't need switch, because you have only one case:
getDateRange = function () {
var selectedOption = $('#daterange').change().val();
if (selectedOption === '0') {
return ...
}
}
I javascript your dataType should be tighly match with your comparision operatot, so compare it with ===
In this case type and data both will match together.
getDateRange = function() {
date = new Date();
selectedOption = $('#daterange').change().val();
switch (selectedOption) {
case '0':
return '/' + date.getFullYear() + '-' + 0 + date.getMonth() + '-' + date.getDate() + '/' + date.getFullYear() + '-' + 0 + (date.getMonth() + 1) + '-' + date.getDate();
}
}
console.log(getDateRange());

print date like 'Y-m-d H:i:s"in javascript

Is there a built in way in javascript that formats a date object in a format like “Y-m-d H:i:s”?
I use
var since= new Date(xhr.getResponseHeader("Last-Modified"));
alert("modified:: " +since.getDate()+'.'+(since.getMonth()+1)+'. '+ since.getHours()+':'+since.getMinutes())
But that cuts off all leading zeros
You can try this:
function LeadingZero(s,max) {
var z = max-s.length+1;
z = z>1 ? Array(z).join('0') : '';
return (z + s);
}
alert("modified:: " +LeadingZero(since.getDate(),2)+'.'+LeadingZero(since.getMonth()+1,2)+'. '+ LeadingZero(since.getHours(),2));
But I recommend using Moment.js, a library for handling dates in JS. It has built in a formatter and can do a lot of other stuff.
In moment you can do it this way:
var d = moment(since);
alert(d.format('YYYY-MM-DD HH:mm:ss'));
Use this function:
function pad(number) {
if ( number < 10 ) {
return '0' + number;
}
return number;
}
pad(since.getDate())+'.'+pad(since.getMonth()+1)+'. '+ pad(since.getHours())+':'+pad(since.getMinutes())
For Y-m-d H:i:s format use following example:
pad(since.getFullYear()) + '-' + pad(since.getMonth()+1) + '-' + pad(since.getDate()) + ' ' + pad(since.getHours()) + ':' + pad(since.getMinutes()) + ':' + pad(since.getSeconds())

Actual Date in an HTML Table?

<tr>
<td class="tr9 td0"><p class="p1 ft8">Mr. / Mrs. : </p></td>
<td class="tr9 td1"><p class="p3 ft8"><nobr>Telefon: </nobr></p></td>
<td class="tr9 td2"><p class="p4 ft6">DATE</p></td>
</tr>
How can I become the actual Date in Javascript on the Placeholder "DATE" in this table?
var currentDate = new Date()
var day = currentDate.getDate()
var month = currentDate.getMonth() + 1
var year = currentDate.getFullYear()
document.write("<b>" + day + "/" + month + "/" + year + "</b>")
Doesnt work.
It's because you are writing value directly to HTML. Pass it to element
var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var year = currentDate.getFullYear();
document.getElementsByClassName('p4')[0].innerHtml = "<b>" + day + "/" + month + "/" + year + "</b>";
Or if you are using jQuery:
$('.p4').text("<b>" + day + "/" + month + "/" + year + "</b>");
JSFiddle with pure js and jQuery
The javascript code is working fine but the problem with document.write. it write text on entire document.
so use.
document.getElementsByClassName('p4').innerHTML= "<b>" + day + "/" + month + "/" + year + "</b>";
I tried to debug in firebug and it's seems textcontent property still filled by "DATE", so i set the textContent property become date today, code below maybe can answer your question :
<script>
var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var year = currentDate.getFullYear();
document.getElementsByClassName('p4')[0].textContent = day + "/" + month + "/" + year;
</script>

Categories