Daterangepicker disable the second calendar and use it as a datepicker

Question

Daterangepicker disable the second calendar and use it as a datepicker

Navigation

#1 by (1 votes)

0

I have this example

$('#datepicker').daterangepicker({
        timePicker: true,
        startDate: new Date(),
        endDate: new Date(),
        locale: {
            format: 'MM/DD/YYYY HH:mm'
        }

    }, function(start, end, label) {
        $("#range1").val(start.format('MM/DD/YYYY HH:mm:00')+" - "+end.format('MM/DD/YYYY HH:mm:00'));
});

Since I can dynamically change the daterangepicker to a dynamic datepicker, I mean that when you click on a button, you disable the second calendar and it works like a classic datepicker.

jquery bootstrap datepicker

asked by crack81 18.09.2017 в 19:25

source

1 answer

Autocomplete Finder AngularJS + SQL SERVER does not show results Migrate struts 2.3.X to 2.5.X

score 1 · Accepted Answer

Try that when you click on the button to deactivate, you remove the daterangepicker using $("elemento").data("daterangepicker").remove() and then apply the datepicker to the input.

See this example working in jsbin since you can not make it import the library% % co in the site editor.

I post the code by rule.

$('#datepicker').daterangepicker({
        timePicker: true,
        startDate: new Date(),
        endDate: new Date(),
        locale: {
            format: 'MM/DD/YYYY HH:mm'
        }

    }, function(start, end, label) {
        $("#range1").val(start.format('MM/DD/YYYY HH:mm:00')+" - "+end.format('MM/DD/YYYY HH:mm:00'));
});

$("#deshabilitar").click(function(){
  $('#datepicker').data('daterangepicker').remove()
  $("#datepicker").val("");
  $("#datepicker").datepicker();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<script src="http://www.daterangepicker.com/daterangepicker.js" ></script>
 <link rel="stylesheet" type="text/css" href="http://www.daterangepicker.com/daterangepicker.css" />
 <script src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" />
<input type="text" id="datepicker" />

<button id="deshabilitar"> deshabilitar </button>