I'm adding this input field via an external .js file on clicking a button. This is added every time a button is clicked.
<input name="new" id="date" type="text" value>
I want to append the Jquery-ui datepicker to this field.
Here's the code I'm using right now but class="hasDatepicker" isn't getting associated with the new field that's added when I inspect it using the console.
$('[name="new"]').datepicker({
maxDate: '+0d',
dateFormat: 'yy/mm/dd'
});
I want to select this by name and not id as the id's will be unique for each field that's added.
The datepicker is added to other fields on my page so it should work here as well.
I also want to append class="btn btn-darkgrey" to make the input field into a button via Jquery.
Try like
$('input[name="new"]').datepicker({
maxDate: '+0d',
dateFormat: 'yy/mm/dd'
});
Working FIDDLE
As you said every time input field added when button gets clicked.
so , where you added the new input field at that place you have to initialize input with datepicker. That means on button click, you added code to insert new input field below that you have to find input by
$input = parent_element.find('input[name="new"]').last().
Here parent_element = in which you are appending/inserting your new input.
And initialize that input.
$input.datepicker({
maxDate: '+0d',
dateFormat: 'yy/mm/dd'
});
Try this. hope it will work for you.
Related
I am building an ASP.NET website, and in the aspx markup page i put in a JQuery datepicker.
I also set default values, and on the FE side it looks ok, the text box is always populated with the selected date.
However when im trying to use the text values in the text box, it acts like there's nothing there.
This is my JS function in the ASPX page
<script type="text/javascript">
$(function () {
//console.log($("[id$=txtFromDate]"));
//console.log($("[id$=txtToDate]"));
$("[id$=txtFromDate]").datepicker();
$("[id$=txtToDate]").datepicker();
//init date format
$("[id$=txtFromDate]").datepicker({ dateFormat: 'mm/dd/yy' });
$("[id$=txtToDate]").datepicker({ dateFormat: 'mm/dd/yy' });
//init default date
var FromDate = new Date();
FromDate.setMonth(FromDate.getMonth()-1)
$("[id$=txtFromDate]").datepicker('setDate',FromDate);
$("[id$=txtToDate]").datepicker('setDate','today');
});
How can i work with the datepicker from the code-behind C#?
Replace
$("[id$=txtToDate]").datepicker('setDate','today');
with
var Today = new Date();
$("[id$=txtToDate]").datepicker('setDate',Today);
and then in code behind you can use this code
Request.Form["txtToDate"]
"txtToDate" is your input box Name and don't use input box id;
I have a php page that reads data from a Mysql table and displays it in a HTML table. I then use AJAX to allow the user to update the data, one row at a time. For text fields, that works fine.
However, one of the columns is a date. I would really like the user to select the date from something like JQuery’s datepicker but I cannot figure out how to do it.
The initial data table has the following line to display the current date field:
echo "<td><div id=$eventdate_id>$row[eventdate]</div></td>";
I then modify this line using Javascript to make a field the user can edit:
document.getElementById(eventdate_id).innerHTML = "<input type=text id='" +data_eventdate + "' value='"+ eventdate + "'>";
Part of my problem is that the datepicker uses the id of the HTML element but I am already using it…
Any idea how I can add the datepicker?
Thanks
Assuming you're using https://jqueryui.com/datepicker/, after you set the innerHTML you could do it like this:
$( "#"+data_eventdate ).datepicker();
Or you could add a class to the input (<input class="date_input" type=...) and add datepickers to all of them in one go:
$( ".date_input" ).datepicker();
You can include options in the individual datepicker( {/*options here*/} ) calls, or you can set defaults for all datepickers at the start of your code with $.datepicker.setDefaults() (example from datepicker documentation):
$.datepicker.setDefaults({
showOn: "both",
buttonImageOnly: true,
buttonImage: "calendar.gif",
buttonText: "Calendar"
});
I don't see an issue with the id, but I think it would be better to use a class. Then you can convert all of the dates to input elements and instrument them with datepickers all at once.
echo "<td><div class='date'>$row[eventdate]</div></td>";
You can then use:
$('.date').html(function(i, date) {
// The "date" parameter is the current text inside the div.
// Create the input element.
var $input = $('<input type="text"/>').val(date);
// Instrument the input element with a datepicker.
$input.datepicker();
// Return the input element so it is placed in the div.
return $input;
});
jsfiddle
I am developing a asp.net MVC4 project where i use lots of JqueryUI datepicker.
For one of my date picker when i tried to click on datepicker image i am getting some error like,
Uncaught TypeError: Cannot read property 'settings' of undefined jquery-ui-1.10.3.min.js:9
Html
<div>
<input type="text" id="tsDte" style="font-size: 14px;width: 50%" >
<img src="~/Images/dayPicker.png" onclick="tsDatePickerClick()" style="vertical-align:bottom"/>
</div>
Javascript
var currentDate = new Date();
$("#tsDte").datepicker({
dateFormat: 'yy-mm-dd',
maxDate: 0,
changeYear: true
}).attr('readonly', 'readonly');
$("#tsDte").datepicker("setDate", currentDate);
function tsDatePickerClick() {
$("#tsDte").datepicker('show');
}
Here i have a Textfield and a datepicker image.When i click on datepicker image datepicker will popup .
i have followed the similar way in other datepicker and they are working fine.I have only problem with this date picker.
Any help is appreciated.
That same error will be shown if you try to open a datepicker on an input field who has the class "hasDatepicker" assigned. Simply remove this class in the html.
Before:
<input type="text" value="01/01/2014" class="hasDatepicker">
After:
<input type="text" value="01/01/2014">
I think your datepicker wasn't created correctly, so when you call show, it expects a settings object.
Probably you didn't create it inside $(document).ready, you should have:
$(document).ready(function(){ //Add this line (and it's closing line)
var currentDate = new Date();
$("#tsDte").datepicker({
dateFormat: 'yy-mm-dd',
maxDate: 0,
changeYear: true
}).attr('readonly', 'readonly');
$("#tsDte").datepicker("setDate", currentDate);
});
Hope this helps. Cheers
You are including the jquery-ui-1.10.3.min.js library.
Your issue is caused by duplicating your jQuery UI core scripts.(check if you are including any other librady such as jquery-ui-1.10.3.drag-drop.min.js .
Load just them once, and your issue will go away.
On refreshing the page, you need to remove class 'hasDatepicker' and then set the settings (again). On refresh, the class is kept and so the datepicker is not recreated.
In my case, this was caused because I had an span with id date and the input had the same id. Giving the input a different id solved the problem.
Had the same issue because I had both
#Html.TextBoxFor(m => m.StartDate, "{0:dd/MM/yyyy}", new { #class = "DatePicker" })
and
#Html.HiddenFor(m => m.StartDate)
in the same form on my view.
The accepted answer is probably the solution for most people, but This can happen when the picker is properly initialized but another element higher up in the DOM has the same id as your date input element.
You can check if that's the case by querying for this in your browser's console: $('*[id=my-id]');
The code for this datepicker is fairly old and therefore doesn't follow the best practices - it relies on the id attribute when it should really have just tracked the original DOM element reference, but it is what it is.
I need to clone a jQuery datepicker input field attached a datePicker to it using the on statement.
$('form').on('click', '.datepicker', function(){
$(this).datepicker({'changeMonth': true, 'changeYear': true, 'dateFormat': 'MM dd', 'yearRange': "<?php echo date('Y') ?>:<?php echo date('Y') + 1 ?>"}).focus();
});
Then before cloning the input filed, I am destroying the datepicker using
$(".datepicker").datepicker('destroy').removeClass('hasDatepicker');
But still the datepicker that is being attached to then newly cloned input is messing with original input field...
Can anybody please help me on this topic?
try this
var $clone=$(".datepicker").clone();
$clone.datepicker("destroy");
$clone.removeAttr("id");
$clone.datepicker();
$('form').append($clone);
when you clone a row it copies every thing,
and when the date picker is added again it calls the input by id, you must remove the id so that the next datepicker can assign a new id to the input :)
You should destroy the datepicker for the clone element like,
var $clone=$(".datepicker").clone();
$clone.datepicker('destroy').removeClass('hasDatepicker');
$('form').append($clone);
hi I am using jquery ui datepicker
in starting i set datepicker with following way
$(".td-datepicker).datepicker();
class .td-datepicker apply on four input text box and their id are following
#startdate
#enddate
#edit_startdate,
#edit_enddate
now i want to set alt field in all four input field
how can i add by class because if i add by id then repetition of code occur
like below
$('#startdate').datepicker("option","altField","#alt_startdate");
$('#startdate').datepicker("option","altFormat","mm/dd/yy");
$('#enddate').datepicker("option","altField","#alt_enddate");
$('#enddate').datepicker("option","altFormat","mm/dd/yy");
$('#edit_startdate').datepicker("option","altField","#alt_edit_startdate");
$('#edit_startdate').datepicker("option","altFormat","mm/dd/yy");
$('#edit_enddate').datepicker("option","altField","#alt_edit_enddate");
$('#edit_enddate').datepicker("option","altFormat","mm/dd/yy");
and can i add multiple option in datepicker after initialization
like for
$('#edit_enddate').datepicker("option","altField","#alt_edit_enddate");
$('#edit_enddate').datepicker("option","altFormat","mm/dd/yy");
can i write code for above two line in one line . is this any way ?
To change the altFormat on all of them, assuming they've the same format:
$(".td-datepicker").datepicker("option", "altFormat", "mm/dd/yy");
For the multiple options at once (example):
$(".td-datepicker").datepicker("option", {
disabled: true,
dateFormat: "dd/mm/yy"
});
To solve your issue, based on the ids you're using:
$(".td-datepicker").each(function (idx, el) {
$(this).datepicker("option", "altField", "#alt_" + $(this).attr("id"));
});
If you change your mind, yes, you can use classes instead.
It's all on the API documentation: http://api.jqueryui.com/datepicker/