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/
Related
I'm using Jquery datepickers to collect two dates on the same page, the calendars display correctly and I'm able to collect the input dates fine however, on the occasion a default date is supplied to JQuery, it only populates the first datepicker on the page. I'm using
$( id ).datepicker( "option", "defaultDate", defaultDate );
to attempt to set the default date where the var id is the html id of the datepickers and defaultDate var is the date to set. How do I get the default date to populate in both datepickers?
Update:
The html ids for both of these are unique. Here are some logs from the console-
//default date sets correctly
default date 06/01/2017
id#opa_global_global_BeginBus
//does not set
default date 06/30/2017
id#opa_global_global_a_TempVendor
I also noticed while debugging that the default date for the second datepicker value appears to be selected on the calendar, but not displayed in the corresponding textbox (see image below).
The HTML
<!--has default date --->
<div id="rn_CalendarInput_40" class="rn_CalendarInput">
<input type="text" class="datepicker form-control hasDatepicker" id="opa_global_global_BeginBus" name="opa_global_global_NysBeginBus" placeholder="MM/DD/YYYY" value="06/01/2017" aria-required="true"><img class="ui-datepicker-trigger" src="assets/images/calendar.gif" alt="Select date" title="Select date">
</div>
<!--does not have default date--->
<div id="rn_CalendarInput_46" class="rn_CalendarInput">
<input type="text" class="datepicker form-control hasDatepicker" id="opa_global_global_TempVendor" name="opa_global_global_TempVendor" placeholder="MM/DD/YYYY" value="06/30/2017"><img class="ui-datepicker-trigger" src="/assets/images/calendar.gif" alt="Select date" title="Select date">
</div>
IDs must be unique to each element. Anything else is invalid HTML and jQuery will ignore any element with an ID which has already been used further up the page.
Give both datepickers the same class instead and use that as your selector. e.g.
<input id="dp1" class="datepicker"/>
<input id="dp2" class="datepicker"/>
$(".datepicker").datepicker( "option", "defaultDate", defaultDate );
As everybody is saying, as long as Id's are unique, it should work. or use a class selector instead if you don't want that selector to be unique. And to show it, check the jsfiddle below using both, ids and classes and also using the options object instead of the setter syntax where you pass { defaultDate: defaultDate }, you might like that better.
jsfiddle here
Code:
$(function(){
var defaultDate = new Date('7/01/2016');
$('#first').datepicker();
$('#second').datepicker();
$('#first, #second').datepicker("option", "defaultDate", defaultDate);
$('.date').datepicker({ defaultDate: defaultDate });
});
I have four textboxes. They have the following id:-
title, sdate, edate, pdate.
I want Datetimepicker to be assigned for the texboxes which have the text 'date' in their id.
That means, I want want datetimepicker to be assigned to the three textboxes- sdate, edate, pdate.
Here is the code I am using-
$('[id*="date"]').each(function(){
$(this).datetimepicker({
formatTime:'H:i:s',
formatDate:'Y-m-d',
dayOfWeekStart : 1,
lang:'en'
//disabledDates:['1986/01/08','1986/01/09','1986/01/10'],
//startDate: '<?php echo date("Y-m-d");?>'
});
});
I am having a strange problem. All the Textboxes are getting assigned with DatetimePicker. Why is that happening?
Note:- I am using the bootstrap-datetimepicker.js
EDIT
The id of the form was 'validateForm'. That's why it was taking the datetimepicker, and I thought the 'title' textbox is taking the Datetimepicker.
As suggested by Vinod, I am using this right now- 'input[id*="date"]'
But this doesn't work sure for input elements like file or submit having id containing the string 'date'.
How can I work on that?
Ideally using class is best instead of id in this case.
<input type="text" id="title" > # don't apply to this
<input type="text" id="sdate" class="my-class">
<input type="text" id="edate" class="my-class">
<input type="text" id="pdate" class="my-class">
and jquery will be just
$('.my-class').datetimepicker({
formatTime:'H:i:s',
formatDate:'Y-m-d',
dayOfWeekStart : 1,
lang:'en'
});
Assign common class to inputs where you want datetimepicker and initialize using class, this will help you to restrict only inputs with classes
$(".date").datetimepicker();
assuming your input have common class date.
Hope this helps :)
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>
From database I get data in format like (let's suppose it's a string)
1974-07-05
How I need to pass the date in form with datepicker and make the date active there, so how can I do it?
<td>
<script src="javascript/datepicker.js"></script>
<input id="datepicker" type="text" name="dob" value="${person.bdate}">
</td>
and ${person.bdate} is a string date
This is not an answer, just an observation.
You have requested a pure javascript solution, but you are using a plugin. Why not use jQuery and jQueryUI's datepicker plugin. Look how easy the code would be:
jsFiddle Demo
HTML:
<input id="datepicker" type="text" name="dob" value="">
jQuery:
var dd = '1974-07-05';
$('#datepicker').val(dd);
$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd'
});
Sources:
http://jqueryui.com/datepicker/#date-formats
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.