Show alert if user selects a date within the next 3 days

Question

Im using xdsoft datetimepicker so users can select a deadline. I would like to show an alert if they choose one of the next 3 days.

Initially I had set a minDate so these days were not selectable but I would prefer if these days can be selected and an alert box is shown instead.

I am not sure if there if an option for this already exists, I could not find one in the documentation.

This is how I've been doing it-

html

<h3>Deadline:</h3>
<input type="text" id="datetimepicker"/>

jquery

$('#datetimepicker').datetimepicker({
    timepicker:false,
    format:'d/m/Y',
    formatDate:'Y/m/d',
    minDate:'+1970/01/04',
});

I have also set up a jsfiddle

Thanks guys, if you could steer me in the right path it would be much appreciated

Dzoba

There is an option called onChangeDateTime available but it seems that plugin is bit buggy.. It keeps on calling the alert on change.. Not sure how else you can achieve it.. and here's the issue reported which hasn't been fixed. I suggest to choose some other plugin which is more supportive.. – Multicellular

When using onChangeDateTime or even a custom onChange hook, it acts as though the field is being updated indefinitely. Presumably caused by the plugin. Perhaps the same thing that @GuruprasadRao is saying. If I may, I'd like to recommend jQuery UI's datepicker. It works very well. jqueryui.com/datepicker – Cumulonimbus

I have updated my answer, it works now – Windswept

you can run code snippet :) – Windswept

Answer 1

check this fiddle for solution. I have used hard coded dates but you can do formatting accordingly. There is onSelectDate:function( ct ){..... that you can use.

$('#datetimepicker').datetimepicker({
    timepicker:false,
    format:'d/m/Y',
    formatDate:'Y/m/d',
    minDate:'+1970/01/00',
  onSelectDate:function( ct ){

  var dateFrom = "06/08/2017";
  var dateTo = "06/11/2017";
  var dateCheck = "06/09/2017";

  var d1 = dateFrom.split("/");
  var d2 = dateTo.split("/");
  var c = dateCheck.split("/");

  var from = new Date(d1[2], parseInt(d1[1])-1, d1[0]);  // -1 because months are from 0 to 11
  var to   = new Date(d2[2], parseInt(d2[1])-1, d2[0]);
  var check = new Date(c[2], parseInt(c[1])-1, c[0]);

    alert(check > from && check < to);
  },
});

https://jsfiddle.net/oqw90cbu/5/

Latria

your date values constant ? – Windswept

var dateFrom = "06/08/2017" – Windswept

i used your jsfiddle. but xdsoft does have onSelectDate function. so you can do similar. read Full options list at xdsoft.net/jqplugins/datetimepicker – Latria

Answer 2

Date.prototype.addDays = function(days) {
  var dat = new Date(this.valueOf());
  dat.setDate(dat.getDate() + days);
  return dat;
}

$("#datetimepicker").on("change", function(){
    var date= new Date().addDays(3);
    var selected = new Date($(this).val());
    var current = new Date();
    if(selected > current && selected < date)
    {
        // your code here
        alert("success");
        

    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h3>Deadline:</h3>
<input type="date" id="datetimepicker"/>

Windswept

Thanks, while this works, I am locked in to using the xdsoft plugin at the moment because it is used across the site :( – Dzoba

you can also use this answer by getting date value with jquery – Windswept