Disable time in bootstrap date time picker

Question

I am using bootstrap date time picker in my web application, made in PHP/HTML5 and JavaScript. I am currently using one from here: http://tarruda.github.io/bootstrap-datetimepicker/

When I am using the control without time, it doesn't work. It just shows a blank text box.

I just want to remove time from date time picker. Is there any solution for this?

<div class="well">
    <div id="datetimepicker4" class="input-append"> 
        <input data-format="yyyy-MM-dd" type="text"></input> 
        <span class="add-on"> 
            <i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i> 
        </span> 
    </div> 
</div> 
<script type="text/javascript"> 
    $(function() { 
        $('#datetimepicker4').datetimepicker({ pickTime: false }); 
    }); 
</script>

For me this `minView:'month'` worked, i did not want the time selection to show. I got the help from their github repository. https://github.com/smalot/bootstrap-datetimepicker/issues/587#issuecomment-259621765 — Sizzling Code, Dec 05 '19 at 08:00

score 147 · Accepted Answer · edited Mar 18 '18 at 17:59

147

Check the below snippet

<div class="container">
<div class="row">
    <div class='col-sm-6'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker4'>
                <input type='text' class="form-control" />
                <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
                </span>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function() {              
           // Bootstrap DateTimePicker v4
           $('#datetimepicker4').datetimepicker({
                 format: 'DD/MM/YYYY'
           });
        });      
    </script>
</div>

You can refer http://eonasdan.github.io/bootstrap-datetimepicker/ for documentation and other functions in detail. This should work.

Update to support i18n

Use localized formats of moment.js:

L for date only
LT for time only
L LT for date and time

See other localized formats in the moment.js documentation (https://momentjs.com/docs/#/displaying/format/)

edited Mar 18 '18 at 17:59

Denis Zavershinskiy

144
1
11

answered Nov 25 '14 at 07:20

Ck Maurya

2,225
2
17
26

The pickDate option you cite is not documented in the documentation you link to. – Jeremy Burton Jan 27 '15 at 01:01
2

The answer is wrong regarding the question. The question was how to disable the time, not the date. Besides, that code probably still won't work, since it attachs the datepicker to the parent `div` (maybe the library handles this and searches for ``-sub-elements) – Peter Ilfrich Jan 29 '15 at 00:45
12

pickDate and pickTime have been removed in the current version of Eonasdan's Bootstrap Datetimepicker. Use format instead. – gl03 Mar 11 '15 at 14:16
3

This is wrong, setting format breaks internationalisation – Kikin-Sama Jul 17 '17 at 23:44

score 44 · Answer 2 · answered Feb 16 '15 at 13:48

44

I tried all of the solutions posted here but none of them worked for me. I managed to disable the time by using this line of code in my jQuery:

$('#datetimepicker4').datetimepicker({
    format: 'YYYY-MM-DD'
});

This set the format to date only and disabled the time completely. Hope this helps.

answered Feb 16 '15 at 13:48

Celt

2,469
2
26
43

5

Of all the solutions on this page, this is the only one that worked for me. Using v4.7.14 of bootstrap-datetimepicker lib. – Josh Buchea Mar 31 '15 at 17:15
2

Just to avoid any confusion since there seems to be a few similarly named datetime pickers, I'll point out that this worked for me for this particular plugin: http://eonasdan.github.io/bootstrap-datetimepicker/ – Paul Calabro Jun 05 '15 at 11:10
Thanks, this worked for me, however, my form still shows the icon to switch to the time-picker, and it allows you switch, then shows 00:00. It doesn't change what is submitted with the form, but is there any way to remove the clock icon so that the user cannot access the time picker part of the form? Thanks again! – jackerman09 Jun 22 '15 at 02:50
You must be using a different version of the DateTimePicker because the time icon disappeared on mine. – Celt Jun 23 '15 at 14:46

score 27 · Answer 3 · edited Jun 20 '20 at 09:12

27

This is for: Eonasdan's Bootstrap Datetimepicker

First of all I would provide an id attribute for the <input> and then initialize the datetimepicker directly for that <input> (and not for the parent container):

<div class="container">
  <input data-format="yyyy-MM-dd" type="text" id="datetimepicker"/>
</div>
<script type="text/javascript">
  $(function() {
    // Bootstrap DateTimePicker v3
    $('#datetimepicker').datetimepicker({
      pickTime: false
    });
    // Bootstrap DateTimePicker v4
    $('#datetimepicker').datetimepicker({
      format: 'DD/MM/YYYY'
    });
  });
</script>

For v3: Contrary to Ck Maurya's answer:

pickDate: false will disable the date and only allow to pick a time
pickTime: false will disable the time and only allow to pick a date (which is what you want).

For v4: Bootstrap Datetimepicker now uses the format to determine if a time-component is present. If no time component is present, it won't let you choose a time (and hide the clock icon).

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 29 '15 at 00:43

Peter Ilfrich

3,727
3
31
35

Why was this voted down? This is the only answer that correctly explains that the plugin's option have changed in the latest version. Would have saved me a few minutes of confusion if this was the top answer. – gl03 Mar 11 '15 at 14:14
1

It has to be CAPITALS date for it to work, strangely – sidonaldson Mar 16 '15 at 14:56
Yeah, that's just the way how the date format is specified in Javascript (contrary to the way date/time format is defined in Java). Took me some time to figure that out as well. – Peter Ilfrich Mar 17 '15 at 15:22
Thanks, this worked for me, however, my form still shows the icon to switch to the time-picker, and it allows you switch, then shows 00:00. It doesn't change what is submitted with the form, but is there any way to remove the clock icon so that the user cannot access the time picker part of the form? Thanks again! – jackerman09 Jun 22 '15 at 03:45
jackerman09, please be aware of the version of datetimepicker you use. The behaviour described applies to Eonasdan's datetimepicker v3, v4. If you are using the latest (which you should), then not having a time component in the format will automatically remove the clock icon. And please don't post the same comment to multiple answers... It suggests a lack of motivation... – Peter Ilfrich Jun 22 '15 at 04:24

ImBhavin95 · Answer 4 · 2018-12-07T15:33:36.833

23

$('#datetimepicker').datetimepicker({ 
    minView: 2, 
    pickTime: false, 
    language: 'pt-BR' 
});

Please try if it works for you as well

edited Dec 07 '18 at 15:33

answered Jan 16 '16 at 05:14

ImBhavin95

1,494
2
16
29

1

Works like a charm :) Thanks a lot. May I ask what is minView setting? Withouth this setting, time is shown. – FrenkyB Feb 02 '17 at 07:01
1

