All geek questions in one place

JQuery mobile datepicker not working o clicking text field

Hi, I am new to jQuerymobile. I am trying to implement a date picker that should appear as a popup overlaying a text box. But onSelect does not work, and the click action does not occur. Code

<head>
<meta charset="utf-8">

<!-- Need to get a proper redirect hooked up. Blech. -->



<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RideMix</title>
<link rel="stylesheet"  href="jquery.mobile-1.3.2.min.css">
<link rel="shortcut icon" href="demos/_assets/favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">


<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothnes/jquery-ui.css" />   
<script src="jquery.js"></script>

<link rel="stylesheet" href="style.css">

<script>
    $( document ).on( "pageshow", function(){
        $( "p.message" ).hide().delay( 1500 ).show( "fast" );
    });
</script>
 <script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#datepicker1" ).datepicker();

}); 
</script>


<div class="productimage">  

                <input data-theme="c" type="search" name="search" id="search-basic" value="" placeholder="Leaving from"/>
                <input data-theme="c" type="search" name="search" id="search-basic" value="" placeholder="Going to"/>
                <p>&nbsp</p>
                <div class="ui-bar ui-bar-b datetime">
                <h3 class="">Date and time </h3>
                </div>
                <div style="width:90%;">
                <br />
                <label>From Date</label>
                <input type="date" name="date" id="datepicker" value=""  />
                <label>To Date</label>
                <input type="date" name="date" id="datepicker" value=""  />

                </div>  
                    <p>&nbsp</p>
                <a href="#" data-transition="fade" data-role="button" data-theme="b"  style="width:70%;margin:auto">Next Step</a>
        </div>

Thanks in advance.

+4
source share
1 answer

Try:

  • change input type="text"
  • specify date format when initializing datepicker
  • assign unique to idyour fieldsinput

Here is an example:

$(function() {
  $("#datepicker-from").datepicker({
    dateFormat: 'yy-MM-dd'
  });
  $("#datepicker-to").datepicker({
    dateFormat: 'yy-MM-dd'
  });
});
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.css">
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<div class="productimage">
  <div class="ui-bar ui-bar-b datetime">
    <h3 class="">Date and time </h3>
  </div>
  <div style="width:90%;">
    <br />
    <label>From Date</label>
    <input type="text" name="date-from" id="datepicker-from" value="" />
    <label>To Date</label>
    <input type="text" name="date-to" id="datepicker-to" value="" />
  </div>
</div>
Run code
+1
source

Source: https://habr.com/ru/post/1620593/

More articles:


All Articles