--> Skip to main content
Home Web Programming Date Formatting Using Jquery Datetimepicker and Moment.js

Date Formatting Using Jquery Datetimepicker and Moment.js

In this tutorial, we'll learn how to create date format using bootstrap datetimepicker and moment.js.

In developing a website, sometimes we need to add a date input form, for example : the date is placed in an article or in the birth date, the date of an agenda etc.

In making a date input form similar to a calendar, we can use library datetimepicker.  A date picker is an interactive dropdown that makes it easy to choose the date from a calendar instead of typing it manually. The date format presented is still in global format. For that, in this tutorial we will
change the language of date which is being set by moment.js. which default one is English.
The output or final result of this tutorial is shown in Figure 1 below:
(Fig.1)

As you can seen in Figure 1, the left is the date writing in the global format presented in three models. The writing of the month is still in English format.

On the right side is the date format of Indonesian language where the writing of the month in the form of  Indonesian month (eg: December, not december).

Create Datepicker for Date Input 

In here, we use Bootstrap  as main library to create interface. To create datepicker for date input, we use libraries :
  • bootstrap-datetimepicker.css
  • bootstrap-datetimepicker.js
  • moment-with-locales.js
Before we will create the date format of Indonesia, we first create the default date format from boostrap-datetimepicker.

Here is a snippet code to create a date with datetimepicker:
<div class="container">
 <div class="row">
  <div class="col-md-4">
  <div class="panel panel-default">
   <div class="panel-heading">Format Global</div>
   <div class="panel-body">
    <div class="form-group">
     <label>Format :DD/MM/YYYY</label>
     <div class="input-group date" id="tgl1">
      <input type="text" class="form-control" placeholder="Cth:20/12/2016"/> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
    <div class="form-group">
     <label>Format :DD/MM/YYYY</label>
     <div class="input-group date" id="tgl2">
      <input type="text" class="form-control" placeholder="Cth:21/Dec/2016"/> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
    <div class="form-group">
     <label>Format :DD/MM/YYYY</label>
     <div class="input-group date" id="tgl3">
      <input type="text" class="form-control" placeholder="Cth:21-December-2016"/> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
   </div>
   </div>
  </div>
 </div>
</div>
<script>
 $(function() { 
   $('#tgl1').datetimepicker({format : "DD/MM/YYYY"});
   $('#tgl2').datetimepicker({format : "DD/MMM/YYYY"});
   $('#tgl3').datetimepicker({format : "DD/MMMM/YYYY"});
 });
</script>

So that will be generated output like Figure.2 below:
(Fig.2)

The core of the above code that produces the output as Fig.2 is:
<script>
 $(function() { 
   $('#tgl1').datetimepicker({format : "DD/MM/YYYY"});
   $('#tgl2').datetimepicker({format : "DD/MMM/YYYY"});
   $('#tgl3').datetimepicker({format : "DD/MMMM/YYYY"});
 });
</script>

As you can see we use three model formats:
  • DD / MM / YYYY, will generate a date like 21/12/2016. So the MM will display the month in numerical form.
  • DD / MMM / YYYY, will generate dates like 21 / Dec / 2016. So the MMM part will take the name of its month abbreviation.
  • DD / MMMM / YYYY, will result in dates such as 21 / December / 2016. So if we use MMMM, it will display the full name of the month.

While # tgl1, # tgl2 and # tgl3 are id names that we previously defined in the class input-group date.

Create date with Indonesian date format

As mentioned above, we use libary moment-with-locales.js to convert dates into indonesian date format. So here we combine the datetimepicker.js library with moment-with-locales.js.
<div class="container">
 <div class="row">
  <div class="col-md-4">
  <div class="panel panel-default">
   <div class="panel-heading">Format Tanggal Indonesia</div>
   <div class="panel-body">
    <div class="form-group">
     <label>Format :DD-MMM-YYYY</label>
     <div class="input-group date" id="tgl4">
      <input type="text" class="form-control" placeholder="Cth:21/Des/2016"/> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
    <div class="form-group">
     <label>Format :DD/MMMM/YYYY</label>
     <div class="input-group date" id="tgl5">
      <input type="text" class="form-control" placeholder="21/Desember/2016"/> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
    <div class="form-group">
     <label>Format :DD/MMMM/YYYY</label>
     <div class="input-group date" id="tgl6">
      <input type="text" class="form-control" placeholder="Cth:21-December-2016"/> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
   </div>
  </div>
  </div>
 </div>