i don't know but i also have this problem and its solve out for this code. – ImBhavin95 Feb 02 '17 at 07:11
Your point was right, more of that here: https://github.com/smalot/bootstrap-datetimepicker/issues/416. – FrenkyB Feb 02 '17 at 07:19
Perfect! To not broke locale, use: `$('#datetimepicker').datetimepicker({ minView: 2, pickTime: false, language: 'pt-BR' });` – Aline Matos Aug 28 '18 at 00:06
Are you using this library? https://www.malot.fr/bootstrap-datetimepicker/ – ikhvjs Apr 26 '21 at 14:46

score 19 · Answer 5 · edited May 25 '16 at 09:51

I spent some time trying to figure this out due to the update with DateTimePicker. You would enter in a format based off of moment.js documentation. You can use what other answers showed:

$('#datetimepicker').datetimepicker({ format: 'DD/MM/YYYY' });

Or you can use some of the localized formats moment.js provides to do just a date, such as:

$('#datetimepicker').datetimepicker({locale: 'fr', format: 'L' });

Using this, you are able to display only a time (LT) or date (L) based on locale. The documentation for datetimepicker wasn't clear to me that it automatically adapts to the input provided (date or only time) via moment.js format. Hope this helps for those still looking.

This is the best answer, because it includes the locale-dependent format, instead of "hardcoding" the format. — Nahn, Dec 18 '15 at 17:58

score 7 · Answer 6 · answered Apr 19 '17 at 11:48

<div class="container">
  <input type="text" id="datetimepicker"/>
</div>

<script type="text/javascript">
  $(function() {
    // trigger datepicker
    $('#datetimepicker').datetimepicker({
       pickTime: false,
        minView: 2,
        format: 'dd/mm/yyyy',
        autoclose: true,
    });
  });
</script>

score 5 · Answer 7 · answered Oct 06 '14 at 13:53

Initialize your datetimepicker like this

For disable time

$(document).ready(function(){
    $('#dp3').datetimepicker({
      pickTime: false
    });
});

For disable date

$(document).ready(function(){
    $('#dp3').datetimepicker({
      pickDate: false
    });
});

To disable both date and time

$(document).ready(function(){
   $("#dp3").datetimepicker('disable'); 
});

please refer following documentation if you have any doubt

http://eonasdan.github.io/bootstrap-datetimepicker/#options

score 5 · Answer 8 · answered Feb 02 '17 at 07:21

5

This shows only date:

$('#myDateTimePicker').datetimepicker({
        format: 'dd.mm.yyyy',
        minView: 2,
        maxView: 4,
        autoclose: true
      });

More on the subject here

answered Feb 02 '17 at 07:21

FrenkyB

6,625
14
67
114

score 3 · Answer 9 · answered Jan 08 '19 at 13:46

3

For bootstrap 4 version this code working;

$('#payment-date-time-select').datetimepicker({
    startView:2,
    minView:2,
});

answered Jan 08 '19 at 13:46

Ethem

81
1
5

aldrien.h · Answer 10 · 2020-12-08T10:11:13.477

3

In my case, the option I used was:

var from = $("input.datepicker").datetimepicker({
  format:'Y-m-d',
  timepicker:false # <- HERE
});

I'm using this plugin https://xdsoft.net/jqplugins/datetimepicker/

edited Dec 08 '20 at 10:11

answered Dec 08 '20 at 09:39

aldrien.h

3,437
2
30
52

