Bootstrap datepicker options with javascript append not working - javascript

I'm using bootstrap datepicker on a form element that is appended to a div when another dropdown is selected. The datepicker is working, but I can't get the options to apply.
I'm not sure if this is a limitation with datepicker or I am doing something wrong. The html is just
<div class="form-group row">
<div class="col-6 col-md-4 col-lg-3">
<div id="dateSelector">
</div>
</div>
</div>
the append block looks like this
dateSelector.append('<label class="control-label text-muted">Event date</label>' +
'<div class="input-group date" id="datepicker-group" data-provide="datepicker">' +
'<input type="text" class="form-control" name="event_date">' +
'<span class="input-group-addon">' +
'<i class="fas fa-calendar-alt"></i>' +
'</span>' +
'</div>');
with the options in the same js doc like this
$('#datepicker-group').datepicker({
format: 'dd/mm/yyyy',
clearBtn: true
});
I've spent hours trying to work this out and can't see where I'm going wrong.
Any help much appreciated.

Do you get any syntax errors?
You selector looks suspicious. Try:
$('#dateSelector').append('....');

Thanks Travis, using the data-date-format and data-date-clear-btn attributes on datepicker-group worked. I had seen his in the bootstrap docs and tried it before without success, but I think I tried it in the input, not the div.
New .append now looks like this
dateSelector.append('<label class="control-label text-muted">Event date</label>' +
'<div class="input-group date" id="datepicker-group" data-provide="datepicker" data-date-format="dd/mm/yyyy" data-date-autoclose="true">' +
'<input type="text" class="form-control" name="event_date">' +
'<span class="input-group-addon">' +
'<i class="fas fa-calendar-alt"></i>' +
'</span>' +
'</div>');
Everything else the same.
Thanks!

Related

Datepicker not working on javascript generated html

With jquery, i append some html form inputs to my site on a button click, like these:
html += '<div class="form-group my-4">';
html += '<span class="left">Date of ending work <span class="carer_help">Required format: 01-01-2000</span></span>';
html += '<span class="left"><input class="form-control datepicker" type="text" required="required" name="work_end[' + works_row_melleklet + ']" value="'+work_end+'" /></span>';
html += '</div>';
You can see, that the input have the datepicker class.
But my problem is, that the datepicker calendar isnt showing up. I think, because the html input, where i wanna use the calendar, is not in the site's source, its just added by javascript on button click.
How can i fix this?
$('.datepicker').datepicker({
format: 'dd-mm-yyyy',
language: 'en',
autoclose: true,
todayHighlight: true
});
When you add dynamic inputs to the DOM, you need to re-initialise with the datepicker method again.
$('body').on('focus',".your_parent_div_name_where_datepicker_is_added", function(){
$(this).removeClass('hasDatepicker').datepicker();
});​

Jquery datepicker not working inside v-for of Vue.js component in laravel

