Bootstrap Datetime Picker for 3.0

For 2.0 – The bootstrap-datetimepicker is one of the very best Date/Time Picker for Twitter Bootstrap. It can be downloaded from this link.

I tried this component with my current setup. I used Bootstrap v3.0.2 in my application so unfortunately and reasonably this one did not work. I tried a few work arounds and was almost near but it was not exactly what i wanted. So i tried to look for a 3.x version or something similar.

I found two more. One was Datepicker for Bootstrap, from Twitter but it only supported Date while i wanted one to be able to pick Time as well. Then i found Bootstrap form component to handle date and time data and my search ended, as i thought for a while. But the way it handled the Date/Time picking was something not to my liking. It keeps entering into screens to select Time. If you try the demo you see what i mean by. (One may like this one anyways if it suits one’s needs and liking). So what next?

twitter-bootstrap-datetime-picker-for-3.x

I kept looking for more sources and finally i got this one, Twitter Bootstrap Datetime Picker for 3.0. This was the exact replica of one from http://tarruda.github.io/bootstrap-datetimepicker/ i found at the very beginning. Seemingly shy of search engines (did not come in first 4-5 pages in Google, then) this bootstrap datetime picker for 3.0 does not provide very helpful documentation for quick installation either. And also, i can bet that one will start pulling one’s hair if one does not find the download link at the very bottom, well in time (where it says, Bootstrap-datetimepicker maintained by Eonasdan). Nevertheless this is most useful bootstrap datetime picker and works perfect with bootstrap 3.x version.

Need help?

Download it and read the documentation carefully. Most of you would want to look at the “Manual installation” section. As i said the documentation is not very helpful but it is sufficient to make you able to install it, i would say. Just as a quick reference i would say that you need only three new files in order to make the basic version of bootstrap datetime picker working with your current Bootstrap 3.x setup (.js and .css) files. Here are these:

moment.js
bootstrap-datetimepicker.min.js
bootstrap-datetimepicker.min.css

If you need further help with installation just throw me a message here.

2 thoughts on “Bootstrap Datetime Picker for 3.0

  1. I see you don’t monetize your website, don’t waste your traffic, you
    can earn extra cash every month because you’ve got hi quality content.
    If you want to know how to make extra money, search for: best adsense alternative Dracko’s tricks

  2. Hi,
    I am using bootstrap-datetimepicker.min.js for selecting start and end date.
    I tried to validate date range too be selected using below code.

    $(“#fromDate_outer”).datetimepicker({
    pickTime : false
    });
    $(“#toDate_outer”).datetimepicker({
    pickTime : false,
    });
    $(“#fromDate_outer”).on(“dp.change”, function (e) {
    $(‘#toDate_outer’).data(“DateTimePicker”).minDate(e.date);
    });
    $(“#toDate_outer”).on(“dp.change”, function (e) {
    $(‘#fromDate_outer’).data(“DateTimePicker”).maxDate(e.date);
    });

    But its giving an error …
    Uncaught TypeError: $(…).data(…).minDate is not a function …

    Please tell me what to do so that to date should not be less than from date ….

Leave a Reply

Your email address will not be published. Required fields are marked *