score 2 · Answer 11 · answered Apr 22 '18 at 18:21

2

    $(function () {
        $('#datetimepicker9').datetimepicker({
            viewMode: 'years',
            format: 'DD/MM/YYYY' /*Add this line to remove time format*/
        });
    });

answered Apr 22 '18 at 18:21

Paul

107
1
11

score 1 · Answer 12 · answered Jun 16 '16 at 09:57

your same code work's fine, just add some link reference

<!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="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">


    </head>
    <body>
        <div class="well">
            <div id="datetimepicker4" class="input-append"> 
                <input data-format="yyyy-MM-dd" type="text"></input> 
                <span class="add-on"> 
                    <i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i> 
                </span> 
            </div> 
        </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="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
        </script>
        <script type="text/javascript"
                src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
        </script>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker4').datetimepicker({pickTime: false});
            });
        </script>

    </body>
    </html>

Ato Thejay · Answer 13 · 2017-08-11T12:52:38.070

The selector criteria is now an attribute the DIV tag.

examples are ...

data-date-format="dd MM yyyy" 
data-date-format="dd MM yyyy - HH:ii p
data-date-format="hh:ii"

so the bootstrap example for dd mm yyyy is:-

<div class="input-group date form_date col-md-5" data-date="" 
    data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
..... etc ....
</div>

my Javascript settings are as follows:-

            var picker_settings = {
                language:  'en',
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0
            };

        $(datePickerId).datetimepicker(picker_settings);

You can see working examples of these if you download the bootstrap-datetimepicker-master file. There are sample folders each with an index.html.

score 0 · Answer 14 · answered Jun 17 '15 at 20:40

0

I know this is late, but the answer is simply removing "time" from the word, datetimepicker to change it to datepicker. You can format it with dateFormat.

      jQuery( "#datetimepicker4" ).datepicker({
        dateFormat: "MM dd, yy",
      });

answered Jun 17 '15 at 20:40

Dawn Green

483
4
16

I'm not sure why you dinged my comment, Dmitry, because it in fact answers the poster's question. The fact that there are various dateFormats is not relevant to the question and is only shown here as an example. – Dawn Green Sep 02 '15 at 18:32

score 0 · Answer 15 · edited Sep 10 '15 at 11:45

0

Disable time in boostrap datetime picker...

   $(document).ready(function () {
        $('.timepicker').datetimepicker({
            format: "dd-mm-yy",
        });
    });

Disable date in boostrap datetime picker...

   $(document).ready(function () {
        $('.timepicker').datetimepicker({
            format: "HH:mm A",
        });
    });

edited Sep 10 '15 at 11:45

Gilsha

14,431
3
32
47

answered Sep 10 '15 at 09:26

Mugundhan A

21
1

score 0 · Answer 16 · answered Aug 23 '16 at 08:41

0

<script type="text/javascript">
        $(function () {
                  $('#datepicker').datetimepicker({
                     format: 'YYYY/MM/DD'
               });
            });
</script>

answered Aug 23 '16 at 08:41

Viral M

261
2
14

score 0 · Answer 17 · answered Jul 04 '17 at 12:01

0

This allows to show time in input field but hides time picker button, which is second li element in accordion

.bootstrap-datetimepicker-widget .list-unstyled li:nth-child(2){
    display: none;
}

answered Jul 04 '17 at 12:01

Maxim Radevich

86
4

score 0 · Answer 18 · answered Apr 26 '21 at 14:51

I am late to this post, but I want to share my experience. Some people suggest the code below to turn off the time picker and it did fix the issue.

$('#datetimepicker').datetimepicker({ 
    minView: 2, 
    pickTime: false
});

The reason behind I think they are using this library https://www.malot.fr/bootstrap-datetimepicker/ instead of this library http://eonasdan.github.io/bootstrap-datetimepicker/

score -1 · Answer 19 · answered Jul 07 '15 at 05:13

-1

Here's the solution for you. It's very easy to just add code like this:

    $('#datetimepicker4').datetimepicker({ 

    pickTime: false 

    minview:2;(Please see here.)

    });

answered Jul 07 '15 at 05:13

Donny

94
6

score -3 · Answer 20 · edited Jan 31 '16 at 12:34

-3

Not as put off time and language at a time I put this and not work

$(function () {
    $('#datetimepicker2').datetimepicker({
              locale: 'es',
              pickTime: false
          });
});

edited Jan 31 '16 at 12:34

Mosh Feu

28,354
16
88
135

answered Jun 05 '15 at 10:05

Manu Terrón

9
3

2

getting idea from your answer will be difficult. – Anptk Jun 05 '15 at 10:13

score -3 · Answer 21 · answered Sep 10 '15 at 09:29

 $("#datetimepicker4").datepicker({
    dateFormat: 'mm/dd/yy',
    changeMonth: true,
    changeYear: true,
    showOtherMonths: true,
    selectOtherMonths: true,
    pickTime: false,
    format: 'YYYY-MM-DD'
});

Disable time in bootstrap date time picker

21 Answers21

Update to support i18n

Linked