Geek Answers Handbook

Show warning if user selects date within next 3 days

I use xdsoft datetimepicker so that users can select a deadline. I would like to show a warning if they choose one of the next 3 days.

I originally set minDate, so these days were not selected, but I would prefer those days to be selected, and a warning window is displayed instead.

I'm not sure if the option for this already exists, I could not find it in the documentation.

This is how I did 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 also installed jsfiddle

Thank you guys, if you could direct me on the right path, it would be very grateful

+6
2

. , . onSelectDate:function( ct ){....., .

$('#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/

+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"/>
Hide result
0

More articles:


All Articles