We Keep Coding

Modifying JavaScript Calendar in Qualtrics

I found a JavaScript code to embed a calendar on a Qualtrics question.
Enter a survey date:
<link href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.1/pikaday.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/locale/es.js"></script>
<script>
Qualtrics.SurveyEngine.addOnload(function()
{
var inputId = 'QR~' + this.questionId;
moment.locale('en');
var picker = new Pikaday(
{
field: document.getElementById(inputId),
i18n: {
previousMonth : 'previous month',
nextMonth : 'next month',
months : moment.localeData()._months,
weekdays : moment.localeData()._weekdays,
weekdaysShort : moment.localeData()._weekdaysShort
},
minDate: new Date(2020, 05, 22),
maxDate: new Date(2020, 05, 26),
yearRange: [2000, 2020],
bound: true,
container: document.getElementById('container')
});
});
Qualtrics.SurveyEngine.addOnReady(function()
{
jQuery("#"+this.questionId+" .InputText").attr("readonly",true);
});
</script>
It worked well on the first page. However, the calendar still appeared on the left corner on the second page of my Qualtrics survey. How should I modify the above code so that the calendar only appears on the date question on the first page only?
Also, I found that the "5" in "new Date(2020, 05, 22)" is for June (not May). I think it might be due to the logic that the first number is 0 in Javascript. How should I modify the code to display the month number matching the actual month?

Where did you put the script? The link and script tags should go in the survey header. Then the addOnload and addOnReady functions in the question's JavaScript (not inside script tags in the question text).
Yes, in that date format month is indexed from 0. You could use a date string the with actual dates like "2020-05-22".
Personally, I like to use flatpickr as a date picker with Qualtrics.

When i include datepicker js & css files through php include doesn't work, but works on if i put all the code in single php page

I am creating a PHP form so I am including PHP header files to my index page. all the files are correctly loading except jquery date picker files are not loading and if put all the jquery CDN files to the index page it works correctly. But I can't add all the codes in the index page. so help me out
<?php
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.js"></script>
<script src="js/custom.js"></script>
?>
<?php include 'inc/header.php';?>
<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>
//
$('#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 want to include datepicker js & css files through php file using instead of putting all cdn files to index.php

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.js"></script>
<script src="js/custom.js"></script>
Remove php tags and your scripts will be included accurately. You are using html tags inside php block.That's the reason they are not rendered.

Display specific dates in bootstrap datepicker

I'm using bootstrap date picker in my project. It's a session booking project. From the admin panel, I add the sessions for specific dates and I want the user's of my website to be able to see the dates for which I have added a session. My frontend receives the data from database. The data contains all the dates for which I have added a session. I want my datepicker to display only these dates from the data and disable the other dates.
Currently I have temporarily used a select box to solve this issue. But a datepicker would be better as it looks good is easy to navigate.
See the picture below. This is how I have used a select box to temporarily solve the problem
Here is the desired output that I want
It should be a datepicker with only those dates enabled which I receive from the database. The other dates should be disabled
I tried searching it on google but I'm not able to find the solution. Is this possible using bootstrap date picker? If yes, please suggest a workaround.

You can use beforeShowDay function to enable only the dates returned from your back end system.
Documentation here
This function is executed for every date, it checks if it is present in the list of applicable dates, returns true if present and enables it, else returns false and disables it.
$(function () {
let enabledDates = ['2018-10-03', '2018-10-04', '2018-10-05', '2018-10-06', '2018-10-07', '2018-10-08'];
$('#datepicker').datepicker({
format: 'yyyy-mm-dd',
beforeShowDay: function (date) {
let fullDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
return enabledDates.indexOf(fullDate) != -1
}
});
});
beforeShowDay function also allows you to return classes for custom styling
beforeShowDay: function (date) {
let fullDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
if (enabledDates.indexOf(fullDate) != -1) {
return {
classes: 'enabled',
tooltip: 'You can select this date'
};
} else
return false
}
.enabled {
background: #DCDCDC;
}

None of the other solutions worked for me so here is my solution.
The documentation is not so clear and lacks of example but you can see a function that takes a date as a parameter and returns a Boolean, indicating whether or not this date is selectable
In this snippet, look at January 2020 for example in order to see only the active dates.
$(document).ready(function() {
var datesEnabled = [
'2021-01-01', '2021-01-11', '2021-01-21',
'2021-02-01', '2021-02-11', '2021-02-21',
'2021-03-01', '2021-03-11', '2021-03-21',
'2021-04-01', '2021-04-11', '2021-04-21',
'2021-05-01', '2021-05-11', '2021-05-21'
];
$("#datepicker-lorem").datepicker({
language: "fr",
autoclose: true,
todayHighlight: true,
todayBtn: true,
title: 'Test ;-)',
weekStart: 1,
format: 'dd/mm/yyyy',
// On n'active que les dates possibles
beforeShowDay: function(date) {
var allDates = date.getFullYear() + "-" + ('0' + (date.getMonth() + 1)).slice(-2) + "-" + ('0' + date.getDate()).slice(-2);
if (datesEnabled.indexOf(allDates) != -1) {
return {
classes: 'date-possible',
tooltip: 'Vous pouvez choisir cette date'
}
} else {
return false;
}
}
});
});
/* For better frontend result, add class to active date and add opacity to disabled date */
td.day.disabled {
opacity: 0.4;
}
td.date-possible {
background-color: red;
color: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.fr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<input class="form-text form-control" type="text" id="datepicker-lorem" name="date_demande" value="" size="60" maxlength="128">
</div>
</div>
</div>

Using 'beforeShowDay' parameter you can disable dates:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
//date list that you want to disable
disableddates = ['10-10-2018', '10-11-2018', '10-12-2018'];
$("#datepicker").datepicker({
format: 'dd-mm-yyyy',
beforeShowDay: function(date) {
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
var currentdate = (m + 1) + '-' + d + '-' + y;
for (var i = 0; i < disableddates.length; i++) {
// Now check if the current date is in disabled dates array.
if ($.inArray(currentdate, disableddates) != -1) {
return [false];
}
}
return [true];
},
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
});
});
</script>
</head>
<body>
<p>Date:
<input type="text" id="datepicker">
</p>
</body>
</html>
</body>
</html>

