CODEWITHSUNDEEP
javascriptjqueryhtml
Vinoth
Vinoth

Reputation: 773

how to show calendar on text box click in html

In html i want to show calendar to select date while clicking a text box. then we select a date from that calendar then the selected date will be display in that text box.

Upvotes: 15

Views: 212152

Answers (8)

ajitksharma
ajitksharma

Reputation: 2019

yeah you will come across of various issues using HTML5 datepicker, it would work with some or might not be. I faced the same issue. Please check this DatePicker Demo, I solved my problem with this plugin. Its very good and flexible datepicker plugin with complete demo. It is completely compatible with mobile browsers too and can be integrated with jquery mobile too.

Upvotes: 1

Silviu Burcea
Silviu Burcea

Reputation: 5348

Starting with HTML5, <input type="date" /> will do just fine.

Demo: http://jsfiddle.net/8N6KH/

Upvotes: 22

Victor
Victor

Reputation: 13378

What you need is a jQuery UI Datepicker

Check out the demo and the source code.

Upvotes: 1

D.clixer
D.clixer

Reputation: 91

try to use jquery-ui 

<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

<script>   
    $(function() {
         $( "#calendar" ).datepicker();   
    }); 
</script>

<p>Calendar: <input type="text" id="calendar" /></p>

more

Upvotes: 3

nikinup
nikinup

Reputation: 43

HTML Date Picker You can refer this.

Upvotes: 0

Maulik Vora
Maulik Vora

Reputation: 2584

You will need to use any javascript html calendar widget.

try this calendar view widget, just copy-paste some code shown in example there and thats it what you want.

Here is the link to Jquery Mobile date box - JQM datebox

Upvotes: 1

Starx
Starx

Reputation: 78971

jQuery Mobile has a datepicker too. Source

Just include the following files, 

  <script src="jQuery.ui.datepicker.js"></script>
  <script src="jquery.ui.datepicker.mobile.js"></script>

Upvotes: 0

painotpi
painotpi

Reputation: 6996

You should read-up on jQueryUI Datepicker

Once you include the relevant jQuery UI library, it's as simple as,

Script:

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

HTML:

<input type="text" id="datepicker" />

Pros:

  • it is thoroughly tested for x-browser compatibility, so you won't have a problem.
  • Separate css file, so you can customize it as per your liking

Upvotes: 6

Related Questions