Jquery date picker showing strange behavior inside the v-for loop in my vue.js component. Outside of the loop, it is working fine and date picker is showing. But, inside my v-for loop, it is not picking date picker as expected.
Here is my working code of date picker. (Working Case)
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="date" class="col-form-label pt-0">For Week End</label>
<input type="text" :name="`payrolls[${i}][payrol_date]`" class="form-control datepickere">
</div>
</div>
Date picker not working in this case (Non-working case)
<div v-for="(pay_roll, i) in payrolls" class="border border-primary p-3 rounded mb-3" :key="pay_roll.id">
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="date" class="col-form-label pt-0">For Week End</label>
<input type="text" :name="`payrolls[${i}][payrol_date]`" class="form-control datepickere">
</div>
</div>
</div>
Here is my Jquery code of datepicker.
$(".datepickere").datepicker({
onSelect: function(dateText) {
display("Selected date: " + dateText + ", Current Selected Value= " + this.value);
$(this).change();
}
}).on("change", function() {
display("Change event");
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
Although I have given a class instead of an id, still problem is the same. What is going wrong?
seems to be a typo in your code. Change datepickere to datepicker and it should work. Also, if I was you, I would use a vue compatible datepicker such as https://www.npmjs.com/package/vuejs-datepicker.

Jquery inner quotes adding a variable

Hi I have browsed stack over flow and have not come up with a solution that seems to fix my issue so I am resorting to asking this fine community.
var feild = '<div style="margin-top: 0.75%;" class="input-group input-group-lg fields urlInputOne">' +
'<span class="input-group-addon glyphicon glyphicon-cog" id="basic-addon1"></span>' +
'<input type="text" class="form-control" id="urlField" placeholder="Extra GitHub repository URL" aria-describedby="basic-addon1">' +
'</div>';
In the input tag I want to add a variable to the id, how can i do this? I have tried a few different options but kept getting errors in the browser.
so i want it to be
id="urlfeild"+1 as an example.
thanks
You can simply concatenate your string and add your variable this way:
var yourVar = 1;
var feild = '<div style="margin-top: 0.75%;" class="input-group input-group-lg fields urlInputOne">' +
'<span class="input-group-addon glyphicon glyphicon-cog" id="basic-addon1"></span>' +
'<input type="text" class="form-control" id="urlField' + yourVar + '" placeholder="Extra GitHub repository URL" aria-describedby="basic-addon1">' +
'</div>';

jQuery append does not consider CSS of the div

I tried to add an item to a main div when clicking in the button add item, this should (every time) add a new line ( a text input), to the main content. This works fine.
The problem is that the text input has some css (some width and height...), which is not loading when adding it with jQuery, so the add works fine but it shows a "normal" unstyled text input, not mine (witch is styled).
here my HTML.
<fieldset class="lodging-info-fieldset" id="all_field">
<legend>Gage sur &eacutequipement projet</legend>
<div class="panel-heading score_pannel">
<ul class="panel-heading-fieldset">
<li>D&eacutesignation</li>
<li>Valeur</li>
</ul>
</div>
<div class="form-group" id="extended">
<div class="col50 left ">
<input type="text" class="form-control" id="designation"
placeholder="">
</div>
<div class="col50 left ">
<input type="text" class="form-control" id="valeur"
placeholder="">
</div>
</div>
<div class="form-group">
<div class="add_plus">
<a id="add_pluss" class='add_plus'>add item </a>
</div>
</div>
</fieldset>
and my jQuery append function:
addLigne : function(event) {
$("#all_field")
.append(
'<div class="form-group">'
+ '<div class="col50 left">'
+ '<input type="text" class="form-control" id="designation">'
+ '</div></div>');
},
Any ideas?
Thanks a lot for your help!
I don't know how you are styling it (we need to view your CSS code), but you are duplicating and N-plicating the same ID element, and is not good practice because you can't access to this element with a correct code (maybe with cruft but is not clean and properly).
Please, think about it and try to change ids with a unique string, like numbers for example.
addLigne : function(event) {
$("#all_field")
.append(
'<div class="form-group">'
+ '<div class="col50 left">'
+ '<input type="text" class="form-control" id="designation_'+ ($('input[id^="designation_"]).length + 1) +'">'
+ '</div></div>');
},
When you show us your CSS we can help you with your real problem.
Good luck

Find an element and then find first from it with a certain class and inject an html in jQuery

I have this code to add error message next to the field input:
$("#" + index).after('<span class="text-error validation-error-inline">' + value[0] + '</span>');
And the result looks, for example, like this:
<div class="middle">
<input id="username" class="form-control" type="text" name="username">
<span class="text-error validation-error-inline">The username has already been taken.</span>
</div>
<div class="right"></div>
However, I would like to inject the span with the message inside the div with the class="right", so it would end up like this:
</div>
<div class="right">
<span class="text-error validation-error-inline">The username has already been taken.</span>
</div>
How to do that? btw. one thing is important that class="right" could be within class="middle" to, so I somehow need to go one lebvel back in hierarchy and only then find the first right class.
$("#"+index).closest(".middle").next(".right")
.append('<span class="text-error validation-error-inline">' + value[0] + '</span>');
Why don't you try this if you want to add span to the .right div
$("#" + index).closest(".middle").next(".right").empty()
.append('<span class="text-error validation-error-inline">' + value[0] + '</span>');

Categories