asked on

HTML date format to popup calendar as soon as you click

Is it possibly to Just click on mm/dd/yy (like I did in the first image), and have the calendar to popup?
Because now I need to click on the arrow( as i did in the second part of the image) for the cal dander to popup, is there a way to do this? Im using html date
Heres the code:

                <div class="form-group">
                    <div class="col-sm-12">
                        <input type="date" id="birthDate" class="form-control">
                    </div>
                </div>

Open in new window

I also used this before to remove the up and down arrows,

input[type=date]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
}

Open in new window

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

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

Start Free Trial

Jazzy 1012

ASKER

Whenever I try to use bootstrap datepicker, nothing popsup it isnt working with my template, this date is the only one working, I just need it to run through chrome?

Julian Hansen

You can't modify the chrome one - that functionality is built into the browser.

Moussa Mokhtari

Whenever I try to use bootstrap datepicker, nothing popsup it isnt working with my template

Are u sure that you have Bootstrap 2.0.4+,jQuery 1.7.1+ in your html header ?
If so can you provide your code

Jazzy 1012

ASKER

I have these in my html header

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Open in new window

Also I wanted to replace the html with this

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>
</html>

Open in new window

It worked on a separate page but not the page with my template, could my template have anything to do with it?

Julian Hansen

You would need to show us the page with the script included.

Did you check the console for errors?

Jazzy 1012

ASKER

yes it tells me too many javascript links I removed one and it worked.