Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="//code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//fb.me/react-with-addons-0.9.0.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script>
<meta charset=utf-8 />
    <title>Simple DatePicker example</title>
<!--
    <link rel="stylesheet" type="text/css"
          href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css"></link>
    <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
    <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js'></script>
-->
​
    <link rel="stylesheet" type="text/css"
          href="http://jquery-ui.googlecode.com/svn/tags/1.8.23/themes/base/jquery-ui.css"></link>
    <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1..2/jquery.min.js'></script>
    <script type="text/javascript" src='http://jquery-ui.googlecode.com/svn/tags/1.8rc3/ui/jquery-ui.js'></script>
​
<!--
    <link rel="stylesheet" type="text/css"
          href="jQueryUI/v1.8rc3/development-bundle/themes/smoothness/jquery-ui-1.8rc3.custom.css"></link>
    <script type="text/javascript" src='jQueryUI/v1.8rc3/development-bundle/jquery-1.4.2.js'></script>
    <script type="text/javascript" src='jQueryUI/v1.8rc3/development-bundle/ui/jquery-ui-1.8rc3.custom.js'></script>
-->
​
    <style type="text/css">
      * {
         font-size: 10pt;
         font-family: Arial, Verdana;
      }
​
      h1 { font-size: 20pt }
​
      div.inputDiv  {
         margin: 10px;
         padding: 4px;
      }
​
      .ui-widget {
         /* Make this larger (say, 1.4) to make the calendar "roomier". */
         font-size: 1.2em;
      }
​
      .ui-datepicker {
         /* make this larger, say 18em, to make the calendar wider */
         width: 14em;
      }
​
    </style>
​
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
  <body>
    <h1>jQuery UI datepicker example</h1>
    <div class="inputDiv">
    <p>Click in the box to select a date:</p>
    <input id='b1' class='pick-date' value=''/>
    </div>
  </body>
</html>
 
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers