Create Array from Model Data in Django Template in <script>

Question

I am trying to use JQuery date picker and I want to make use of the beforeShowDay method in order to block out dates in the date picker. I have been able to get the widget to work and if I define an array, the beforeShowDay method works flawlessly. But my issue is passing the data from my Django model to create an array. Is there a way to create an array within the element in the template in order to achieve this?

template

 <script>
            # works as intended when the array is defined manually
            var array = [
              "2022-10-01"
            ]

            # this is where I am having trouble creating an array from the model data
            var array = [
              {% for x in listing_reservations %}
                {{x.dates}}
              {% endfor %}
            ]

            $(function() {
              $( "#id_start_date" ).datepicker(
                {
                  beforeShowDay: function(date){
                    var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                    return [ array.indexOf(string) == -1 ];
                }
                }
              );
            });
</script>

haduki · Accepted Answer · 2022-10-03 05:11:31Z

1

If i understood correctly you just want your instance's dates in the array. You can just try creating an empty array and filling it up with the values

var array = [];

{% for x in listing_reservations %}
array.push({{x.dates}})
{% endfor %}

If that does not work try assigning the {{x.dates}} in a different variable then append that variable in your array

answered Oct 3, 2022 at 5:11

haduki

8488 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MaxDawg27 Over a year ago

Thanks for the reply. I tried var array = []; {% for x in listing_reservations %} date = {{x.dates}} array.push(date) {% endfor %}. However, I am getting an error "Unexpected number '1'. Expected a property name after ''. I think it may be because of the date format, as their is a comma in the date. Ex. date = Jan. 1, 2022, which is why it is not adding to the array. It is calling the right data, but not appending to the array. I tried date = Date({{x.dates}}) with the same error.

MaxDawg27 Over a year ago

Think I am a little bit closer with {% for x in listing_reservations %} date = new Date({{x.start_date|date:'m/d/y'}}); array.push(date); {% endfor %}. The dates are now returning and creating an array, however all the dates in the array are Wed Dec 31 1969 19:00:00 GMT-0500 (EST).

haduki Over a year ago

This happens when you try to bring a 'django date format' to javascript. You can try checking out stackoverflow.com/questions/27869606/… this if it helps you.

MaxDawg27 · Accepted Answer · 2022-10-04 11:06:24Z

Finally figured it out, hopefully helps someone in the future! Thanks Haduki for the help :)

          <script>

            var array = [];

            {% for x in reservations %}
              var date = new Date("{{x.isoformat}}").toISOString().split('T')[0];
              array.push(date);
            {% endfor %}

            console.info(array)

            $(function() {
              $( "#id_start_date" ).datepicker(
                {
                  beforeShowDay: function(date){
                    var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                    return [ array.indexOf(string) == -1 ];
                }
                }
              );
            });

          </script>

Collectives™ on Stack Overflow

Create Array from Model Data in Django Template in <script>

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related