How to pass a variable from Javascript to PHP?

I've checked dozens of similar topics already answered and I simply can't get around the issue I have.
I am using a bootstrap date time picker (https://eonasdan.github.io/bootstrap-datetimepicker) and my goal is to pass the displayed value from a page that holds the calendar (calendar.php) to a PHP file (data.php) whenever the date is changed.
Below I added the code. Since I have some files locally stored, I added some info from Chrome's dev tools.
The date picker is working fine and I can get the value with Javascript.
The issue is that nothing is passed to PHP.
Checked the syntax..everything seems fine for me at this point.
I don't know what I'm doing wrong. Any advice would be more than welcomed !
calendar.php :
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript" src="moment.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-datetimepicker.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1' >
<input type='text' id='date' name='date' class="form-control" >
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(function () {
// Formatting how date is displayed
$('#datetimepicker1').datetimepicker({
calendarWeeks: true,
format: "YYYY MM DD"
});
//Displaying the current date in the text box when the page is accessed
$('#datetimepicker1').data("DateTimePicker").date(new Date());
// Sending the date to PHP when the user is changing it
//dp.change is an event fired when date is changed
$('#datetimepicker1').on("dp.change",function(){
var day = $('#date').val();
$.ajax({
type: "POST",
url: "data.php",
data: { day : day } })
.done(function() { alert(day); })
.fail(function() { alert("error"); })
});
})
})
</script>
</div>
</div>
</body>
</html>
When I execute the code, it alerts me with the day ( it goes to .done(function() { alert(day); }) ) and in my current understanding, the post was a success or at least that's how I interpret it.
This is from Chrome's dev tool.
I am trying to show that the value is retrieved. No other errors appear.
// Sending the date to PHP when the user is changing it
$('#datetimepicker1').on("dp.change",function(){
var day = $('#date').val(); // Date gets retrieved : day = "2016 08 03"
$.ajax({
type: "POST",
url: "data.php",
data: { day : day } }) // Date gets retrived: day = "2016 08 03"
.done(function() { alert(day); }) // I get a pop-up with the date
.fail(function() { alert("error"); })
});
})
})
The file with Javascript code and the file with PHP code are in the same folder.
PHP (data.php) code is below :
<?php
if(isset($_POST['day']))
{
$day = $_POST['day'];
echo $day;
}
?>
I simply can't figure what am I doing wrong or missing in the code above.
Edit :
I think I didn't focused well on the issue I am having and I am sorry for that. All your suggestions ( thanks a lot for them) are about the .done(function).
My issue is that my php file (data.php) is empty. The date isn't passed by the Ajax and I don't know why. The post doesn't happen.
I tried all the suggestions u guys mentioned, thinking that they may be the answer but no luck.

The PHP is outputting the value. The web server is sending the value to the browser. The browser is giving that value to JavaScript. jQuery is processes that value. Then you ignore it.
It is passed as the first argument to the function you pass to done, use it.
.done(function(data_in_response) { alert(data_in_response); })

