In my web site, I have two date inputs,
<label>From : </label><input class="datepicker" id="from" name="from" value="<?php echo $from;?>" size=11 type="text">
<label>To : </label><input class="datepicker" id="to" name="to" value="<?php echo $to ;?>" size=11 type="text">
And in the javascript part, I have the following code
$(function() {
$( ".datepicker" ).datepicker({ altFormat: 'yy-mm-dd' });
//getter
var altFormat = $( ".datepicker" ).datepicker( "option", "altFormat" );
//setter
$( ".datepicker" ).datepicker( "option", "altFormat", 'yy-mm-dd' );
});
But when I select the date, it still returns a date with 04/04/2012 format instead of yy-mm-dd.
How should I solve this problem ?
Thanks
Lol, here we go again. first of all:
altFormat: The dateFormat to be used for the altField option. This allows one date format to be shown to the user for selection purposes, while a different format is actually sent behind the scenes. For a full list of the possible formats see the formatDate function
dateFormat: The format for parsed and displayed dates. This attribute is one of the regionalisation attributes. For a full list of the possible formats see theformatDatefunction.
See Working jsFiddle Here
You might also want to see an answer i gave a few minutes ago here, with more fiddles.
Related
I'm using jQuery ui v1.10.3 and attempting to force the datepicker to return dates in the format dd/mm/ccyy
With the code, below, I'm able to get the datepicker to do just that. However, the datepicker icon goes away. When I comment my code out, the datepicker icon is there alongside the input field as expected.
What am I missing?
html:
<input class="datepicker" type="text" id="_todate" name="_todate" tabindex="1" runat="server" value="{//balance_info/driver/parms/parm[#name='datehi']/#value}" />
Script:
jQuery('.datepicker').datepicker({dateFormat: 'dd/mm/yy'});
It's noted in the documentation.
jQuery('.datepicker').datepicker({
dateFormat: 'dd/mm/yy',
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
});
Is there any way to allow the user to select the year on the datepicker? In its default state, one has to leaf through the months to get to a different year.
<script>
$(function() {
$( "#datepicker" ).datepicker({
changeYear: true
});
});
</script>
See this example
We have a date field that we're accepting a month and year for. However, whenever the user selects the field the jQuery UI Datepicker defaults to the current month and year, and clears out whatever they've entered.
I've switched the formatting in a test case to mm/dd/yy and the Datepicker behaves correctly, so I'm fairly confident the basic code is correct.
Any suggestions on how this can be worked around?
Example code below:
<html>
<head></head>
<body>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.min.js"></script>
<input type="text" id="asdf" value="07/2006" />
<script type="text/javascript">
$('#asdf').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'mm/yy',
showButtonPanel: true
});
</script>
</body>
</html>
EDIT: To be a bit clearer, compare the Datepicker's date in the following case, where we supply a day in the input's value, and change the dateFormat option:
<html>
<head></head>
<body>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.min.js"></script>
<input type="text" id="asdf" value="07/01/2006" />
<script type="text/javascript">
$('#asdf').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'mm/dd/yy',
showButtonPanel: true
});
</script>
</body>
</html>
I thought I understood your question right the first time but the other guy got me confused. The problem seems to be that datepicker doesn't see the format mm/yy as a real datetime format, so it's confused when trying to look up the current date, meaning you have to do something kind of funky as a workaround. I'm not saying this is the best way, but it's what I've worked out.
Do note that this uses Date.js
$('#asdf').datepicker({ changeMonth: true, changeYear: true, dateFormat: 'mm/yy',beforeShow: function(input, inst)
{ //getter
var defaultDate = $( "#asdf" ).datepicker( "option", "defaultDate" );
//setter
$( "#asdf" ).datepicker( "option", "defaultDate", Date.parseExact($("#asdf").val(), "M/yyyy"));
} });
It looks like it doesn't treat a month or year change as a 'select' operation, but does change the month/year when you click on a day. In other words, if you change the month and year but don't click on a day, it thinks you cancelled the operation.
You could try writing some code for the onChangeMonthYear event (docs) to read the selected month/year and close the calendar dialog yourself.
I'm using the jquery ui autocomplete for my jquery-mobile site. It is working without problems, als long as I open the site directly.
If i navigate to the side with ajax navigation it doesn't work.
Edit testable example:
<div data-role="page" data-theme="b" id="main" data-add-back-btn="true class="main"">
<div data-role="content">
<input type="search" name="search" id="search" value="" />
</div>
<script>
$('#main').live('pagecreate',function(event, ui) {
var availableTags = [
"Testone",
"Testtwo",
"Testthree"
];
$( "#search" ).autocomplete({
source: availableTags,
minLength: 2,
});
});
</script>
</div>
I have a jQM site with autocomplete, and hit a similar issue: the ajax call triggered to populate the autocomplete options wasn't always done by the time the page wanted to fire the autocomplete code itself.
I put this down to the nature of the Javascript being triggered (i.e. it's asynchronous, so you take your chances…).
Now, this is a bit of a hack I know, but adding a wee time-out worked for me (you will need to experiment with the time period). In my app I have something like this after my jQM $(document).bind("mobileinit"... code:
<script type="text/javascript">
$(function(){
// Horrible, but necessary
setTimeout(doAutoComplete, 2500);
});
function doAutoComplete(){
$( "#YOUR_FIELD_ID" ).autocomplete({
// Your ac code here…
});
}
</script>
I have a set of unique requirements. I need to be able to show an entire year with hte jquery ui datepicker and then when the user picks a date, change the background color of that date and add a record to a database. This seems to work well until many dates are selected, then it seems to bog down. Is there a way for jquery ui datepicker to only render the selected cell instead of the whole calendar when a date is selected? Is there another calendar I should use for this tasik?
Have you try this:
<label>Multiple Month DatePicker: </label>
<input id="date" />
<script type="text/javascript">
$(function() {
var dt = {
numberOfMonths: 12
};
$("#date").datepicker(dt);
});
</script>