</div>
<script>
$(function() {
  $('#tgl4').datetimepicker({
    locale:'id',
    format:'DD/MMM/YYYY'
   });
  $('#tgl5').datetimepicker({
    locale:'id',
    format:'DD/MMMM/YYYY'
   });
   $('#tgl6').datetimepicker({
    locale:'id',
    format:'DD-MMMM-YYYY'
   });
});
</script>

So it will produce an output like Figure.3 below:
(Fig.3)


Full Source Code

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="author" content="ilmu-detil.blogspot.com">
 <title>Tutorial Jquery Tanggal</title>
 <link rel="stylesheet" href="assets/css/bootstrap.min.css">
 <link rel="stylesheet" href="assets/css/ilmudetil.css">
 <link rel="stylesheet" href="assets/css/bootstrap-datetimepicker.css"/>
 <script src="assets/js/bootstrap.min.js"></script>
 <script src="assets/js/moment-with-locales.js"></script>
 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
 <script src="assets/js/bootstrap-datetimepicker.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
 <div class="container">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="index.html">
   Pusat Ilmu Secara Detil</a>
  </div>
  <div class="navbar-collapse collapse">
   <ul class="nav navbar-nav navbar-left">
    <li class="clr1 active"><a href="index.html">Home</a></li>
    <li class="clr2"><a href="">Programming</a></li>
    <li class="clr3"><a href="">English</a></li>
   </ul>
  </div>
 </div>
</div>
</br></br></br></br>

<div class="container">
 <div class="row">
  <div class="col-md-4">
  <div class="panel panel-default">
   <div class="panel-heading">Format Global</div>
   <div class="panel-body">
    <div class="form-group">
     <label>Format :DD/MM/YYYY</label>
     <div class="input-group date" id="tgl1">
      <input type="text" class="form-control" placeholder="Cth:20/12/2016"/> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
    <div class="form-group">
     <label>Format :DD/MM/YYYY</label>
     <div class="input-group date" id="tgl2">
      <input type="text" class="form-control" placeholder="Cth:21/Dec/2016"/> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
    <div class="form-group">
     <label>Format :DD/MM/YYYY</label>
     <div class="input-group date" id="tgl3">
      <input type="text" class="form-control" placeholder="Cth:21-December-2016"/> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
   </div>
   </div>
  </div>
  <div class="col-md-4">
  <div class="panel panel-default">
   <div class="panel-heading">Format Tanggal Indonesia</div>
   <div class="panel-body">
    <div class="form-group">
     <label>Format :DD-MMM-YYYY</label>
     <div class="input-group date" id="tgl4">
      <input type="text" class="form-control" placeholder="Cth:21/Des/2016"/> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
    <div class="form-group">
     <label>Format :DD/MMMM/YYYY</label>
     <div class="input-group date" id="tgl5">
      <input type="text" class="form-control" placeholder="21/Desember/2016"/> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
    <div class="form-group">
     <label>Format :DD/MMMM/YYYY</label>
     <div class="input-group date" id="tgl6">
      <input type="text" class="form-control" placeholder="Cth:21-December-2016"/> 
       <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
     </div>
    </div>
   </div>
   </div>
  </div>
 </div>
</div>
<script>
$(function() { 
  $('#tgl1').datetimepicker({format : "DD/MM/YYYY"});
  $('#tgl2').datetimepicker({format : "DD/MMM/YYYY"});
  $('#tgl3').datetimepicker({format : "DD/MMMM/YYYY"});
 
  $('#tgl4').datetimepicker({
   locale:'id',
   format:'DD/MMM/YYYY'
   });
  $('#tgl5').datetimepicker({
   locale:'id',
   format:'DD/MMMM/YYYY'
   });
   $('#tgl6').datetimepicker({
   locale:'id',
   format:'DD-MMMM-YYYY'
   });
});

</script> 
</body>
</html>


Live Preview Download

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar