Set style for date picker : UI Datepicker « jQuery « JavaScript Tutorial






<html>
  <head>
    <script type='text/javascript' src='js/jquery-1.3.2.js'></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.datepicker.js"></script>

    <script type='text/javascript'>
$(document).ready(
  function() {
    $('input#tmpDate').datepicker({
      minDate: new Date(2008, 0, 1),
      maxDate: new Date(2009, 0, 1)
    });
  }
);
    </script>
    <style type='text/css'>

#ui-datepicker-div {
    width: 300px;
    border: 1px solid rgb(128, 128, 128);
    padding: 5px;
    background: gray;
    display: none;
}
div.ui-datepicker-control {
    position: relative;
    height: 25px;
    background: forestgreen;
}
div.ui-datepicker-control div {
    padding: 5px;
}
div.ui-datepicker-control div a {
    color: #fff;
}
div.ui-datepicker-links {
    position: relative;
    height: 20px;
    padding: 5px 0 0 0;
    background: darkgreen;
    border-bottom: 1px solid green;
    text-align: center;
}
div.ui-datepicker-links div {
    padding: 5px;
}
div.ui-datepicker-links div a {
    color: #fff;    
}
div.ui-datepicker-clear,
div.ui-datepicker-prev {
    position: absolute;
    top: 0;
    left: 0;
}
div.ui-datepicker-close,
div.ui-datepicker-next {
    position: absolute;
    top: 0;
    right: 0;
}
div.ui-datepicker-current {
    display: inline;
}
div.ui-datepicker-header {
    margin-top: 5px;
    text-align: center;
}
div.ui-datepicker-header select {
    margin: 0 3px;    
}
table.ui-datepicker {
    width: 250px;
    border-collapse: collapse;
    margin: 10px 0 0 0;
}
table.ui-datepicker td {
    padding: 3px;
    border: 1px solid red;
}
table.ui-datepicker thead td {
    text-align: center;
    font-weight: bold;
    background: green;
    color: lightgreen;
}
td.ui-datepicker-today {
    background: #dff6e4;
}
td.ui-datepicker-current-day {
    background: darkgreen;
    color: #fff;
}
    </style>
  </head>
  <body>

        <div>
          <label for='tmpDate'>Date:</label>
          <input type='text' id='tmpDate' size='25' value='' />
        </div>        

  </body>
</html>








30.140.UI Datepicker
30.140.1.jQuery UI Datepicker - Populate alternate field
30.140.2.jQuery UI Datepicker - Display button bar
30.140.3.jQuery UI Datepicker - Format date
30.140.4.jQuery UI Datepicker - Display month and year menus
30.140.5.jQuery UI Datepicker - Icon trigger
30.140.6.jQuery UI Datepicker - Display inline
30.140.7.jQuery UI Datepicker - Localize calendar
30.140.8.jQuery UI Datepicker - Restrict date range
30.140.9.jQuery UI Datepicker - Display multiple months
30.140.10.Create a date picker
30.140.11.Set date format (appendText: " MM/DD/YYYY")
30.140.12.dateFormat:"d MM yy"
30.140.13.Internationalize date picker
30.140.14.Use button to trigger date picker
30.140.15.Add image to date picker trigger button
30.140.16.Display two months
30.140.17.Display a dialog to hold the date picker
30.140.18.Set style for date picker
30.140.19.range Select: true,
30.140.20.firstDay: 1