jQuery UI date picker using input type="text"

Question

I am having trouble making my date picker work using the input type="text". Any help would be great.

$(document).ready(function() {
  $("#checkin").datepicker();
  $("#checkout").datepicker();
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<label for="checkin">Checkin</label>
<input type="text" name="checkin" id="checkin" placeholder=" Check in"/>

<label for="checkout">Checkout</label>
<input type="text" name="checkout" id="checkout" placeholder=" Check out"/>

@PhaniKumarM the date picker isnt showing up when I click on field. Instead you are just able to type anything — Smith
– Smith, Commented Oct 15, 2017 at 12:00

Shiladitya · Accepted Answer · 2017-10-15 12:39:53Z

1

You can find the working sample below using your code. I have included jQuery, jQuery UI JS and CSS files.

$(function () {
  $("#checkin").datepicker();
  $("#checkout").datepicker();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<label for="checkin">Checkin</label>
<input type="text" name="checkin" id="checkin" placeholder=" Check in" />

<label for="checkout">Checkout</label>
<input type="text" name="checkout" id="checkout" placeholder=" Check out" />

edited Oct 15, 2017 at 12:39

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

answered Oct 15, 2017 at 12:03

Phani Kumar M

4,5781 gold badge16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Smith Over a year ago

Thank you so much, this worked a charm. Was just using the wrong jQuery library.

user3880179 Over a year ago

@CiaraSmith please accept the answer if it solved your problem. :)

Collectives™ on Stack Overflow

jQuery UI date picker using input type="text"

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related