We Keep Coding

Make Datepicker appear when clicking on field in Qualtics

I'm trying to combine two pieces of code. I like the Google data picker style and I like the code that makes it appear when you click on the specific question.
Below are the two pieces of code. I know it's something to do with the function hideFixFuntion but my lack of JavaScript knowledge is stopping me figuring it out. Please could someone help make the google datepicker code appear and disappear when you click on Question QID27?
Many thanks
Rodp
Google datepicker code
Qualtrics.SurveyEngine.addOnload(function()
{
var qid = this.questionId;
var calid = qid + '_cal';
var y = QBuilder('div');
$(y).setStyle({clear:'both'});
var d = QBuilder('div',{className:'yui-skin-sam'},[
QBuilder('div', {id:calid}),
y
]);
var c = this.questionContainer;
c = $(c).down('.QuestionText');
c.appendChild(d);
var cal1 = new YAHOO.widget.Calendar(calid);
cal1.render();
var input = $('QR~' + qid);
$(input).setStyle({marginTop: '20px',width: '150px'});
var p =$(input).up();
var x = QBuilder('div');
$(x).setStyle({clear:'both'});
p.insert(x,{position:'before'});
cal1.selectEvent.subscribe(function(e,dates){
var date = dates[0][0];
if (date[1] < 10)
date[1] = '0' + date[1];
if (date[2] < 10)
date[2] = '0' + date[2];
input.value = date[0] +'-'+date[1]+'-'+date[2];
/* var dt = [ //this code was thought to be needed to reverse the date format but no longer reqiured. It's not quite working as it's not updating the field through the input.value method so something isn't quite right in the syntax
date.getFullYear(),
('0' + (date.getMonth() + 1)).slice(-2),
('0' + date.getDate()).slice(-2)
].join('-');
input.value = dt; */
})
});
For completion the above needs the following references in the Look and Feel header
<link href="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/assets/skins/sam/calendar.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/calendar-min.js"></script>
below is the cdn.jsdelivr.net date picker code with the ability to make it visible when you click on the date field, sourced from: Utilizing Date Range Picker for Qualtrics date selection. It's the addeventlisterner and the hidefixfuntion() coding that I need help with transplanting into the above code. Note: the date picker isn't bringing up valid dates in the date picker for some reason but I'm not worried about that as the Google one above works fine.
Qualtrics.SurveyEngine.addOnload(function()
{
$('input[name="QR~QID27~TEXT"]').daterangepicker({
singleDatePicker: true,
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
}
});
var x = document.getElementById('QR~QID27');
x.addEventListener('focusout', hideFixFunction);
function hideFixFunction() {
document.getElementById('QR~QID27').style.display = "inline-block";
}
$('input[name="QR~QID27~TEXT"]').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('MM/DD/YYYY'));
document.getElementById('QR~QID27').style.display = "inline-block";
});
$('input[name="QR~QID27~TEXT"]').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
document.getElementById('QR~QID27').style.display = "inline-block";
});
});
For completion the above needs the following references in the Look and Feel header
<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

Adding a manufacturing lead time to website Javascript to HTML

I'm using a CMS system that works alongside a backend that we must use. I'm trying to have it display a production lead time date such as www.customink.com. Current day +10 business days I'm using a HTML widget in this custom CMS, so I'm not sure if that is relevant. I'm struggling getting it to show up, and I really have no idea what I'm doing. I tried my best lol. Here's what I have thus far.
EDIT: Also, If I want it to only display M-F how do I go about that? I want it to read - Guaranteed by Fri, Oct 11.
<html>
<body>
<script>
document.getElementById("p1").innerHTML = newDate;
function addDays(theDate, days) {
return new Date(theDate.getTime() + days*24*60*60*1000);
}
var newDate = addDays(new Date(), 10);;
</script>
</body>
</html>

document.getElementById("p1").innerHTML = newDate;
In this statement, what you are doing is trying to find the DOM element with id p1 and then setting the value of newDate variable as its value. Therefore you should define an element with such id before your script block.
Then you are declaring and setting the value of the newDate after you have set the value for the above element. But you should do it before that.
See the fixed code below.
(I have used a <div> element as the p1 element. But you can use any other options such as <span>, <h1>, <h2>, etc. based on your requirement.)
<html>
<head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js'></script>
</head>
<body>
<div id='p1'></div>
<script>
var newDate = addDays(new Date(), 10);
document.getElementById("p1").innerHTML = formatDate(newDate);
function addDays(theDate, days) {
//return new Date(theDate.getTime() + days*24*60*60*1000);
return moment(theDate).add(days, 'd').toDate();
}
function formatDate(date) {
return moment(date).format('[Guaranteed by] ddd, MMM DD');
}
</script>
</body>
</html>

Semantic UI Calendar not showing

