OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

select2 date custom option is not opening if clicked again

  • Thread starter Thread starter sd_30
  • Start date Start date
S

sd_30

Guest
Code:
$(document).ready(function() {

  ///dateee picker 
  $("#date-range-options").select2({
    placeholder: "Select",
    minimumResultsForSearch: -1,
    closeOnSelect: false,
    allowClear: false
  });

  $("#date-range-options").on('select2:open', function() {
    $("#custom-range").hide();
    $("#startdatetext").text("");
    $("#enddatetext").text("");
    $("#startDate-text").text("");
    $("#endDate-text").text("");
  })

  $("#date-range-options").on('select2:select', function() {
    console.log("date cal", $(this).val())
    selectedDateOpt = $(this).val();
    $("#startdatetext").text("");
    $("#enddatetext").text("");
    $("#startDate-text").text("");
    $("#endDate-text").text("");
    $('.selectedDateContainer').hide();
    if ($(this).val() === "custom") {
      console.log("date inside", $(this).val())
      $("#custom-range").show();
      $("#btn-block").show();
      $(".custom-range-datepick").show().addClass('flex-important');
      $(".custom-range-datepick").removeClass('hidden-important');
      $("#date-range-options").select2('close');
      $("#start-date-container").datepicker({
        dateFormat: "yy-mm-dd",
        onSelect: function(selectedDate) {
          startDateText = '';
          startDateText = selectedDate;
          console.log("selecteddd end", startDateText)
          $("#end-date-container").datepicker("option", "minDate", selectedDate);
          document.getElementById('startdateText').innerHTML = startDateText
          document.getElementById('startDate-text').innerHTML = startDateText
          console.log("Start Date:", startDateText);
        }
      });

      $("#end-date-container").datepicker({
        dateFormat: "yy-mm-dd",
        onSelect: function(selectedDate) {
          endDateText = "";
          endDateText = selectedDate;
          console.log("selecteddd end", endDateText)
          $("#start-date-container").datepicker("option", "maxDate", selectedDate);
          document.getElementById('enddateText').innerHTML = endDateText
          document.getElementById('endDate-text').innerHTML = endDateText
          console.log("Custom Range Selected:");
          console.log("End Date:", endDateText);
        }
      });
    } else {
      $('.selectedDateContainer').hide();
      $("#btn-block").hide()
      console.log("date outside", $(this).val())
      $("#custom-range").hide();
      $(".custom-range-datepick").removeClass('flex-important');
      $(".custom-range-datepick").hide().addClass('hidden-important');
      getFilterDataAward();

    }
  });
  $("#custom-range").hide();
  $("#date-range-options").val("").trigger('change');

  $("#apply-btn-date").click(function() {
    console.log("inside apply btn")
    const selectedOption = $("#date-range-options").val();
    console.log("selectedOpy", selectedOption)
    if (selectedOption === "custom") {
      $("#date-range-options").select2('close');
      $("#custom-range").hide();
      getFilterDataAward();
      $('.selectedDateContainer').show();
    } else {
      console.log("Selected Option:", selectedOption);
      $('.selectedDateContainer').hide();
    }
  });

  $("#cancel-btn-date").click(function() {
    $("#custom-range").hide();
    $("#date-range-options").val("").trigger('change');
    $("#startdateText").text("");
    $("#enddateText").text("");
    $("#date-range-options").select2('open');
    filterRequest.startDate = null;
    filterRequest.endDate = null;

  })

  $("#reset-btn-date").click(function() {
    $("#custom-range").hide();
    $("#date-range-options").val("").trigger('change');
    $("#startdateText").text("");
    $("#enddateText").text("");
    $("#startDate-text").text("");
    $("#endDate-text").text("");
    $(".selectedDateContainer").hide();
  })

});


function getFilterDataAward() {
  console.log("calls api")
}

Code:
 #custom-range {
            z-index: 99999;
            position: absolute;
            display: none;
            background-color: #fff;
            padding: 10px 2px 5px 2px;
            border: 1px solid #000;
        }

Code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- Include Select2 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<!-- Include jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Include Select2 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/js/select2.min.js"></script>

<div id="date-range-selector">
  <div class="drop-header-date">Date Range</div>
  <select id="date-range-options" style="width: 200px;">
    <option></option>
    <option value="week" onclick="getFilterDataAward()">Week</option>
    <option value="month" onclick="getFilterDataAward()">Month</option>
    <option value="year" onclick="getFilterDataAward()">Year</option>
    <option value="custom" onclick="getFilterDataAward()">Custom Range</option>
  </select>
  <div class="selectedDateContainer"><span class="startdate-box">Start Date<span
                        id='startDate-text'></span></span><span class="enddate-box"><span>End Date</span><span id='endDate-text'></span></span>
  </div>
  <div id="custom-range">
    <div class="custom-range-datepick">
      <div id="start-date-container" class="datepicker">
        <label for="start-date">Start Date:</label><span id="startdateText"></span>
      </div>
      <div id="end-date-container" class="datepicker">
        <label for="end-date">End Date:</label><span id="enddateText"></span>
      </div>
    </div>
    <div id="btn-block" style="margin-top: 8px; margin-bottom:5px; text-align: right; font-size: 14px;">
      <button id="reset-btn-date" style="display: inline-block;">Reset</button><button id="cancel-btn-date" style="display: inline-block;">Cancel</button><button id="apply-btn-date" style="display: inline-block;">Apply</button>
    </div>
  </div>

</div>

