How to show only date in JQuery Datetimepicker addon?

Question

I've searched high and low for an answer to my question but haven't found one, I did find two related questions though: JQuery Datepicker should display date only , jQuery UI DateTimepicker - cannot hide the time

But they didn't solve my problem.

I'm using Trent Richardsons datetimepicker and I would like it to show only date in the textbox. The answer to why I'm not using the datepicker without the addon is because sometimes I want it to show datetime and sometimes only date.

I've can hide the timepicker with the following code:

    datetimepicker("option", "showTimepicker", false);

The time disappears from my textbox but the date has a trailing space, "2013-11-01 " I've tried the option for separator but no luck.

    datetimepicker("option", "separator", "");

Anyone got an idea how I can solve this?

A bit clarification, I'm trying to write kind of a component that can be used through a large solution where it sometimes needs to be a datetimepicker and sometimes a datepicker. This "component" contains an input (my datetimepicker) that is wrapped in some html. It also has properties that can be set, one of them is the SetDateOnly(), and that is where I'm trying to get the datepicker to show only date.

Create a jsfiddle to make it easier for us to solve the problem. — Rick Suggs, Nov 11 '13 at 15:19
I don know how to create a jsfiddle, javascripts isn't really not my best language.. — Robert Persson, Nov 11 '13 at 15:31
So by saying javascript isn't really not your best language, if you cancel out the double negative you're saying it IS your best language? Just go to jsfiddle.net and fill out the html, javascript, and css sections to create an example of your code that anyone can see and inspect. It's very easy. — Rick Suggs, Nov 11 '13 at 16:39

score 20 · Answer 1 · edited Feb 01 '17 at 14:53

20

Try this options:

$("#selector").datetimepicker({
  minView: 2,
  format: 'YYYY-MM-DD'
});

edited Feb 01 '17 at 14:53

Vinamra Mattoo

40
7

answered Dec 29 '14 at 18:35

Ibanêz

349
2
8

1

I had to had `dateonly: true` option for that settings to work for me – BoCyrill Sep 29 '16 at 12:25
1

For me it works without the minView option. If I include it I get an error message, kind of, minView is not a valid option – Enrico Giurin Mar 06 '17 at 15:44

score 12 · Answer 2 · answered Nov 13 '13 at 05:00

12

Then you can go with showTimePicker like this:-

On Form Load

$(document).ready(function(){
    $('#selector').datetimepicker({
        'showTimepicker': false
    });     
});

On run time

$(".btn").click(function(){ 
    $('#selector').datetimepicker("destroy"); //destroys the previous settings.
    $('#selector').datetimepicker({
        'showTimepicker': false
    });                     
});

answered Nov 13 '13 at 05:00

GDG

195
1
10

Thanks. You saved my life. I was looking for Run Time solution. – ADM-IT Nov 11 '16 at 14:10

score 5 · Answer 3 · edited May 18 '15 at 12:38

5

$(document).ready(function(){
    $('#selector').datetimepicker({
        viewMode: 'days',
        format: 'DD/MM/YYYY'
    });     
});

It works like this.

edited May 18 '15 at 12:38

bummi

26,435
13
58
97

answered May 18 '15 at 12:23

Corrot

251
5
3

1

FYI, this is how you do it if you're using ['bootstrap-datetimepicker' by eonasdan on GitHub](https://eonasdan.github.io/bootstrap-datetimepicker/). – Vikram Deshmukh Oct 02 '15 at 07:01

score 3 · Answer 4 · answered Oct 14 '16 at 11:44

3

This is working for me :)

    $("#selector").datetimepicker({
    minView: 2,
    format: 'dd-mm-yyyy',
    autoclose: true
    });

answered Oct 14 '16 at 11:44

Ashish Thakur

173
12

score 3 · Answer 5 · answered Dec 24 '16 at 04:59

3

if another code not work then you can use this code

    $('#datetimepicker_date_to_view').datetimepicker({
            timepicker:false,
            format:'d.m.Y',
        }).on('change', function() {
            $('.xdsoft_datetimepicker').hide();
            var str = $(this).val();
            str = str.split(".");
            $('#alt_date_field').val(str[2]+'-'+str[1]+'-'+str[0]);
        });

answered Dec 24 '16 at 04:59

Sandeep Sherpur

1,507
18
18

after trying all the above solution this works for me :-) – Shailesh Bhokare Mar 22 '20 at 15:19

GDG · Answer 6 · 2013-11-13T05:00:19.220

2

Why not like this:

$('#selector').datetimepicker(); // When required both functionalities.
$('#selector').timepicker(); // When only time is required.
$('#selector').datepicker(); // Otherwise regular datepicker can be used.

edited Nov 13 '13 at 05:00

answered Nov 11 '13 at 15:20

GDG

195
1
10

Yes, I've been thinking about doing it this way and hide/show datepicker/datetimepicker depending on what is needed but I figured it should be possible to set the datetimepicker to show only date. – Robert Persson Nov 11 '13 at 16:00

score 2 · Answer 7 · answered Sep 25 '16 at 23:50

2

This is my solution:

  $("#Time").datetimepicker({
      datepicker: false,
      step: 15,
      format: 'g:i a',
    });

Using jQuery DateTimePicker plugin v2.3.8

answered Sep 25 '16 at 23:50

Gabriel Reguly

190
1
8

score 2 · Answer 8 · answered Jul 25 '19 at 18:11

2

As per the documentation it is:

$("#selector").datetimepicker({
  format: 'L'
});

answered Jul 25 '19 at 18:11

willer2k

426
1
5
13

score 1 · Answer 9 · answered Apr 30 '19 at 11:49

1

I tried this. It's working for me. The following format parameter has to set under the datetimepicker like this 'YYYY-MM-DD'

$(document).ready(function(){
  $('#selector').datetimepicker({         
    format: 'YYYY-MM-DD'
  });     
});`

answered Apr 30 '19 at 11:49

ANIL PATEL

389
2
10

score 0 · Answer 10 · answered Nov 12 '13 at 08:36

0

I solved my problem by having a parameter to my "component" saying if it should contain a datetimepicker or a datepicker. The drawback is that I can't switch between them as easily as I intended to do.

answered Nov 12 '13 at 08:36

Robert Persson

181
1
1
8

score 0 · Answer 11 · answered Sep 10 '16 at 10:48

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

score -1 · Answer 12 · edited Jun 15 '15 at 16:48

-1

$('#datetimepicker1').datetimepicker({
    viewMode: 'days',
    format: 'DD/MM/YYYY',
  icons: {
      time: 'fa fa-clock-o',
      date: 'fa fa-calendar',
      up: 'fa fa-chevron-up',
      down: 'fa fa-chevron-down',
      previous: 'fa fa-chevron-left',
      next: 'fa fa-chevron-right',
      today: 'fa fa-crosshairs',
      clear: 'fa fa-trash'
    }
});

edited Jun 15 '15 at 16:48

Peter O.

28,965
14
72
87

answered Jun 15 '15 at 16:47

hemendra singh

1

score -2 · Answer 13 · answered Sep 05 '17 at 06:37

-2

I tried this.. it's working for me.

use datepicker() instead of datetimepicker()

Ref: jQuery UI DateTimepicker - cannot hide the time

answered Sep 05 '17 at 06:37

user2064570

1
2

How to show only date in JQuery Datetimepicker addon?

13 Answers13