I'm trying experiment with Semantic UI Calendar where you have a date input field and a calendar pops up when you select it as shown in this first example. I'm unfamiliar with this process so I'm unsure if I'm properly linking the .js file or if it's something else. I've looked at other problems and saw mention of jquery, but again unsure about how to even check if that's the problem.
TOOLS:
Webstorm, Node.js
PROCESS:
1: npm install --save semantic-ui-calendar (install instructions ref)
2: Added the below code and tried to link them together
3: npm start (running on local host)
4: Page loads, input field and everything else wdisplays, calendar failing to show
HTML:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/node_modules/semantic-ui-calendar/dist/calendar.min.js"></script>
<link rel="stylesheet" href="/node_modules/semantic-ui-calendar/dist/calendar.min.css" />
<script src="/utils/calendar.js"></script>
</head>
<body>
<div>
<div class="ui calendar" id="example1">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="Date/Time">
</div>
</div>
</div>
</body>
</html>
Javascript file:
$('#example1').calendar();
$('#example2').calendar({
type: 'date'
});
$('#example3').calendar({
type: 'time'
});
$('#rangestart').calendar({
type: 'date',
endCalendar: $('#rangeend')
});
$('#rangeend').calendar({
type: 'date',
startCalendar: $('#rangestart')
});
$('#example4').calendar({
startMode: 'year'
});
$('#example5').calendar();
$('#example6').calendar({
ampm: false,
type: 'time'
});
$('#example7').calendar({
type: 'month'
});
$('#example8').calendar({
type: 'year'
});
$('#example9').calendar();
$('#example10').calendar({
on: 'hover'
});
var today = new Date();
$('#example11').calendar({
minDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() - 5),
maxDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 5)
});
$('#example12').calendar({
monthFirst: false
});
$('#example13').calendar({
monthFirst: false,
formatter: {
date: function (date, settings) {
if (!date) return '';
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
return day + '/' + month + '/' + year;
}
}
});
$('#example14').calendar({
inline: true
});
$('#example15').calendar();

I think it doesn't works because you forget to import Jquery plugin, you can do it with a cdn :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
And your javascript files is not good if you use Jquery, you have to start the files by :
$(document).ready(function() {
/* YOUR JAVASCRIPT CODE INSIDE */
});
Peace

It will not work because Semantic UI v2.3.3 does not provide a calendar function. You can check in the inspect section; it will throw an error. If you want to use calendar you need to downgrade your semantic.js file to v2.1.4.

Showing Date in different format in javascript datepicker

I am new to JavaScript and I am trying to make a date-picker widget, I have the selected date in mm/dd/yy format,how can I get the date as "Thu(Day),25th July(Date,month) ,2013" kind of format and also how to set the input value to the current date.Here's my fiddle,
http://jsbin.com/idowik/3/
http://jsbin.com/idowik/3/edit
There are so much warnings , please bear with me and please open the output in new tab. Thank You,

Read the docs about the Date Object: http://www.w3schools.com/jsref/jsref_obj_date.asp.
Everything you need is described there.
Have a look at the following code:
<!DOCTYPE html>
<html>
<body>
<input id="dateInput" type="text"></input>
<button id="convertButton">Convert to string</button>
<a id="dateString"></a>
<script type="text/javascript">
var dateInput = document.getElementById("dateInput");
var button = document.getElementById("convertButton");
var dateString = document.getElementById("dateString");
var date;
button.onclick = function() {
var year = 2000+ parseInt(dateInput.value.split("/")[2]);
var month = dateInput.value.split("/")[0];
var day = dateInput.value.split("/")[1];
date = new Date(year, month, day);
dateString.innerHTML = date.toDateString();
}
</script>
</body>
</html>
This html page does exactly what you want.

Datejs - Problem with 12:00 pm

I really have no idea what I'm doing wrong here. I can't get Datejs to properly parse "12:00 pm" however, it seems to work fine on other dates. Below is a clip from the Firefox debugger:

Download the latest version of Datejs from SVN not the version in the "download" section.

Try wrapping the code in an IIFE.
<!DOCTYPE html>
<html>
<body>
<input type=text id=d onkeyup="parsedate()">
</input>
<br>
<span id=output></span>
<script type="text/javascript" src="../../../static/js/date.js"></script>
<script>
( function() {
parsedate = function() {
var input = document.getElementById('d').value;
var output = document.getElementById('output');
var d = Date.parse(input);
if (d !== null) {
output.innerHTML = d.toString();
} else {
output.innerHTML = "------"
}
}
}());
</script>
</body>
</html>
The IIFE being
(function(){
//code
}());
What I'm curious about is why FireFox behaves this way. I know they added security updates a few years back that prevent you from overwriting Date.prototype functions, but why is an IIFE capable of accessing this scope?