for daterange picker in the form how to set isinvalid date when already applied the callback function for getting the dates on click of apply button

Question

List item

html form

<div class="form-group " id="input-dates">
<input class="form-control date-range-picker" id="dateRange_n" type="text" name="dates" placeholder="<?php echo get_phrase('when'); ?>.." autocomplete="off" required>
<i class="icon_calendar"></i>

i have used the callback function

    function myCallback(start, end) {
                $('#dateRange_n').html(start.format('MM DD, YYYY') + ' - ' + end.format('MM DD, YYYY'));

        }
    let options = {} // you can add more options to this, but need at least this
$('#dateRange_n').daterangepicker(options, myCallback)
  .on("input change", function(e) {
      var days = e.target.value;
    console.log("Date changed: ",days); });

now i want to use isinvalid date function for disable particular date. i have used the following function on document.ready()

 $('#dateRange_n').daterangepicker({
// you can use this optionally -> maxSpan: 50
 
"startDate": today,
 "endDate": today2,
 "minDate": today,
 isInvalidDate: function(ele) {
    var currDate = moment(ele._d).format('MM-DD-YYYY');
    return ["06-15-2021"].indexOf(currDate) != -1;
}

});

it is working but callback function is not working when i add the above function on document ready

```callback function is not working``` Which callback function is not working? There are 3 callback functions in the codes. — ikhvjs, Jun 10 '21 at 07:25
function myCallback(start, end) { $('#dateRange_n').html(start.format('MM DD, YYYY') + ' - ' + end.format('MM DD, YYYY')); } let options = {} // you can add more options to this, but need at least this $('#dateRange_n').daterangepicker(options, myCallback) .on("input change", function(e) { var days = e.target.value; console.log("Date changed: ",days); }); this callback function — Priyanka Patil, Jun 10 '21 at 07:36
Please see my answer. The callback works and you can see the console.log("callback") running — ikhvjs, Jun 10 '21 at 07:53

ikhvjs · Accepted Answer · 2021-06-10T13:12:18.070

0

You can pass the callback function after the option.

Example below

function myCallback(start, end) {
  console.log("callback");
  $("#dateRange_n").html(
    start.format("MM DD, YYYY") + " - " + end.format("MM D, YYYY")
  );
}

let options = {
  startDate: "12-01-2018",
  endDate: "12-01-2023",
  minDate: "10-06-2021",
  isInvalidDate: function (ele) {
    var compareDate = moment(ele);
    var startDate = moment("12/01/2019", "DD/MM/YYYY");
    var endDate = moment("5/06/2021", "DD/MM/YYYY");
    return compareDate.isBetween(startDate, endDate);
  },
};

$("#dateRange_n").daterangepicker(options, myCallback);

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<div class="form-group" id="input-dates">
  <input
    class="form-control date-range-picker"
    id="dateRange_n"
    type="text"
    name="dates"
    placeholder="test...."
    autocomplete="off"
    required
  />
  <i class="icon_calendar"></i>
</div>

edited Jun 10 '21 at 13:12

answered Jun 10 '21 at 07:44

ikhvjs

5,316
2
13
36

can i give range to isInvalidDate to disable the number of dates – Priyanka Patil Jun 10 '21 at 12:57
@PriyankaPatil, https://stackoverflow.com/a/36350827/14032355 does this help? – ikhvjs Jun 10 '21 at 12:59
i want to disable particular date range just like 10-06-2021 to 15-06-2021 – Priyanka Patil Jun 10 '21 at 13:02
@PriyankaPatil, I updated my answer. please see if this is what you want. – ikhvjs Jun 10 '21 at 13:12
thank you so much for your reply but i have to fetch date range from database using ajax & then i have to disable that range. in the database i am having more than 1 date range – Priyanka Patil Jun 10 '21 at 13:34
@PriyankaPatil, I think you should create another question for this. – ikhvjs Jun 10 '21 at 13:42
Thank you for your reply i have created another question for this – Priyanka Patil Jun 10 '21 at 14:00

for daterange picker in the form how to set isinvalid date when already applied the callback function for getting the dates on click of apply button

1 Answers1