CODEWITHSUNDEEP
jquerypluginsdatepicker
Josh Toth
Josh Toth

Reputation: 764

minDate / maxDate with XDSoft's DateTimePicker

I'm utilizing XDSoft's DateTimePicker and I can't make sense of the minDate and maxDate time parameters. http://xdsoft.net/jqplugins/datetimepicker/#mindate

minDate:'-1970/01/02', // yesterday is minimum date(for today use 0 or -1970/01/01)
maxDate:'+1970/01/02'  // tommorow is maximum date calendar

I don't understand how -1970/01/02 translates to yesterday? If I set it to 0, it works for the 'today' limit. But I have two datepickers on the page and I need to update the second one so that it can't be before the first.

How do I implement something like minDate: 2015/01/20?

This is NOT the jQuery UI plugin.

Upvotes: 5

Views: 4040

Answers (3)

WtFudgE
WtFudgE

Reputation: 5228

just set this: 

minDate: "2015/01/20"

works fine for me, only works in this format tho. So u'll need to convert formats in case u use different time formats.

Same with time:

minTime: "11:00"

I have one control which handles as a startdate and another one which has an enddate. The end date has it's mindate modified every time the startdate changes.

Upvotes: 0

GrandMasterFlush
GrandMasterFlush

Reputation: 6409

I've just had a similar problem with the control and didn't find the documentation very helpful. I found the easiest way to set the date was to declare it as a JS date object first and use that to set the minDate:

    var minStartDate = new Date(2015, 09, 26);

    $('#MyDatePicker').datetimepicker({
        format: 'd/m/Y',
        minDate: minStartDate,
        timepicker: false
    });

The above code would set the minimum date to 26-Oct-2015. Remember that the month number on the JS date object is zero indexed; so Jan = 0, Feb = 1 etc...

Upvotes: 2

Razeel Akbar
Razeel Akbar

Reputation: 319

Case: I have two datepickers on the page and I need to update the second one so that it can't be before the first.

Solution: I hope below example would help you!

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="./jquery.datetimepicker.css"/>
</head>
<body>

<p>
	Start 
	<input id="date_timepicker_start" type="text" value=""> 
	 End 
	<input id="date_timepicker_end" type="text" value="">
</p>


<script src="./jquery.js"></script>
<script src="./jquery.datetimepicker.js"></script>
<script>
jQuery(function(){
 jQuery('#date_timepicker_start').datetimepicker({
  format:'Y-m-d H:i',
  onShow:function(ct){
   this.setOptions({
    maxDate:jQuery('#date_timepicker_end').val()?jQuery('#date_timepicker_end').val():false,
    formatDate: 'Y-m-d H:i'
   })
  },
  timepicker:true
 });
 jQuery('#date_timepicker_end').datetimepicker({
  format:'Y-m-d H:i',
  onShow:function(ct){
   this.setOptions({
    minDate:jQuery('#date_timepicker_start').val()?jQuery('#date_timepicker_start').val():false,
    formatDate: 'Y-m-d H:i'
   })
  },
  timepicker:true
 });
});
</script>
</body>

Upvotes: 2

Related Questions