CODEWITHSUNDEEP
datepickerbootstrap-4bootstrap-datetimepicker
Geoff_S
Geoff_S

Reputation: 5107

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>

Upvotes: 2

Views: 1843

Answers (1)

Vignesh Raja
Vignesh Raja

Reputation: 8761

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>

Upvotes: 1

Related Questions