Changing jQuery Mobile date picker options

问题

I am using the jQuery Mobile date picker control but I cannot change any of the properties. For example, the following code will attempt to set the first day of the week to Wednesday, in the document ready function but it doesn't work.

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Test</title> 
        <link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
        <link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" /> 
        <script type="text/javascript" src="jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="jquery.mobile-1.0a4.1.min.js"></script>
        <script src="jquery.ui.datepicker.js"></script>
        <script src="jquery.ui.datepicker.mobile.js"></script>

        <script> 
        $(document).ready(function()
        {
            $("#date").datepicker({ firstDay: 3 });
        });
        </script>       
    </head> 
    <body>
    <div data-role="page" data-theme="b" id="home">
        <div data-role="header">
            <h1>Test</h1>
        </div>
        <div data-role="content" data-theme="b">
            <div data-role="fieldcontain">
                <input type="date" name="date" id="date" value="" />
            </div>
        </div>
    </div>
    </body>
</html>

Any ideas what I'm doing wrong? Is this failing to work because the date picker is already displayed?

回答1:

I have managed to change to change the properties by changing the "jquery.ui.datepicker.mobile.js" file

To change the date format to : "dd/mm/yy" Code shown below

//bind to pagecreate to automatically enhance date inputs   
$( ".ui-page" ).live( "pagecreate", function(){     
    $( "input[type='date'], input[data-type='date']" ).each(function(){
        $(this).after($("<div />").datepicker({ altField: "#" + $(this).attr("id"), showOtherMonths: true, dateFormat: "dd/mm/yy" }));
    }); 
});

回答2:

What happens if you try a different setter?

$('.selector').datepicker('option', 'firstDay', 1);

回答3:

Your missing the bind()

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

Docs (At the bottom of the page): http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/

Also I like the DateBox a littler better IMO: http://dev.jtsage.com/jQM-DateBox/

回答4:

I had a similar problem and had to change two lines in jquery.ui.datepicker.mobile.js

First, I needed to store the return value of the call to prevDp (line 18).

var value = prevDp.call( this, options );

Then I had to return this value instead of this (line 46)

return value;

Now you should be able to call the datepicker with options like Matt Ball suggested.

来源：https://stackoverflow.com/questions/5898535/changing-jquery-mobile-date-picker-options

标签

datepicker

jquery-mobile