bootstrap calender not displaying after adding the date input - javascript

i am using a bootstrap calender on todo. and when user click on the "add more button" a date input added automatic.
the issue is when i click on add new button its added a input but the calender not displaying. and on the same place when i simple hard coded the input the calender shows.
var htt=$('#dd').html();
var objTo = document.getElementById('subtodo');
var divtest = document.createElement("div");
divtest.innerHTML = htt;
objTo.appendChild(divtest)
<div id="subtodo"></div>
<div id="dd">
<input type="text" name="list[]" style="height:30px !important;">
Due date: <input class="m-wrap m-ctrl-medium date-picker" size="16" type="text" placeholder="Date" name="due[]" id="datepicker" style="height:30px !important;">
</div>

It sounds to me like you just need to run the datepicker init function again once you've appended a new one to the DOM.

if you are appending dynamic input for datepicker, you need to reinitialize the datepicker just after the JavaScript you have written to append the input box.
Example:
$('#dd').datepicker();

Related

How to create datetimepicker dynamically with same id? not working

I am having hard time to figure out how to create datetimepicker dynamically.
I am using The code below for creating datetimepicker on a cell in datatable dynamically. when I click on a cell, datetimepicker created on it dynamically. and I click other cell, datetimepicker disappears and create another on the clicked cell.
The way I am trying is that when the event occurs I use append function with id. see below sample code.
<div id='textId'></div>
//when eventA occurs,
{
$('#testId').empty();
$('#testId').append('2019-09-01');
}
//when eventB occurs,
{
$('#testId').empty();
$('#testId').append(<input type="text" class="form-control"/>'
+'<span class="input-group-addon"><span class="fa fa-calendar"></span></span>');
$('#testId').datetimepicker({format: 'YYYY-MM-DD', date : '2019-09-02'});
}
The code for eventA works fine. But the problem is eventB. when eventB occurs first time, it works fine. From the second time, datetimepicker does not work at all. It displays its form but does not have date and not work the calendar-call-buttn.
I googled the problem and found that it was about using same-id issue. So I tried to use name attribute but failed with the same result.
helps me...
please you can try to using css class for datetimepicker.
<div class="col-sm-3 form-group">
<b>Date Of Birth :*</b><br>
<p><input placeholder="dd/mm/yyyy" class="form-control calanderDate" oninput="this.className = ''" name="dateOfBirth" id="dateOfBorth" onblur="defaultValidation(this)"></p>
<span id="er_passportNumber" style="display: block; width:100%; float: left;"></span>
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
defaultDateValidation();
});
function defaultDateValidation(){
$(".calenderDate").datetimepicker({
dateFormat: "dd/mm/yy"
});
}
</script>

HTML Datepicker - Opened by default

I'm using an input of the type date. I would like to know if there is a way to make the datepicker selection panel opened by default when the user enters in the page.
The element look like this:
<input class="form-control user-success" id="starting-date" name="date" required="" type="date" value="2017-04-07" data-initialized="true">
Did you try adding autofocus
<input class="form-control user-success" id="starting-date" name="date" required="" type="date" value="2017-04-07" data-initialized="true" autofocus="autofocus">
By using following funtion date picker will open bydefault after screen load.
$(function() {
$( "#starting_date" ).datepicker();
$( "#starting_date" ).datepicker("show");
});
You can display it embedded in a webpage by calling it on div instead of input, as per official documentation.

Unable to change date in html 5 input type="datetime"

I had an html5 input type="datetime" datepicker in a text field.When I click on text field a packer picker opens and after clicking on one date,it closes and date is displayed there.Now I want to change the date and click on the same textxfield the date picker dont open.Again if I do a right click somewhere outside of text field and then click on it,the datepicker opens up...How can we get rid of and display on first click itself..Is there any attribute for doing so.
<div class="col-lg-4">
<input class="form-control" type="datetime" date-time auto-close="true" view="date"
min-view="date" maxlength="10" format="dd/MM/yyyy" ng-model="$root.date"
value = "{{dateOfBirth}}" readonly>
</div>
In inspectmode if i click on textfield it highlights
<div date-picker-wrapper>…</div>
Once date is selected it goes hidden>can someone help.
Can someone help

Javascript Date Picker Into A Textfield

I'm trying to use a date picker for a date field but my date fields ID is a dynamic id, since the fields generates in table rows, like
<input type="text" id="date<%=n%>"/>
But my date picker script requires the ID to attach the date picker into the above text field like below,
<script type="text/javascript">
new datepickr('datepick', { dateFormat: 'Y-m-d' });
</script>
Is there any other way to make this work?
Add a class to your input field
<input type="text" id="date<%=n%>" class="datepicker"/>
and get its value from javascript
var date = $('.datepicker').datepicker();
Better to use one class instead of multiple id's .you can differentiate the text filed value based on index number of class
first:<input type="text" class="date">
second:<input type="text" class="date">
third:<input type="text" class="date">
$(document).ready(function(){
$('.date').datepicker();
$('.date').on('change',function(){
var index=$('.date') .index(this);
$('.date:eq('+index+')').val();
});
});
js fiddle link: http://jsfiddle.net/sarath704/LhPP2/1/

javascript - open link when user changes date in date picker

I am using a twitter bootstrap datepicker (http://www.eyecon.ro/bootstrap-datepicker/)
What I am trying to do is use the input value (e.g. 15-02-2012 ) to load a page, when the user changes the date.
The input box uses this code...
<div class="input-append date" data-date="12-02-2012" data-date-format="dd- mm-yyyy">
<input class="span9" size="16" id="dp3" type="text" value="12-02-2012" onchange="myFunction()">
<span class="add-on"><i class="icon-th"></i></span>
And the JavaScript to reload the page is this...
<script>
function myFunction()
{
datevalue = document.getElementById("dp3").value
window.open(datevalue,"_self");
}
</script>
The problem is when the date is changed in the date picker (input id = dp3), nothing happens, the page does not reload. But when I tried attaching myFunction() to another text box, it does work, and it is able to grab the value in the datepicker (dp3).
So the problem is that JavaScript is not recognising the change in value of the datepicker (id=dp3). Does anyone know why this is the case?
I see you took the code from the example n°3 of your link, but you switched the id to the wrong tag.
Here --.
V
<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012" readonly="">
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
If you leave the id on the input tag and keep the original JS code, the .datepicker() method will be called on the wrong element (the input): it is meant to be called on the parent div.
Then, on your jQuery, you should bind the changeDate event of your date-picker, and not the onChange of the input tag itself.
You could try something like this (using jQuery) :
$('#dp3').datepicker().on('changeDate', function() {
//Retrieve the date located on the data of your datepicker
var datevalue = $('#dp3').data("date");
//You can take the value from the input as well if you want
//The input tag doesn't really need an ID to be retrieved (see comments)
//var datevalue = $('#dp3 input').val();
window.open(datevalue,"_self");
});
Edit : here is a working fiddle with minor changes.

Categories