I am using select2 library for implementaion of date dropdown, Having the issue that if clicked on custom option again and again continously, custom date is not opening. For example if I click on custom date option for first time it opens but not for 2nd time. If i click on any other option and then again click on it. It opens up. How to fix it. I want to work it the same way no matter if i click it continuosly. Here is my working code snippet for your reference

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {

///dateee picker
$("#date-range-options").select2({
placeholder: "Select",
minimumResultsForSearch: -1,
closeOnSelect: false,
allowClear: false
});

$("#date-range-options").on('select2:open', function() {
$("#custom-range").hide();
$("#startdatetext").text("");
$("#enddatetext").text("");
$("#startDate-text").text("");
$("#endDate-text").text("");
})

$("#date-range-options").on('select2:select', function() {
console.log("date cal", $(this).val())
selectedDateOpt = $(this).val();
$("#startdatetext").text("");
$("#enddatetext").text("");
$("#startDate-text").text("");
$("#endDate-text").text("");
$('.selectedDateContainer').hide();
if ($(this).val() === "custom") {
console.log("date inside", $(this).val())
$("#custom-range").show();
$("#btn-block").show();
$(".custom-range-datepick").show().addClass('flex-important');
$(".custom-range-datepick").removeClass('hidden-important');
$("#date-range-options").select2('close');
$("#start-date-container").datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(selectedDate) {
startDateText = '';
startDateText = selectedDate;
console.log("selecteddd end", startDateText)
$("#end-date-container").datepicker("option", "minDate", selectedDate);
document.getElementById('startdateText').innerHTML = startDateText
document.getElementById('startDate-text').innerHTML = startDateText
console.log("Start Date:", startDateText);
}
});

$("#end-date-container").datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(selectedDate) {
endDateText = "";
endDateText = selectedDate;
console.log("selecteddd end", endDateText)
$("#start-date-container").datepicker("option", "maxDate", selectedDate);
document.getElementById('enddateText').innerHTML = endDateText
document.getElementById('endDate-text').innerHTML = endDateText
console.log("Custom Range Selected:");
console.log("End Date:", endDateText);
}
});
} else {
$('.selectedDateContainer').hide();
$("#btn-block").hide()
console.log("date outside", $(this).val())
$("#custom-range").hide();
$(".custom-range-datepick").removeClass('flex-important');
$(".custom-range-datepick").hide().addClass('hidden-important');
getFilterDataAward();

}
});
$("#custom-range").hide();
$("#date-range-options").val("").trigger('change');

$("#apply-btn-date").click(function() {
console.log("inside apply btn")
const selectedOption = $("#date-range-options").val();
console.log("selectedOpy", selectedOption)
if (selectedOption === "custom") {
$("#date-range-options").select2('close');
$("#custom-range").hide();
getFilterDataAward();
$('.selectedDateContainer').show();
} else {
console.log("Selected Option:", selectedOption);
$('.selectedDateContainer').hide();
}
});

$("#cancel-btn-date").click(function() {
$("#custom-range").hide();
$("#date-range-options").val("").trigger('change');
$("#startdateText").text("");
$("#enddateText").text("");
$("#date-range-options").select2('open');
filterRequest.startDate = null;
filterRequest.endDate = null;

})

$("#reset-btn-date").click(function() {
$("#custom-range").hide();
$("#date-range-options").val("").trigger('change');
$("#startdateText").text("");
$("#enddateText").text("");
$("#startDate-text").text("");
$("#endDate-text").text("");
$(".selectedDateContainer").hide();
})

});


function getFilterDataAward() {
console.log("calls api")
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code> #custom-range {
z-index: 99999;
position: absolute;
display: none;
background-color: #fff;
padding: 10px 2px 5px 2px;
border: 1px solid #000;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- Include Select2 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<!-- Include jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Include Select2 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/js/select2.min.js"></script>

<div id="date-range-selector">
<div class="drop-header-date">Date Range</div>
<select id="date-range-options" style="width: 200px;">
<option></option>
<option value="week" onclick="getFilterDataAward()">Week</option>
<option value="month" onclick="getFilterDataAward()">Month</option>
<option value="year" onclick="getFilterDataAward()">Year</option>
<option value="custom" onclick="getFilterDataAward()">Custom Range</option>
</select>
<div class="selectedDateContainer"><span class="startdate-box">Start Date<span
id='startDate-text'></span></span><span class="enddate-box"><span>End Date</span><span id='endDate-text'></span></span>
</div>
<div id="custom-range">
<div class="custom-range-datepick">
<div id="start-date-container" class="datepicker">
<label for="start-date">Start Date:</label><span id="startdateText"></span>
</div>
<div id="end-date-container" class="datepicker">
<label for="end-date">End Date:</label><span id="enddateText"></span>
</div>
</div>
<div id="btn-block" style="margin-top: 8px; margin-bottom:5px; text-align: right; font-size: 14px;">
<button id="reset-btn-date" style="display: inline-block;">Reset</button><button id="cancel-btn-date" style="display: inline-block;">Cancel</button><button id="apply-btn-date" style="display: inline-block;">Apply</button>
</div>
</div>

</div></code></pre>
</div>
</div>
</p>
<p>I am using select2 library for implementaion of date dropdown, Having the issue that if clicked on custom option again and again continously, custom date is not opening.
For example if I click on custom date option for first time it opens but not for 2nd time. If i click on any other option and then again click on it. It opens up. How to fix it. I want to work it the same way no matter if i click it continuosly. Here is my working code snippet for your reference</p>
 

Latest posts

Top