Content security policy, (Removing js from the midst of HTML)

[KillGorack]

JQuery 3.3.1, Bootstrap 4.2.1, and the use of the Bootstrap Datepicker

We’re trying to get satisfy some “Content Security Policy” requirements. One of which is to remove the java in the code, and call it from a known js file somewhere. That said I need to place the stuff in a js file which DOES work, but we have to place some java for EACH datepicker, or datetimepicker that exists in the site (which is scalable) so these form elements need to be added from time to time, and as it stands now we’ll need to add to the JS file also.

I’m an absolute tool when it comes to js just FYI.

To the question;

Is there a way to code the JAVA below so it can handle ALL datepickers once? In the past we would write the form element and the js together, so the id's could be created on the fly. With a js file, it complicates things.

$('#datepicker').datepicker({
  format: 'yyyy/mm/dd',
  calendarWeeks: true,
  weekStart: 1,
  todayHighlight: true
});

 

[KillGorack]

It's a bit tacky, but this is working so far, there has to be a better way.

 

  function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
    results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
  }

  if(getParameterByName('fn') == 'edit'){
    var i;
    for(i = 1; i < 10; i++){
      $('#datepicker' + i).datepicker({
        format: 'yyyy/mm/dd',
        calendarWeeks: true,
        weekStart: 1,
        todayHighlight: true
      });
    }
  }

 

Edit below

PHP with the incremental value on the end..

  function element_date($field, $value){

    if($field['fld_required'] == 1){
      $rq = "required";
    }else{
      $rq = "";
    }

    $rtrn = "<div class=\"form-group row m-0\">";
      $rtrn .= "<label class=\"col-sm-4 col-form-label\">".$field['fld_human']."</label>";
      $rtrn .= "<div class=\"col-sm-8 text-right p-0\">";
        $rtrn .= "<input id=\"datepicker".$this->datecounter."\" type=\"text\" class=\"form-control form-control-sm\" name=\"".$field['fld_fieldname']."\" value=\"".$value."\" ".$rq." placeholder=\"YYYY-MM-DD\">";
      $rtrn .= "</div>";
    $rtrn .= "</div>";

    $this->datecounter = $this->datecounter + 1;

    return $rtrn;

  }

 

Edited January 4, 2019 by KillGorack

[kicken]

Create a function that looks for inputs with a specific attribute and then apply your date picker code to those.  For example:

jQuery(function($){
    var defaultSettings = {
        format: 'yyyy/mm/dd',
        calendarWeeks: true,
        weekStart: 1,
        todayHighlight: true
    };

    $('[data-datepicker]').each(function(){
        var $input = $(this);
        var settings = $.extend($input.data('datepicker')||{}, defaultSettings);
        $input.datepicker(settings);
    });
});

Then in your HTML you just give your inputs the appropriate attribute.  If you want to change the default settings, put the new settings as the attributes value.

<input type="text" name="start" data-datepicker>
<input type="text" name="end" data-datepicker>
<input type="text" name="birthday" data-datepicker='{"format":"mm/dd/yyyy"}'>

 

Edited January 4, 2019 by kicken

[KillGorack]

Sorry for the late reply! Thanks for that it works great. Better than my solution for sure.