0

I am using TempusDominus bootstrap4 datetimepicker in my html view. So I Added the below scripts in my project.

<script src="~/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="~/js/moment.js"></script>
<link href="~/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet" />

I already have the below scripts in my layout.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

@*scripts for unobtrusive client side validations*@
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>    <scriptsrc="https://ajax.aspnetcdn.com/ajax/jquery.validation.unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"></script>


    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>

My html view is as below:

<div class="input-group date" id="datetimepicker4" data-target-input="nearest">
        <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker4"
               name="date"
               id="datetimepicker4"/>
        <div class="input-group-append custom-datetimepicker" data-target="#datetimepicker4" data-toggle="datetimepicker">
            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
        </div>
    </div>

My javascript is as follows:

 $(function () {
    $('#datetimepicker4').datetimepicker({
        format: 'L',
        useCurrent: false,
        maxDate: new Date()
    });
});

The same code is working fine in fiddler, but it is not working in my application.

I am able to disable the future date by option maxDate:new Date() and due to the option useCurrent:false By default the current date is not filling on page load.

But the issue I am having here is, for the very first time I am unable to select the current date, but for the second time I am able to select it. So I am not sure whether the existing bootstrap js files are overwriting my datetime picker options.

NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
Meena
  • 685
  • 8
  • 31

1 Answers1

4
 $(function () {
   $('#datetimepicker4').datetimepicker({
    format: 'L',
    useCurrent: false,
    maxDate: moment().millisecond(999).second(59).minute(59).hour(23)
  });
});
Dharmesh Dhol
  • 41
  • 2