You should put the same variable inside the ajax response function to print on response, i.e.,
.done(function(data){
alert(data);
})

How to implement the DATE PICKER in PhoneGap/Android?

I have tried to implement the date picker in android. I want it to get the data and show it in the text format
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<script type="text/javascript" charset="utf-8" src="datePickerPlugin.js"></script>
<script type="text/javascript" charset="utf-8">
function dateTest() {
var myNewDate = new Date();
window.plugins.datePicker.show({
date : myNewDate,
mode : 'date', // date or time or blank for both
allowOldDates : true
}, function(returnDate) {
var newDate = new Date(returnDate);
currentField.val(newDate.toString("dd/MMM/yyyy"));
// This fixes the problem you mention at the bottom of this script with it not working a second/third time around, because it is in focus.
currentField.blur();
});
}
</script>
</head>
<body bgcolor="#ffffff">
<hr>DatePicker Test<hr><br>
<input type="button" onClick ="dateTest()" value ="Today's Date!!" />
<div id="view"></div>
</body>
</html>
I am getting it as an alert...but unable to store it as a string on the same page

Why loose ur head?
A <input type="date"> will allways deppend on device's interpretation of it, in some android devices it doesn't even work,
There is plenty of plugins, addons, whatever, for it,
I personally like, and use mobiscroll: Link
Edit: Mobiscroll is now paid but there are loads of free frontend mobile frameworks and probably all of them have a datepicker, such as jQuery Mobile-datepicker.

It seems that your currentField is undefined. Did you check the chrome console before running it on AVD ? Pls try to post the element in which you are trying to display the date as well.
For now, I am assuming that you are trying to do what the following code does
$('.nativedatepicker').focus(function(event) {
var currentField = $(this);
var myNewDate = new Date(Date.parse(currentField.val())) || new Date();
// Same handling for iPhone and Android
window.plugins.datePicker.show({
date : myNewDate,
mode : 'date', // date or time or blank for both
allowOldDates : true
}, function(returnDate) {
var newDate = new Date(returnDate);
var newString = newDate.toString();
newString = newString.substring(0,15);
currentField.val(newString);
// This fixes the problem you mention at the bottom of this script with it not working a second/third time around, because it is in focus.
currentField.blur();
});
});
The element is as follows
<input type="text" class="nativedatepicker" readonly value = "Fri Jun 21 2013"/>
Works like a charm !! Hope it helps !!

What I want to happen is simple - I just want a datepicker to display when I click a certain field.
However, the same as Aleks, I don't know what to put in my html, how to use it in html, and what should I put in the html to invoke the datepicker on some input.
The documentation from the plugin is incomplete.
I found a solution from this test project.
Steps are as follows:
Pre-requisite: phonegap/cordova-cli installed
Install Cordova's device plugin: $ cordova plugin add org.apache.cordova.device
Install Dirk's datepicker plugin: $ cordova plugin add https://github.com/DURK/cordova-datepicker-plugin
Copy the nativedatepicker.js from the test project and place it on your project's js folder. This file has showDatePicker(), showDateTimePicker() convenience functions.
Add the ff. to index.html code:
Note: The datepicker won't show when you test it in your browser
....
<div class="form-group">
<label>Appointment</label>
<input type="text" class="form-control datepicker" id="appointment">
</div>
....
<script src="js/nativedatepicker.js"></script>
<script src="cordova.js"></script>
<script type="text/javascript">
(function($){
$(document).ready(function () {
$(document).on('click', '.datepicker', function () {
showDatePicker($(this), 'date');
});
$(document).on('click', '.timepicker', function () {
showDatePicker($(this), 'time');
});
$(document).on('click', '.datetimepicker', function () {
if (device.platform === "Android")
showDateTimePicker($(this));
else
showDatePicker($(this), 'datetime');
});
});
})(jQuery);
</script>

This is my working implementation. Input type is text, readonly.
$('.nativedatepicker').focus(function(event) {
var currentField = $(this);
var myNewDate = new Date();
window.plugins.datePicker.show({
date : myNewDate,
mode : 'date',
allowOldDates : true
}, function(returnDate) {
var array = returnDate.split("/");
var day = array[2], month = array[1];
if (day <= 9)
day = "0" + day;
if (month <= 9)
month = "0" + month;
currentField.val(array[0] + "/" + month + "/" + day);
currentField.blur();
});
});

Why would you want to implement a custom date picker if there is an ative one available ?
You can simply use <input type="date"> to create the commonly known iOS date picker.
For more infos on input fields on mobile devices I suggest: http://blog.teamtreehouse.com/using-html5-input-types-to-enhance-the-mobile-browsing-experience