I am using jquery date picker with cakephp 2.3. Datepicker popup is OK.
When I want to edit a any record, it does not display date field value in form. I checked many ways and I am sure that it is date picker issue.
Populated source code of date field
<input id="CallDateTo" class="hasDatepicker" type="text" value="2013-04-15" name="data[Call][date_to]">
Here we see that value exist in HTML but it does not display in form.
Any one can help me?
Yes, I found the solution. I have to write as bellow
$( "#CallDateFrom, #CallDateTo" ).datepicker({ dateFormat: "yy-mm-dd"});
Before that I wrote as bellow and caused the problems.
$( "#CallDateFrom, #CallDateTo" ).datepicker({ changeMonth: true, changeYear: true});
$( "#CallDateFrom, #CallDateTo" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
Set the date using correct format
$('#CallDateTo').datepicker({
dateFormat: "yy-mm-dd"
});
Demo: Plunker
I am using jquery ui tabs and it works perfectly.Heres the code for jquery-ui tabs
$(function() {
$( "#tabs" ).tabs();
});
Suddenly i came across a scenario where i had to find the index of current active tab.So i went through the Api Documentation and find out the below code.
Get or set the active option, after initialization:
// getter
var active = $( ".selector" ).tabs( "option", "active" );
// setter
$( ".selector" ).tabs( "option", "active", 1 );
What is ".selector " here and how can i get the current index of the active tab active tab ?
.selector is the element upon which you invoked tabs(), so if your first code snippet is from your code, you need to replace .selector with #tabs.
For example:
var active = $("#tabs").tabs( "option", "active");
Here's some of the documentation on the Jquery UI Tabs - I haven't worked with them much...
jQuery UI Documentation (Tabs)
It would possibly be something like
.tabs( "select" , index )
or
$('#nameOftabs').tabs({ selected: index });
Where index would be the default tab that you would like selected.
More answers
answer 1
answer 2
Hope this helps
My question is similar to Remove Leading "0" in day of month SimpleDateFormat
Is it possible to remove the leading "0" in jquery UI datepicker?
The DateFormat option is as close as I could get from the documentation:
$( ".selector" ).datepicker({ dateFormat: "yy-mm-dd" });
But what I need is on a date like Dec 5th, 2012, datepicker shows it as 12/05/2012 whereas I would like to have 12/5/2012. Same goes for April 5th: 4/5/2013 for example.
Can this be done without an extensive logic?
Try
$( ".selector" ).datepicker({ dateFormat: "yy-m-d" });
Source:Jquery DateFormats
When I load my page the datepicker on my div always show in english, I have to click it to show in other language, as you can see in this fiddle: http://jsfiddle.net/bFHxf/
If you change from div to input there is no problem with it since you have to click it to show... is this some kind of feature or bug?
Any workaround?
I wrapped your code in the $(document).ready() function and that seems to take care of the problem.
http://jsfiddle.net/qtNyr/
Hope that helps!
I think that you are initializing the datepicker too early.
If you wait until the document is loaded, it should work. You can do this by surrounding the existing JavaScript code with
$(function() { existing code goes here });
So the result might look like:
$(function(){
$.datepicker.setDefaults( $.datepicker.regional[ "nl" ] );
$('#date').datepicker({
numberOfMonths: 2,
showButtonPanel: true,
dateFormat : 'dd/mm/yy'
});
})
Link to jsFiddle
I have a very simple html page with the following javascript in it
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
$( "#datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
});
Then I have the input target element
<input id="datepicker" type="text" class="boxtpl" name="${field.name}" value="${release?.startDate}">
and I see the html of the input from viewing source is valid...
<input id="datepicker" type="text" class="boxtpl" name="release.startDate" value="2012-02-07">
so when I do the GET request to get this page, my date ONLY renders if I delete that last line in the javascript that sets the format WHICH is very important as that is the format I have playframework configured for!!!!! If I don't set the format, the POST then breaks because formats don't match :(
Why is setting the format of datepicker clearing out my date????
I can try scripting more to set it manually though I tried calling the api to set it and that DID NOT work so it might not work doing raw javascript set either...not sure yet. anyone know why this occurs or better yet how to fix it???
thanks,
Dean
Not sure if it's a bug in jquery ui, but it seems that setting the format effectively deletes the default value. You can fix this with a chained
.datepicker("setDate", datepicker_default_val );
However, what I did in my web app was define a CSS class ".datepicker" then writing this code snippet provide date pickers to any with that class.
$( ".datepicker" ).each( function(index){
var datepicker_default_val = $(this).val();
$( this ).datepicker({numberOfMonths: 3, showButtonPanel: true});
$( this ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
$( this ).datepicker("setDate", datepicker_default_val );
});
What this does is grabs every element with the tagged class, saves the default value to local var datepicker_default_val, sets the formatting, and then restores the value.
Little bit of a hack but put that in a $(document).ready(function(){ }); block and you should be good.
If the input field does not match the default dateFormat, it will simply delete it.
The option setting in the second line is too late then, after the first line it is already deleted.
Solution: Set the dateFormat in the first call:
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd"
});
What do you mean by:
the POST then breaks because formats don't match
Also, I don't quite understand what you mean by your GET and POST requests? Do you mean the form methods? In such case you should amend your HTML code with the surrounding form tags and add a submit button so we can understand exactly what you want and try to reproduce the problem.
Anyway, see if this is what you want : http://jsfiddle.net/DAMEj/
Actually I just included the Jquery UI library in addition to their CSS for a full test of your code.
Besides, I don't get the purpose of these attributes name="${field.name}" value="${release?.startDate}", could you clarify?
And finally, what is it exactly that doesn't work for you?
EDIT:
So according to my last comment about the default date display, please check this out http://jsfiddle.net/sidou/ZUrPj/ and see if it fits your needs.
Happy JS fiddling ;)
If the input value is not parseable by jQuery, it will indeed delete the value from the input field (and even from the altField, if you set one).
For example, this might happen when using different locales. If you set the datepicker dateFormat to 'dd MM yy' and use French localisation, it will parse "10 Mars 2012", however a value of "10 March 2012" will get deleted.
In my case, i found than the JQuery was inyected by a "formoid" solution, soo, i just replace the function where the data was reinjected, adding the line
"value": date.attr("value")
I mixed with the Shaun answer too:
jQuery(".formoid-flat-blue").find('input[type=date]').each(function(){
var date = $(this);
var datepicker_default_val = $(this).val();
var text = $('<input type="text">');
text.get(0).className = date.get(0).className;
text.attr({
"name": date.attr("name"),
"placeholder": date.attr("placeholder"),
"required": date.attr("required"),
"value": date.attr("value")
});
date.replaceWith(text);
text.datepicker({
format: _dateFormat || date.attr("data-format") || 'yyyy-mm-dd'
});
if (datepicker_default_val) {
text.datepicker({
setDate: datepicker_default_val
});
}
});