[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

jquery mobile datepicker change default date

Posted on 2011-05-07
9
Medium Priority
?
3,738 Views
Last Modified: 2012-05-11
Hi all,

I am tryin to change / set the default date.

The code below displays the date on the input box but the actual calender date is not set at all, it just goes straight to today's date.

Can anyone help please?


<script type="text/javascript">


    $(document).ready(function() { 

 var queryDate = new Date(2009,11,01);
$('#date').datepicker({defaultDate: queryDate});
$('#date').val(queryDate);



$("input[type='submit']").click(function(e) {
            e.preventDefault();
            $.post("s.php", $("form").serializeArray(), function(message) {
                window.location="v.php" 
            });
        });
    });

</script>

//The form part where is displays the datepicker:

<form action="#" method="POST">
<div data-role="fieldcontain">
<label for="date">Date:</label>
<input type="date" name="date" id="date" value=""  />
<input type="submit" value="submit" />
 </div>     
</form>

Open in new window

0
Comment
Question by:error77
  • 5
  • 4
9 Comments
 
LVL 9

Expert Comment

by:Erdinç Güngör Çorbacı
ID: 35712216

instead of using
$('#date').datepicker({defaultDate: queryDate});

try directly getting date value from input field

$('#date').datepicker({defaultDate: $("#date").attr('value')});

//maybe you can use rel property instead of value so i got date with attr

and you may also define dateformat: like  'yy-mm-dd' with
[dateformat: 'yy-mm-dd'}

BTW your date calculation may not be compatible with plugins timestamp ...
if plugin is using unix timestamp simply multiply your calculated date with 1000
var queryDate = new Date(2009,11,01)x1000;


0
 

Author Comment

by:error77
ID: 35712730
Hi erdincqc,

I've ended u with this but nothing happens.

Can you see what I'm doing wrong?

Code below:

THanks
 
<script>
  //reset type=date inputs to text
  $( document ).bind( "mobileinit", function(){
    $.mobile.page.prototype.options.degradeInputs.date = true;
  });	
</script>



<script language="javascript">
	$(document).ready(function() {
	

var queryDate = new Date(2009,11,01)x1000;
$('#date').datepicker({defaultDate: $("#date").attr('value')});
//var queryDate = new Date(2009,11,01);
//$('#date').datepicker({defaultDate: queryDate});
$('#date').val(queryDate);

//$(this).datepicker('option', 'defaultDate', '2009,11,01');
	
		$("input[type='submit']").click(function(e) {
			e.preventDefault();
			$.post("s.php", $("form").serializeArray(), function(message) {
				//alert(message);
				window.location="v.php" 
			});
		});
	});
	
</script>

Open in new window

0
 
LVL 9

Expert Comment

by:Erdinç Güngör Çorbacı
ID: 35713894
JS multiplier sign is not x dude, u should use *
And
This usage sample will be more helpful u hope ;
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePicker.html



BUT i'd prefer date jquery plugin from jqueryui it's muchmore easy and good lokin
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:error77
ID: 35714595
The calendar I'm using is this one:

http://jquerymobile.com/test/experiments/ui-datepicker/

as it's for mobile.
0
 

Author Comment

by:error77
ID: 35714599
0
 

Author Comment

by:error77
ID: 35714600
I have attached the files so you can see the issue for yourself.

Hope this helps..

THanks
0
 
LVL 9

Expert Comment

by:Erdinç Güngör Çorbacı
ID: 35716812
hmmm i see, jquery mobile datepicker under development as it seem and setting date that way is not a piece of cake. You are not alone , other people with this problem are discussing this on their forum.

Here is a topic that may show you getting around this trouble ;
http://forum.jquery.com/topic/mobile-datepicker-setdate

And  as i have tested defining dates directly  from html code is working isn't that enough for your needs?
Also i could change that value with this

$("#date").val("2001-02-02" );

Here is the whole code i'd  tested ;

 
<html> 
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <link rel="stylesheet" type="text/css" href="http://jquerymobile.com/test/experiments/ui-datepicker/jquery.ui.datepicker.mobile.css" media="screen"/>
            <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" media="screen"/>
            <link rel="stylesheet" type="text/css" href="http://jquerymobile.com/demos/1.0a4.1/docs/_assets/css/jqm-docs.css" media="screen"/>
            
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>  
      <script> 
        //reset type=date inputs to text
        $( document ).bind( "mobileinit", function(){
            $.mobile.page.prototype.options.degradeInputs.date = true;
            $("#date").datepicker( "setDate","2001-03-03" );
        });    
    </script>
            <script type="text/javascript" src="http://jquerymobile.com/test/experiments/ui-datepicker/jQuery.ui.datepicker.js"></script>  
            <script type="text/javascript" src="http://jquerymobile.com/test/experiments/ui-datepicker/jquery.ui.datepicker.mobile.js"></script>  
    </head>
  <body>
<form action="#" method="get"> 
            <div data-role="fieldcontain"> 
                 <label for="date">Date Input:</label> 
                 <input type="date" name="date" id="date" value="2011-01-01"  /> 
            </div>        
        </form> 
</body>
</html>

Open in new window


if you don't had to use you'd rather use standart datepicker if it works on mobile.

Best Regards
0
 

Author Comment

by:error77
ID: 35716860
The date it's showing is: 2011-01-01

and you are setting it to 2001-03-03

$("#date").datepicker( "setDate","2001-03-03" )

Did it work on your side?
0
 
LVL 9

Accepted Solution

by:
Erdinç Güngör Çorbacı earned 2000 total points
ID: 35716980
no the sample i've sent is not changing date as it is.

But when i add code below to the end of <script>  block as i've told it works.

 
$(document).ready(function() {
            $("#date").val( "2001-03-03" );  
        });

Open in new window


0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question