Disable time in bootstrap date time picker

JavascriptHtmlTwitter Bootstrap

Javascript Problem Overview

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>

Javascript Solutions

Solution 1 - Javascript

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/)

Solution 2 - Javascript

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.

Solution 3 - Javascript

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).

Solution 4 - Javascript

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

Please try if it works for you as well

Solution 5 - Javascript

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.

Solution 6 - Javascript

<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>

Solution 7 - Javascript

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

Solution 8 - Javascript

This shows only date:

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

More on the subject here

Solution 9 - Javascript

For bootstrap 4 version this code working;

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

Solution 10 - Javascript

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

Solution 11 - Javascript

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/

Solution 12 - Javascript

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>

Solution 13 - Javascript

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.

Solution 14 - Javascript

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",
      });

Solution 15 - Javascript

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",
		});
	});

Solution 16 - Javascript

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

Solution 17 - Javascript

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;
}

Solution 18 - Javascript

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/

Solution 19 - Javascript

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.)

    });

Solution 20 - Javascript

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

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

Solution 21 - Javascript

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

Previous Solution:

HTML for the Pause symbol in audio and video control

HtmlUnicodeSpecial CharactersSymbols

Next Solution:

How can I select next occurrence in IDEA editors

Intellij IdeaPycharmPhpstormWebstorm

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionChirag SudraView Question on Stackoverflow
Solution 1 - JavascriptCk MauryaView Answer on Stackoverflow
Solution 2 - JavascriptCeltView Answer on Stackoverflow
Solution 3 - JavascriptPeter IlfrichView Answer on Stackoverflow
Solution 4 - JavascriptImBhavin95View Answer on Stackoverflow
Solution 5 - Javascriptishmael62View Answer on Stackoverflow
Solution 6 - JavascriptwolverView Answer on Stackoverflow
Solution 7 - JavascriptmuniView Answer on Stackoverflow
Solution 8 - JavascriptFrenkyBView Answer on Stackoverflow
Solution 9 - JavascriptEthemView Answer on Stackoverflow
Solution 10 - JavascriptPaulView Answer on Stackoverflow
Solution 11 - Javascriptaldrien.hView Answer on Stackoverflow
Solution 12 - JavascriptHrushiView Answer on Stackoverflow
Solution 13 - JavascriptAto ThejayView Answer on Stackoverflow
Solution 14 - JavascriptDawn GreenView Answer on Stackoverflow
Solution 15 - JavascriptMugundhan AView Answer on Stackoverflow
Solution 16 - JavascriptViral MView Answer on Stackoverflow
Solution 17 - JavascriptMaxim RadevichView Answer on Stackoverflow
Solution 18 - JavascriptikhvjsView Answer on Stackoverflow
Solution 19 - JavascriptDonnyView Answer on Stackoverflow
Solution 20 - JavascriptManu TerrónView Answer on Stackoverflow
Solution 21 - Javascriptuser4961104View Answer on Stackoverflow