CODEWITHSUNDEEP
javascriptjquerybootstrap-datepickerbootstrap-datetimepickertempus-dominus-datetimepicker
Cheknov
Cheknov

Reputation: 2082

How to change the bootstrap datetimepicker to display only dates and not time

I have several inputs with dates. I don't need time, but somehow I can't get rid of it.

I tried all the solutions I found on StackOverflow without success.

I am using the tempusdominus datetimepicker.

JS FIDDLE LIVE DEMO

Does anyone know how can I remove the option to enter hours and minutes?

I thought format: 'MM/DD/YYYY' would do the trick but apparently it's not working.

$('#monthDatetimepicker').datetimepicker({
            defaultDate: date,
            viewMode: 'days',
            format: 'MM/DD/YYYY'
        });

Upvotes: 0

Views: 1837

Answers (2)

fdomn-m
fdomn-m

Reputation: 28611

You need to set the default options so that it applies to newly created date[time]pickers:

From the options page on how to set global defaults:

  $.fn.datetimepicker.Constructor.Default = $.extend({}, $.fn.datetimepicker.Constructor.Default, {
    viewMode: 'days',
    format: 'MM/DD/YYYY',
  });

Updated fiddle

Your issue was that this line

$('#monthDatetimepicker').datetimepicker({
    format: 'MM/dd/YYYY'

doesn't get applied to anything as $('#monthDatetimepicker') === 0 at the time the code runs.

Moving that line to the end also does nothing as your newly created date inputs have id="monthDatetimepicker" + i. Changing to a valid ID such as:

$('#monthDatetimepicker0').datetimepicker({
    format: 'MM/dd/YYYY'

then only works for the first picker.

So you could do some hideous $("[id=^monthDatetimepicker]").datetimepicker... or, easier, you could add a class into your html builder and use that as a selector. Or set it globally as above (which will affect other pickers unless they had a different format applied). (or use a datepicker instead...)

Upvotes: 1

John Shelby
John Shelby

Reputation: 102

Add .substring(0,10) at the end.

Upvotes: 0

Related Questions