CODEWITHSUNDEEP
jquerytwitter-bootstrapdatetime
Jason McMains
Jason McMains

Reputation: 333

Bootstrap 3 DateTimepicker Display TimePicker first

I'm working with the datetimepicker found here:

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

Maybe the answer is right in front of me, but I can't find it. How do you default to showing the edit time screen first? I'm creating a time keeping app, and I'd rarely change the date, but usually change the time.

Thanks for any help!

Upvotes: 7

Views: 1604

Answers (4)

Spomar
Spomar

Reputation: 11

My 2 cents

('#myDatetimepicker').datetimepicker({
        icons: {
            time: "icona-orologio",
        }
    }).on('dp.show', function(e){
        setTimeout(function(){
            $('.bootstrap-datetimepicker-widget').find('.icona-orologio').parent().click();
        }, 300);
    });

Upvotes: 1

Jason McMains
Jason McMains

Reputation: 333

Ok, its a little hackey but based on the response here:

https://github.com/Eonasdan/bootstrap-datetimepicker/issues/840

i added

$(".datetimepicker").on 'dp.show', () -> $(document).find('.picker-switch a[data-action="togglePicker"]').click()

to my coffeescript. The Jquery equivalent would be

$(".pickthetime").on('dp.show', function(){
  $(document).find('.picker-switch a[data-action="togglePicker"]').click()
});

It sort of does what I'm looking for, but the slide motion makes it look kinda crappy. Any thoughts?

Upvotes: 6

Alfred DSouza
Alfred DSouza

Reputation: 328

Here are the format options that you can use for the plugin.
For time first use this as format : 'HH:mm:ss a MM/DD/YYYY' this will translate to '21:55:30 pm 07/19/2015'

Check all the available options for the plugin here

Upvotes: 0

Pete LoGiudice
Pete LoGiudice

Reputation: 75

Since you're rarely changing the date, maybe using a timepicker would be more suited to your project. You could have a separate picker for each as well.

Bootstrap Timepicker

I found:

Bootstrap Datepicker docs

Defaults for all options can be modified directly by changing values in the $.fn.datepicker.defaults hash:

$.fn.datepicker.defaults.format = "mm/dd/yyyy";
$('.datepicker').datepicker({
     startDate: '-3d'
})

Change the format string to:

"HH:MM:SS mm/dd/yyyy"

Upvotes: 0

Related Questions