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

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](https://github.com/xdan/datetimepicker/issues/232)** reported which **hasn't been fixed**. I suggest to choose some other plugin which is more supportive.. — Guruprasad J Rao, Jun 08 '17 at 13:20
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. https://jqueryui.com/datepicker/ — hack3rfx, Jun 08 '17 at 13:26

score 2 · Answer 1 · answered Jun 08 '17 at 13:27

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/

i used your jsfiddle. but xdsoft does have onSelectDate function. so you can do similar. read Full options list at http://xdsoft.net/jqplugins/datetimepicker/ — tech2017, Jun 08 '17 at 14:08

hasan · Answer 2 · 2017-06-08T13:31:32.257

0

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"/>

edited Jun 08 '17 at 13:31

answered Jun 08 '17 at 13:23

hasan

3,484
1
16
23

Thanks, while this works, I am locked in to using the xdsoft plugin at the moment because it is used across the site :( – Jalapeno Jack Jun 08 '17 at 14:09
you can also use this answer by getting date value with jquery – hasan Jun 08 '17 at 14:11

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

2 Answers2