Question 

<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="css/mobipick.css" />






<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

<script type="text/javascript" src="js/external/xdate.js"></script>
<script type="text/javascript" src="js/external/xdate.i18n.js"></script>
<script type="text/javascript" src="js/mobipick.js"></script>



 <script>
$(document).on("pagecreate", pageselector, function() {
    var picker = $("input[type='text']", this);
    picker.mobipick();

    picker.on("change", function() {
        // formatted date, like yyyy-mm-dd              
        var date = $(this).val();

        // JavaScript Date object
        var dateObject = $(this).mobipick("option", "date");
    });
});
</script>



</head>
<body>

 <input type="text" placeholder="Last Service Date">

 <input type="submit" value="Book">   
 <input type="reset" value="Reset">
</body>

I am using Mobipick for date, i have these included files in js and css folder of my project but the calender is not showing up when a touch the date input area on mobile.

I want to add date to my form, I have implementeed it in a project in webstorm through jquery-ui which works fine on the browser but not on mobile

Était-ce utile?

La solution

According to your fiddle source change the code like following. Include the jquery and jquery mobile libraries in your script

<link rel="stylesheet" href="http://mobipick.sustainablepace.net/css/mobipick.css" />


<script src="http://mobipick.sustainablepace.net/external/xdate.js"></script>
<script src="http://mobipick.sustainablepace.net/external/xdate.i18n.js"></script>
<script src="http://mobipick.sustainablepace.net/js/mobipick.js"></script>

<div data-role="page" id="index">
    <div data-role="main" class="ui-content">
        <form action="#" method="POST" id="myForm">
            <label for="CustomerName" class="ui-hidden-accessible">Name:</label>
            <input type="text" name="CustomerName" id="CustomerName" value="" placeholder="Name"/>
            <label for="PhoneNumber" class="ui-hidden-accessible">Phone Number</label>
            <input type="text" name="PhoneNumber" id="PhoneNumber" placeholder="Phone Number"/>
            <label for="Address" class="ui-hidden-accessible">Address</label>
            <input type="text" name="Address" id="Address" placeholder="Address">
            <div data-role="fieldcontain">
                <fieldset data-role="controlgroup">
                    <input type="radio" name="TDI" id="TDI3" value="TDI30" />
                    <label for="TDI3">TDI 3.0</label>
                    <input type="radio" name="TDI" id="TDI4" value="TDI42" />
                    <label for="TDI4">TDI 4.2</label>
                </fieldset>
            </div>
            <label for="RegistrationNumber" class="ui-hidden-accessible">Registration Number</label>
                <input type="text" name="Registration Number" id="RegistrationNumber" placeholder="Registration Number"/>
                <input type="text" placeholder="Last Service Date" id="sdate"/>
                <input type="submit" value="Book"/>
                <input type="reset" value="Reset"/>

        </form>
    </div>
</div>

and your javascript code is like

$(document).on("pagecreate",function(event){
        $('#sdate').mobipick({
        dateFormat: "MM-dd-yyyy"
    });
});

Refer this FIDDLE

this also FIDDLE DEMO

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top