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

Was it helpful?

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top