3

I have recently started leaning Drupal 7. I have built my first Webform and I'd like to add a field that calculates automatically number of days between two dates as shown in below the picture I tried to follow this tutorial but I didn't understand it so I tried to use the module js injector to solve the problem!

This is the JS injection rule that I used

jQuery(document).ready(function($) {

$( "#edit-submitted-startdate,#edit-submitted-enddate" ).datepicker({
changeMonth: true,
changeYear: true,
firstDay: 1,
dateFormat: 'dd/mm/yy',
})

$( "#edit-submitted-startdate" ).datepicker({ dateFormat: 'dd-mm-yy' });
$( "#edit-submitted-enddate" ).datepicker({ dateFormat: 'dd-mm-yy' });

$('#edit-submitted-enddate').change(function() {
var start = $('#edit-submitted-startdate').datepicker('getDate');
var end   = $('#edit-submitted-enddate').datepicker('getDate');

if (start<end) {
var days   = (end - start)/1000/60/60/24;
$('#edit-submitted-days').val(days);
}
else {
alert ("You cant come back before you have been!");
$('#edit-submitted-startdate').val("");
$('#edit-submitted-enddate').val("");
$('#edit-submitted-days').val("");
}
}); 
}); 
});

But it doesn't work. Can you help me finding the error? It seems I didn't write it well on Drupal as js rule.

This is the javascript code that I want to write:

<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet"             href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css" />
<script>
$(document).ready(function() {

$( "#startdate,#enddate" ).datepicker({
changeMonth: true,
changeYear: true,
firstDay: 1,
dateFormat: 'dd/mm/yy',
})

$( "#startdate" ).datepicker({ dateFormat: 'dd-mm-yy' });
$( "#enddate" ).datepicker({ dateFormat: 'dd-mm-yy' });

$('#enddate').change(function() {
var start = $('#startdate').datepicker('getDate');
var end   = $('#enddate').datepicker('getDate');

if (start<end) {
var days   = (end - start)/1000/60/60/24;
$('#days').val(days);
}
else {
alert ("You cant come back before you have been!");
$('#startdate').val("");
$('#enddate').val("");
$('#days').val("");
}
}); 
}); 
</script>
2
  • Any error message displayed in console? – Jimmy Ko Jul 18 '16 at 10:25
  • updated my answer – No Sssweat Jul 19 '16 at 1:45
2

You need to use proper Drupal jQuery Syntax.

Screw the js injector module, you can do the same like this:

Create a block, for Text format select Full HTML and put this code

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>

(function ($) {
$( document ).ready(function() {

$( "#edit-submitted-startdate,#edit-submitted-enddate" ).datepicker({
changeMonth: true,
changeYear: true,
firstDay: 1,
dateFormat: 'dd/mm/yy',
})

$( "#edit-submitted-startdate" ).datepicker({ dateFormat: 'dd-mm-yy' });
$( "#edit-submitted-enddate" ).datepicker({ dateFormat: 'dd-mm-yy' });

$('#edit-submitted-enddate').change(function() {
var start = $('#edit-submitted-startdate').datepicker('getDate');
var end   = $('#edit-submitted-enddate').datepicker('getDate');

if (start<end) {
var days   = (end - start)/1000/60/60/24;
$('#edit-submitted-days').val(days);
}
else {
alert ("You cant come back before you have been!");
$('#edit-submitted-startdate').val("");
$('#edit-submitted-enddate').val("");
$('#edit-submitted-days').val("");
}
}); 

});
})(jQuery);

</script>

Place the block in some region.

enter image description here

For Visibility Settings

Pages, select only listed pages and type the url for your webform.

enter image description here

9
  • I flow all the steps but unfortunately it doesn't work – Imanelek Jul 19 '16 at 14:15
  • 1
    i disabled the module js link i create the block as you told me link link link link – Imanelek Jul 19 '16 at 14:24
  • @SuperMario on this link you need to use FULL HTML as your text formatter not Filter HTML. – No Sssweat Jul 19 '16 at 22:44
  • it still doesn't work :/ link – Imanelek Jul 20 '16 at 9:56
  • @SuperMario did you clear the cache? – No Sssweat Jul 20 '16 at 10:09
-1

There are two basic ways to do it in Drupal: Drupal - Community Documentation - Adding JavaScript to a Webform

1
  • Please update your answer with the relevant bits from the link you provided in order to help future proof your answer. – Patrick Ryan May 8 '17 at 16:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.