Search code examples
datepickerbootstrap-4bootstrap-datetimepicker

converting datepicker to datetimepicker


In my site, using Bootstrap 4, I have a perfectly working datepicker instance giving me a calendar to choose dates. However, I want to modify this to use time as well. I've tried so many different versions of datetime pickers and put the CDN files in proper order but something is conflicting for whatever reason.

I'm hoping for someone to just point me into the direction of the best way to use a datetimepicker or just incorporate time with this, in a way that works with what I'm using now.

Here's the code for the working datepicker:

$('#datepicker').datepicker({
    weekStart: 1,
    daysOfWeekHighlighted: "6,0",
    autoclose: true,
    todayHighlight: true,
});
$('#datepicker').datepicker("setDate", new Date());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

<h6>Set New Expiration: <input data-date-format="mm/dd/yyyy" id="datepicker" name="datepicker"></h6>


Solution

  • You can use AuspeXeu DateTimePicker. It also supports keyboard navigation.

    $(".datepicker").datetimepicker({
        format: 'm/d/yyyy',
        datesDisabled: ['2018-06-20'],
        autoclose: true
    });
    function showDate()
    {
       console.log($('.datepicker').data("datetimepicker").getDate());
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.js"></script>
    <link href="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    
    <input class="datepicker" type="text">
    <button onclick="showDate()">Get Date</button>