jquery ui datetimepicker – Simple date/time picker component

Rate this post

jquery ui datetimepicker is tied to a standard form input field. It plugin for date, time, or datetime manipulation in form.

jquery ui datetimepicker : DatePicker with time : TimePicker [jQuery UI]

The timepicker addon adds a timepicker to jQuery UI Datepicker : Customizable Time Picker For jQuery UI Datepicker

Options

  • endDate: Infinity // set a maximum date
  • maskInput: true, // disables the text input mask
  • pick12HourFormat: false, // enables the 12-hour format time picker
  • pickDate: true, // disables the date picker
  • pickSeconds: true, // disables seconds in the time picker
  • pickTime: true, // disables de time picker
  • startDate: -Infinity, // set a minimum date
Read Also:  jquery tabs refresh active tab on page reload

Complete sample markup

index.html

<!DOCTYPE HTML>
<html>
  <head>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen"
     href="/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
  </head>
  <body>
    <div id="datetimepicker" class="input-append date">
      <input type="text"></input>
      <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
      </span>
    </div>
    <script type="text/javascript"
     src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script> 
    <script type="text/javascript"
     src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
    </script>
    <script type="text/javascript"
     src="bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
    </script>
    <script type="text/javascript"
     src="bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
    </script>
    <script type="text/javascript">
      $('#datetimepicker').datetimepicker({
        format: 'dd/MM/yyyy hh:mm:ss',
        language: 'pt-BR'
      });
    </script>
  </body>
<html>

The magic line :

$('#date_begin,#date_end').datetimepicker(); 

Don’t forget the style in head part:

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-ui.css" type="text/css" media="all" />
    <style>
    .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
    .ui-timepicker-div dl { text-align: left; }
    .ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
    .ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
    .ui-timepicker-div td { font-size: 90%; }
    .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
    .ui-timepicker-rtl{ direction: rtl; }
    .ui-timepicker-rtl dl { text-align: right; }
    .ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px; }
    </style>

Don’t Miss : Datetimepicker Jquery Example With Code

Free Live Chat for Any Issue
Download

I hope you get an idea about jquery ui datetimepicker.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.