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>
Related
I am using a custom calendar datepicker from the following link
http://sajanmaharjan.com.np/nepali-datepicker/
This datepicker seems to be working fine but I am failing to display the date-picker by default when a page loads.
we can display the calendar of jquery with $('#id').datepicker('show'), however above datepicker
doesn't have any such functionality. it can only be accessed only when a user clicks on textbox.
I tried initializing datepicker with an Id of an element
<div id="nepaliDate"></div>
$(function(){
$('#nepaliDate').nepaliDatePicker();
});
Above code doesn't display calendar on page load.
The only code that works is with input type="text" and when we click on the textbox
<input type="text" id="nepaliDate"/>
$(function(){
$('#nepaliDate').nepaliDatePicker();
});
Could any please help me in knowing how can I display the calendar on document.ready or window.load?
Thanks
I have initialized datepicker on input type element.
On clicking any dates, it automatically redirects to base-url of the project.
localhost/my-project/#
I have used the plug-in other pages too but it worked fine.
Here's the input element. This element gets hidden initially, and later displayed via javascript.
<input class="editInput date form-control input-sm" type="text" name="date" value="<?php echo $menu['date']; ?>" style="display: none;">
jquery DatePicker initialization:
<script type="text/javascript">
$('input[name="date"]').datepicker({
dateFormat: 'yy-mm-dd'
});
</script>
Could it because the element is hidden initially in DOM?
How do I fix it?
Find The class 'ui-datepicker-next ui-corner-all' in jquery-Ui
then you can see the anchor tag now you just need to add href='#'
I'm using bootstrap-datepicker-rails there's one problem I can't solve.
I have following structure:
<div class="row">
<input type="text" class="form-control datepicker-element" data-provide='datepicker' value="<%= Time.now.strftime('%d-%m-%Y') %>" >
</div>
<div class="row">
<label><input type="checkbox" class="date-checkbox" value="">Set different date</label>
What I need to accomplish is to make it possible to open datepicker and set new date (as you see, its default value is current date).
I tried following:
$('.date-checkbox').click(function() {
$('.datepicker-element').datepicker();
});
but it doesn't work as well as onChange event and calling .datepicker() on checkbox.
Thanks in advance!
The problem was solved by using gem's standard methods described in its documentation you can find by the link.
So my solution looks like this:
$('.date-checkbox').click(function() {
$('.datepicker-element').datepicker('show');
});
I'm working on this input right now using bootstrap 3.0 and bootstrap-datepicker from eternicode.
The problem is that I'm having by default the input to be disabled, because I do not want the user to be modifying the date by his hand.
I'm assigning an input addon with a glyphicon of a calendar to show the datepicker. The problem though is that whenever I select a date, the input doesn't receive the date. I've been going through the docs and there's a way to do it, but it is with Bootstrap 2.3.2 only.
Here is my code, does anybody know how can I transfer the selected date from the datepicker into my disabled input?
Help will be much appreciated!
html
<div class="form-group">
<label class="control-label" for="fechaTandas">Fecha</label>
<div class="input-group">
<span class="input-group-addon date" id="trigger-datepicker"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" name="fechaTandas" disabled="disabled" id="fechaTandas" placeholder="seleccione una fecha">
</div>
js
//JS to trigger the datepicker
$('#trigger-datepicker').datepicker({
format: "yyyy/mm/dd",
language: "es"
});
This is the link to eternicodes datepicker plugin:
http://eternicode.github.io/bootstrap-datepicker
I think you need to handle the DatePicker's change event..
$('#trigger-datepicker').datepicker()
.on("changeDate", function(e){
$('#fechaTandas').prop('disabled',false);
$('#fechaTandas').val(e.format('yyyy/mm/dd'));
$('#fechaTandas').prop('disabled',true);
});
Demo: http://bootply.com/88516
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.