jquery ui datetimepicker – Simple date/time picker component

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
Also Read This πŸ‘‰   text slider jquery - Simple jQuery Text Slider Example

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>

Free Live Chat for Any Issue

Don’t Miss : Datetimepicker Jquery Example With Code

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.

Rate this post

Also Read This πŸ‘‰   datepicker change date format dynamically using jquery