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.
Related
I'm using "datepicker" script and I've created a link that generates a series of dates on click.
Javascript
function change(){
document.getElementById('datepicker').value='06/10/2022,20/10/2022,17/11/2022';
}
HTML
<input type="text" id="datepicker" name="test" class="datepicker" placeholder="select dates"><br>
link
On click on the link, these dates appear in the input field, but in the calendar these dates are not enabled...
They become enabled if I put the cursor in my input field and I have an action like "Ctrl+A" for example.
Does anyone have any idea ? thank you so much ! :-)
If you want the dates replace text "link" on click you should set id="datepicker" on your anchor tag.
Finally i found the solution :
Javascript
function change(){
$('#datepicker').val('06/10/2022,20/10/2022,17/11/2022').datepicker('update');
}
Using MaterializeCSS 1 rc2, I try to update the date of my DatePicker from Javascript.
My HTML
<form action="#" novalidate>
<input type="text" class="datepicker" name="date" id="datepicker">
</form>
My JS
function changeDate(date) {
/* date is a javascript Date object */
var datepicker = document.getElementById('datepicker');
var instance = M.Datepicker.getInstance(datepicker);
instance.setDate(date);
}
Looking at the console, all the variables are set to their expected value. When I click on the DatePicker, that's also the expected date which is displayed (the one I use in changeDate). But the text in the input field does not change...
My friend, you have found a bug in MaterializeCSS!
I can suggest you my workaround: call instance._finishSelection() after calling instance.setDate() to see your changes.
https://github.com/Dogfalo/materialize/issues/6074
Currently ("materialize-css": "^1.0.0") you can achieve that with: instance.setInputValue:
Typescript code:
const datepickerInstance = M.Datepicker.getInstance(datepickerEl[0]);
datepickerInstance.setDate(date);
datepickerInstance.setInputValue();
I am using date picker of bootstrap x-editable. Its working fine but I want to customized some of it's functionality. Suppose when we select any date and click on Tick mark then we can show the combined date inside a tag. So I want to get the same functionality onblur also (outside of the container but date should be change).
I think you can use this code into your input text as like that
<input size="16" type="text" value="2012-06-15 14:45" readonly class="form_datetime">
<script type="text/javascript">
$(".form_datetime").datetimepicker({format: 'yyyy-mm-dd hh:ii'});
</script>
I have a table with a datepicker on each row:
<div id="[strand]" class="input-append dp date" data-origdate="[new_strand_appointmentdate]" data-date="[new_strand_appointmentdate]" data-stand="[strand]" >
<input type="text" class="datemask" value="[new_strand_appointmentdate]" id="new_strand_appointmentdate[strand]" title="The appointment date" placeholder="__/__/____" name="strand_appointmentbydate">
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
in my JS I capture the changeDate event:
$('.date').datepicker().on('changeDate', function(ev){
I can see the dates in the console. What I can't get to are the data attributes I have set - the only one is the first record in the table even if that is not changed. [strand] is replaced with a unique number for each row, which I don't know in advance. How can I adjust my JS to pick up the data attributes so that I can work with them? I have tried:
var origdata = $('.date').data()
without getting anything useful.
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();