Forums

angle-left Back

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

Chandan Sharma, modified 1 Year ago.

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

Junior Member Posts: 54 Join Date: 3/3/14 Recent Posts
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, modified 1 Year ago.

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

LIFERAY STAFF Liferay Master Posts: 655 Join Date: 1/14/13 Recent Posts
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, modified 1 Year ago.

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

Junior Member Posts: 54 Join Date: 3/3/14 Recent Posts
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, modified 1 Year ago.

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

Junior Member Posts: 54 Join Date: 3/3/14 Recent Posts
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, modified 1 Year ago.

RE: How to dynamically change minimumDate value of 2nd datePicker of a form (Answer)

LIFERAY STAFF Liferay Master Posts: 655 Join Date: 1/14/13 Recent Posts
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, modified 1 Year ago.

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

Junior Member Posts: 54 Join Date: 3/3/14 Recent Posts
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, modified 1 Year ago.

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

LIFERAY STAFF Liferay Master Posts: 655 Join Date: 1/14/13 Recent Posts
Glad it's working for you! Thanks for posting your solution and for using AlloyUI!

- Kyle
Kyle Joseph Stiemann, modified 1 Year ago.

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

LIFERAY STAFF Liferay Master Posts: 655 Join Date: 1/14/13 Recent Posts
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