How to dynamically change minimumDate value of 2nd datePicker of a form

[Chandan Sharma, modifié il y a 7 années.]

Hi All,

I came around a requirement where I want to dynamically change the minimumDate value of 2nd datepicker of my form, which is based on value of my 1st datepicker.

Details
From DatePicker: minimum date should be today date
To DatePicker: minimum date should be From DatePicker value

I tried Something like this:

HTML

<aui:form name="dateForm" id="dateForm" method="post" usenamespace="true">
	<div id="#<portlet:namespace />startDatePicker">
		<aui:input name="startDate" maxlength="10" title="Est. Start Date" id="startDate" required="true" inlineLabel="true" label="Est. Start Date" style="margin-left: -1px;" />
	 </div>
	 <div style="padding-left:3px;" id="#<portlet:namespace />endDatePicker">
	 	<aui:input name="endDate" maxlength="10" title="Est. End Date" label="Est. End Date" id="backlogEndDate" required="true" onClick="onClickOfEndDate();" style="margin-left: -1px;" />
	 </div>
</aui:form>

AUI Script

var d = new Date();
var m = (d.getMonth()+1);
var t = d.getDate();
var y = d.getFullYear();
var s = y + "/" + m + "/" + t;
var fromDate = stringToDate(s,"yyyy/mm/dd","/");
var toDate = stringToDate(s,"yyyy/mm/dd","/");

var toDatepicker;
AUI().use('aui-datepicker', function(A) {
   var simpleDatepicker1 = new A.DatePicker({
     trigger: '#<portlet:namespace />startDate', 
      popover: {
     	 zIndex: 9999
      },
      on: {
        selectionChange: function(event) {
          	d = new Date(event.newSelection);
        	m = (d.getMonth()+1);
        	t = d.getDate();
        	y = d.getFullYear();
        	s = y + "/" + m + "/" + t;
        	toDate = stringToDate(s,"yyyy/mm/dd","/");
        }
      },
      mask: '%Y-%m-%d',
       calendar: {
         dateFormat: '%Y-%m-%d',
         minimumDate: fromDate,
     },
    }).render('##<portlet:namespace />startDatePicker');
});
   
function setEndDate(){
	AUI().use('aui-datepicker', function(A) {
        toDatepicker = new A.DatePicker({
        trigger: '#<portlet:namespace />endDate', 
         popover: {
        	 zIndex: 9999
         },
         mask: '%Y-%m-%d',
         calendar: {
            dateFormat: '%Y-%m-%d',
            minimumDate: toDate,
        },
      }).render('##<portlet:namespace />endDatePicker');
   });
}

function onClickOfEndDate(){
	setEndDate();
}

function stringToDate(_date,_format,_delimiter) {
    var formatLowerCase=_format.toLowerCase();
    var formatItems=formatLowerCase.split(_delimiter);
    var dateItems=_date.split(_delimiter);
    var monthIndex=formatItems.indexOf("mm");
    var dayIndex=formatItems.indexOf("dd");
    var yearIndex=formatItems.indexOf("yyyy");
    var month=parseInt(dateItems[monthIndex]);
    month-=1;
    var formatedDate = new Date(dateItems[yearIndex],month,dateItems[dayIndex]);
    return formatedDate;
 }

Any suggestion ?

[Kyle Joseph Stiemann, modifié il y a 7 années.]

You can set a DatePicker's minimumDate by getting its internal calendar and setting the minimum date on it:

toDatePicker.getCalendar().set('minimumDate', minDate);

You may also want to consider using liferay-ui:input-date instead.

- Kyle

[Chandan Sharma, modifié il y a 7 années.]

Kyle Joseph Stiemann:

toDatePicker.getCalendar().set('minimumDate', minDate);

It seems like calendar is not updating. Still it is showing previous minDate (which is configured for very 1st time). Means,

