Forums

Home » Alloy UI » English

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Chandan Sharma
How to dynamically change minimumDate value of 2nd datePicker of a form
January 12, 2017 2:05 AM
Answer

Chandan Sharma

Rank: Junior Member

Posts: 54

Join Date: March 3, 2014

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
 1<aui:form name="dateForm" id="dateForm" method="post" useNamespace="true">
 2    <div id="#<portlet:namespace />startDatePicker">
 3        <aui:input name="startDate" maxlength="10" title='Est. Start Date'
 4             id="startDate" required="true" inlineLabel="true" label="Est. Start Date"
 5             style="margin-left: -1px;"/>
 6     </div>
 7     <div style="padding-left:3px;" id="#<portlet:namespace />endDatePicker">
 8         <aui:input name="endDate" maxlength="10" title='Est. End Date'
 9            label='Est. End Date' id="backlogEndDate" required="true"
10            onClick="onClickOfEndDate();" style="margin-left: -1px;"/>
11     </div>
12</aui:form>


AUI Script
 1var d = new Date();
 2var m = (d.getMonth()+1);
 3var t = d.getDate();
 4var y = d.getFullYear();
 5var s = y + "/" + m + "/" + t;
 6var fromDate = stringToDate(s,"yyyy/mm/dd","/");
 7var toDate = stringToDate(s,"yyyy/mm/dd","/");
 8
 9var toDatepicker;
10AUI().use('aui-datepicker', function(A) {
11   var simpleDatepicker1 = new A.DatePicker({
12     trigger: '#<portlet:namespace />startDate',
13      popover: {
14          zIndex: 9999
15      },
16      on: {
17        selectionChange: function(event) {
18              d = new Date(event.newSelection);
19            m = (d.getMonth()+1);
20            t = d.getDate();
21            y = d.getFullYear();
22            s = y + "/" + m + "/" + t;
23            toDate = stringToDate(s,"yyyy/mm/dd","/");
24        }
25      },
26      mask: '%Y-%m-%d',
27       calendar: {
28         dateFormat: '%Y-%m-%d',
29         minimumDate: fromDate,
30     },
31    }).render('##<portlet:namespace />startDatePicker');
32});
33   
34function setEndDate(){
35    AUI().use('aui-datepicker', function(A) {
36        toDatepicker = new A.DatePicker({
37        trigger: '#<portlet:namespace />endDate',
38         popover: {
39             zIndex: 9999
40         },
41         mask: '%Y-%m-%d',
42         calendar: {
43            dateFormat: '%Y-%m-%d',
44            minimumDate: toDate,
45        },
46      }).render('##<portlet:namespace />endDatePicker');
47   });
48}
49
50function onClickOfEndDate(){
51    setEndDate();
52}
53
54function stringToDate(_date,_format,_delimiter) {
55    var formatLowerCase=_format.toLowerCase();
56    var formatItems=formatLowerCase.split(_delimiter);
57    var dateItems=_date.split(_delimiter);
58    var monthIndex=formatItems.indexOf("mm");
59    var dayIndex=formatItems.indexOf("dd");
60    var yearIndex=formatItems.indexOf("yyyy");
61    var month=parseInt(dateItems[monthIndex]);
62    month-=1;
63    var formatedDate = new Date(dateItems[yearIndex],month,dateItems[dayIndex]);
64    return formatedDate;
65 }


Any suggestion ?
Kyle Joseph Stiemann
RE: How to dynamically change minimumDate value of 2nd datePicker of a form
January 12, 2017 9:26 AM
Answer

Kyle Joseph Stiemann

LIFERAY STAFF

Rank: Liferay Master

Posts: 573

Join Date: January 14, 2013

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
RE: How to dynamically change minimumDate value of 2nd datePicker of a form
January 16, 2017 4:05 AM
Answer

Chandan Sharma

Rank: Junior Member

Posts: 54

Join Date: March 3, 2014

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
RE: How to dynamically change minimumDate value of 2nd datePicker of a form
January 16, 2017 6:19 AM
Answer

Chandan Sharma

Rank: Junior Member

Posts: 54

Join Date: March 3, 2014

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
RE: How to dynamically change minimumDate value of 2nd datePicker of a form
January 16, 2017 6:42 AM
Answer

Kyle Joseph Stiemann

LIFERAY STAFF

Rank: Liferay Master

Posts: 573

Join Date: January 14, 2013

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
RE: How to dynamically change minimumDate value of 2nd datePicker of a form
January 17, 2017 6:59 AM
Answer

Chandan Sharma

Rank: Junior Member

Posts: 54

Join Date: March 3, 2014

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
 1  From: <input id="fromDatePicker" type="text" />
 2  To: <input id="toDatePicker" type="text" />
 3  <script type="text/javascript">
 4  var d = new Date();
 5  var m = (d.getMonth()+1);
 6  var t = d.getDate();
 7  var y = d.getFullYear();
 8  var s =  m + "/" + t + "/" + y;
 9  var today = stringToDate(s,"mm/dd/yyyy","/");
10      AUI().use('aui-datepicker', function(Y) {
11   
12        var toDatePicker;
13        var fromDatePicker = new Y.DatePicker({
14            trigger: '#fromDatePicker',
15            popover: {
16                zIndex: 1
17            },
18            calendar: {
19                dateFormat: '%m-%d-%Y',
20                minimumDate: today,
21            },
22            on: {
23                selectionChange: function(event) {
24                    if (event.newSelection[0]) {
25                        toDatePicker.getCalendar().set('minimumDate', event.newSelection[0]);
26                    } else {
27                        toDatePicker.getCalendar().set('minimumDate', today);
28                    }
29                }
30            }
31        });
32   
33        toDatePicker = new Y.DatePicker({
34            trigger: '#toDatePicker',
35            popover: {
36                zIndex: 1
37            },
38            calendar: {
39                dateFormat: '%m-%d-%Y',
40                minimumDate: today,
41            },
42            on: {
43                selectionChange: function(event) {
44                    if (event.newSelection[0]) {
45                        fromDatePicker.getCalendar().set('minimumDate', today);
46                    } else {
47                        fromDatePicker.getCalendar().set('minimumDate', today);
48                    }
49                }
50            }
51        });
52    });
53      
54      function stringToDate(_date,_format,_delimiter) {
55          var formatLowerCase=_format.toLowerCase();
56          var formatItems=formatLowerCase.split(_delimiter);
57          var dateItems=_date.split(_delimiter);
58          var monthIndex=formatItems.indexOf("mm");
59          var dayIndex=formatItems.indexOf("dd");
60          var yearIndex=formatItems.indexOf("yyyy");
61          var month=parseInt(dateItems[monthIndex]);
62          month-=1;
63          var formatedDate = new Date(dateItems[yearIndex],month,dateItems[dayIndex]);
64          return formatedDate;
65       }
66  </script>



Thanks
~Chandan
Kyle Joseph Stiemann
RE: How to dynamically change minimumDate value of 2nd datePicker of a form
January 17, 2017 7:29 AM
Answer

Kyle Joseph Stiemann

LIFERAY STAFF

Rank: Liferay Master

Posts: 573

Join Date: January 14, 2013

Recent Posts

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

- Kyle
Kyle Joseph Stiemann
RE: How to dynamically change minimumDate value of 2nd datePicker of a form
January 30, 2017 3:51 PM
Answer

Kyle Joseph Stiemann

LIFERAY STAFF

Rank: Liferay Master

Posts: 573

Join Date: January 14, 2013

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

Participate in the State of Liferay Community 2017. Help the community and even win some prizes!