1

Im trying to change the language of the date-picker dynamically. To do so, I have to change the locale value of data-options. My plan is to use a template string to change it, whenever the variable currentLang changes. The problem is, that I can't escape the string properly.

It is currently looking like this:

<div class="flatpickr" data-init="auto" data-options=`{"enableTime": true, "locale" : "${currentLang}", "dateFormat" : "Y-m-d H:i:S" }`>

In the end I want the string to look like this:

data-options='{"enableTime": true, "locale": "en", "dateFormat": "Y-m-d H:i:S"}'

Is this even possible to achieve?

Fabio ha
  • 553
  • 1
  • 8
  • 29

3 Answers3

2

It appears to be difficult to do in the template. An alternative is to define a getter property in code:

currentLang = "en-US";

get options(): string {
  return `{"enableTime": true, "locale": "${this.currentLang}", "dateFormat": "Y-m-d H:i:S"}`;
}

And set the attribute with attribute binding:

<div class="flatpickr" data-init="auto" [attr.data-options]="options"></div>

See this stackblitz for a demo.

Please note that attribute binding can also be used for a string obtained with JSON.stringify(obj), if you prefer to generate the string that way.

ConnorsFan
  • 70,558
  • 13
  • 122
  • 146
  • You beat me to it! – Edric Oct 08 '18 at 15:36
  • This looks very promising. To update the options I would use set options, and it would update the template, right? – Fabio ha Oct 08 '18 at 15:42
  • If you update `currentLang`, the div attribute should update automatically. You can see it in [the stackblitz](https://stackblitz.com/edit/angular-6mhzx1). – ConnorsFan Oct 08 '18 at 15:43
  • Okey I was able to implement it and get it working like in the stackblitz. However It won't update my datepicker (flatpickr). Is the flatpickr not reloading? How can I force the flatpickr to use the new options? – Fabio ha Oct 09 '18 at 05:52
  • That is a different question, IMO. You could ask a new question about forcing flatpickr to update. – ConnorsFan Oct 09 '18 at 12:22
  • Okey, I probably will, Thanks anyway :) – Fabio ha Oct 09 '18 at 14:57
-1

You could declare a JSON object in your component's TypeScript and bind it in your HTML.

H. Gybels
  • 147
  • 1
  • 1
  • 11
  • I also thought about doing it like that. Sadly, I get an error while binding it. The error says that it is not possible to bind data-options to a div. – Fabio ha Oct 08 '18 at 15:18
-1

Not sure this meets your requirements or not but How about this?

With Template literal

let el = document.querySelector('div');
let currentLang = 'en';
el.setAttribute('data-options', `{"enableTime": true, "locale" : ${currentLang}, "dateFormat" : "Y-m-d H:i:S"}`);
console.log(el);
<div class="flatpickr" data-init="auto">

OR with JSON.stringify() 

let el = document.querySelector('div');
let currentLang = 'en';
let options = {
  "enableTime": true,
  "local": currentLang,
  "dateFormat": "Y-m-d H:i:S"
}
el.setAttribute('data-options', JSON.stringify(options));
console.log(el);
<div class="flatpickr" data-init="auto">
A l w a y s S u n n y
  • 36,497
  • 8
  • 60
  • 103