• For the 1st time when you open 1st datePicker select any date thereafter click on 2nd datePicker then it is showing minimum date as From DatePicker value (which is CORRECT)
• But from 2nd time onwards i.e. if user again changes date of 1st datePicker and than select 2nd datePicker on such case minimumDate value not getting updated (with current selection) (which is WRONG)

You also said about consider of using liferay-ui:input-date instead. So I am going through it to implement

[Chandan Sharma, modifié il y a 7 années.]

This toDatePicker.getCalendar().set('minimumDate', minDate); look like not working.

I also tried with:
toDatePicker.getCalendar().setAttrs('minimumDate', minDate);
toDatePicker.getCalendar().reset();

But nothing is working

[Kyle Joseph Stiemann, modifié il y a 7 années.]

Hi Chandan,
Could you post the shortest, simplest code that reproduces your issue. I've created a simple runnable JSBin example that seems to work, so please let me know what you are doing differently.

- Kyle

[Chandan Sharma, modifié il y a 7 années.]

Hello Kyle Joseph Stiemann,

Thanks for your help. Your suggested approach worked for me.

I am sharing my code here, which may help someone having similar requirement.

Here is my code

  From: <input id="fromDatePicker" type="text">
  To: <input id="toDatePicker" type="text">
  <script type="text/javascript">
  var d = new Date();
  var m = (d.getMonth()+1);
  var t = d.getDate();
  var y = d.getFullYear();
  var s =  m + "/" + t + "/" + y;
  var today = stringToDate(s,"mm/dd/yyyy","/");
  	AUI().use('aui-datepicker', function(Y) {
    
        var toDatePicker;
        var fromDatePicker = new Y.DatePicker({
            trigger: '#fromDatePicker',
            popover: {
                zIndex: 1
            },
            calendar: {
                dateFormat: '%m-%d-%Y',
                minimumDate: today,
            },
            on: {
                selectionChange: function(event) {
                    if (event.newSelection[0]) {
                        toDatePicker.getCalendar().set('minimumDate', event.newSelection[0]);
                    } else {
                        toDatePicker.getCalendar().set('minimumDate', today);
                    }
                }
            }
        });
    
        toDatePicker = new Y.DatePicker({
            trigger: '#toDatePicker',
            popover: {
                zIndex: 1
            },
            calendar: {
                dateFormat: '%m-%d-%Y',
                minimumDate: today,
            },
            on: {
                selectionChange: function(event) {
                    if (event.newSelection[0]) {
                        fromDatePicker.getCalendar().set('minimumDate', today);
                    } else {
                        fromDatePicker.getCalendar().set('minimumDate', today);
                    }
                }
            }
        });
    });
  	
  	function stringToDate(_date,_format,_delimiter) {
  	    var formatLowerCase=_format.toLowerCase();
  	    var formatItems=formatLowerCase.split(_delimiter);
  	    var dateItems=_date.split(_delimiter);
  	    var monthIndex=formatItems.indexOf("mm");
  	    var dayIndex=formatItems.indexOf("dd");
  	    var yearIndex=formatItems.indexOf("yyyy");
  	    var month=parseInt(dateItems[monthIndex]);
  	    month-=1;
  	    var formatedDate = new Date(dateItems[yearIndex],month,dateItems[dayIndex]);
  	    return formatedDate;
  	 }
  </script>

Thanks
~Chandan

[Kyle Joseph Stiemann, modifié il y a 7 années.]

Glad it's working for you! Thanks for posting your solution and for using AlloyUI!

- Kyle

[Kyle Joseph Stiemann, modifié il y a 7 années.]

Sorry to resurrect this thread, but I just wanted to post a new JSBin that will also work correctly for multiple selection in case anyone needs it: http://jsbin.com/zozecaqita/1/edit?html,output.

It only requires a minor change to the fromDatePicker's selectionChange event:

selectionChange: function(event) {
if (event.newSelection[event.newSelection.length - 1]) {
toDatePicker.getCalendar().set('minimumDate',
event.newSelection[event.newSelection.length - 1]);
} else {
toDatePicker.getCalendar().set('minimumDate', null);
}
}

- Kyle