asked on

jquery mobile datepicker change default date

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

Erdinç Güngör Çorbacı

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;

error77

ASKER

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

Erdinç Güngör Çorbacı

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

error77

ASKER

The calendar I'm using is this one:

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

as it's for mobile.

error77

ASKER

ui-datepicker.zip

error77

ASKER

I have attached the files so you can see the issue for yourself.

Hope this helps..

THanks

Erdinç Güngör Çorbacı

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

error77

ASKER

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?

ASKER CERTIFIED SOLUTION

Erdinç Güngör Çorbacı

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial