|
177 | 177 | var mdDatePickerFlag = 'data-mdpersiandatetimepicker', |
178 | 178 | mdDatePickerFlagSelector = '[' + mdDatePickerFlag + ']', |
179 | 179 | mdDatePickerGroupIdAttribute = 'data-mdpersiandatetimepicker-group', |
180 | | - mdDatePickerPopoverFlag = 'data-mdpersiandatetimepicker-popover', |
181 | | - mdDatePickerPopoverSelector = '[' + mdDatePickerPopoverFlag + ']', |
| 180 | + mdDatePickerElementFlag = 'data-mdpersiandatetimepicker-element', |
| 181 | + mdDatePickerElementSelector = '[' + mdDatePickerElementFlag + ']', |
182 | 182 | mdDatePickerContainerFlag = 'data-mdpersiandatetimepicker-container', |
183 | 183 | mdDatePickerContainerSelector = '[' + mdDatePickerContainerFlag + ']', |
184 | 184 | mdPluginName = 'MdPersianDateTimePicker', |
185 | 185 | triggerStart = false; |
186 | 186 |
|
| 187 | + var modalHtmlTemplate = ` |
| 188 | +<div class="modal fade mds-bootstrap-persian-datetime-picker-modal" tabindex="-1" role="dialog" aria-labelledby="mdDateTimePickerModalLabel" aria-hidden="true" |
| 189 | + ${mdDatePickerElementFlag}> |
| 190 | + <div class="modal-dialog modal-xl"> |
| 191 | + <div class="modal-content"> |
| 192 | + <div class="modal-body" data-name="mds-datetimepicker-body"> |
| 193 | + MD DateTimePicker Html |
| 194 | + </div> |
| 195 | + </div> |
| 196 | + </div> |
| 197 | +</div> |
| 198 | +`; |
| 199 | + |
| 200 | + |
187 | 201 | var popverHtmlTemplate = ` |
188 | | -<div class="popover mds-bootstrap-persian-datetime-picker-popover" role="tooltip" ${mdDatePickerPopoverFlag}> |
| 202 | +<div class="popover mds-bootstrap-persian-datetime-picker-popover" role="tooltip" ${mdDatePickerElementFlag}> |
189 | 203 | <div class="arrow"></div> |
190 | 204 | <h3 class="popover-header text-center" data-name="mds-datetimepicker-title"></h3> |
191 | | - <div class="popover-body p-0" data-name="mds-datetimepicker-popoverbody"></div> |
192 | | -</div> |
193 | | - `; |
| 205 | + <div class="popover-body p-0" data-name="mds-datetimepicker-body"></div> |
| 206 | +</div>`; |
194 | 207 |
|
195 | 208 | var popoverHeaderSelectYearHtmlTemplate = ` |
196 | 209 | <table class="table table-sm table-borderless text-center p-0 m-0 {{rtlCssClass}}"> |
|
205 | 218 | <a href="javascript:void(0)" title="{{nextText}}" data-year="{{latestNextYear}}" data-yearrangebuttonchange="1"> > </a> |
206 | 219 | </th> |
207 | 220 | </tr> |
208 | | -</table> |
209 | | - `; |
| 221 | +</table>`; |
210 | 222 |
|
211 | 223 | var dateTimePickerYearsToSelectHtmlTemplate = ` |
212 | 224 | <table class="table table-sm text-center p-0 m-0"> |
213 | 225 | <tbody> |
214 | 226 | {{yearsToSelectHtml}} |
215 | 227 | </tbody> |
216 | | -</table> |
217 | | - `; |
| 228 | +</table>`; |
218 | 229 |
|
219 | 230 | var dateTimePickerHtmlTemplate = ` |
220 | 231 | <div class="mds-bootstrap-persian-datetime-picker-container {{rtlCssClass}}" ${mdDatePickerContainerFlag}> |
|
448 | 459 | var $popoverDescriber = $element.parents(mdDatePickerFlagSelector + ':first'); // inline |
449 | 460 | // not inline |
450 | 461 | if ($popoverDescriber.length <= 0) { |
451 | | - $popoverDescriber = $element.parents(mdDatePickerPopoverSelector + ':first'); |
| 462 | + $popoverDescriber = $element.parents(mdDatePickerElementSelector + ':first'); |
452 | 463 | $popoverDescriber = $('[aria-describedby="' + $popoverDescriber.attr('id') + '"]'); |
453 | 464 | } |
454 | 465 | return $popoverDescriber; |
|
481 | 492 | if (isPopoverDescriber($element)) { |
482 | 493 | getPopover($element).find('[data-name="mds-datetimepicker-title"]').html(htmlString); |
483 | 494 | } else { |
484 | | - $element.parents(mdDatePickerPopoverSelector + ':first').find('[data-name="mds-datetimepicker-title"]').html(htmlString); |
| 495 | + $element.parents(mdDatePickerElementSelector + ':first').find('[data-name="mds-datetimepicker-title"]').html(htmlString); |
485 | 496 | } |
486 | 497 | } else { |
487 | 498 | var $inlineTitleBox = $element.parents(mdDatePickerFlagSelector + ':first').find('[data-name="dateTimePickerYearsButtonsContainer"]'); |
|
498 | 509 | var calendarHtml = getDateTimePickerHtml(setting), |
499 | 510 | $container = setting.inLine ? |
500 | 511 | $element.parents(mdDatePickerFlagSelector + ':first') : |
501 | | - $element.parents('[data-name="mds-datetimepicker-popoverbody"]:first'); |
| 512 | + $element.parents('[data-name="mds-datetimepicker-body"]:first'); |
502 | 513 | setPopoverHeaderHtml($element, setting.inLine, $(calendarHtml).find('[data-selecteddatestring]').text().trim()); |
503 | 514 | $container.html(calendarHtml); |
504 | 515 | } |
|
664 | 675 | } |
665 | 676 |
|
666 | 677 | function hideOthers($exceptThis) { |
667 | | - $(mdDatePickerPopoverSelector).each(function () { |
| 678 | + $(mdDatePickerElementSelector).each(function () { |
668 | 679 | var $thisPopover = $(this); |
669 | 680 | if (!$exceptThis && $exceptThis.is($thisPopover)) return; |
670 | 681 | hidePopover($thisPopover); |
|
1723 | 1734 | } |
1724 | 1735 | setSetting1($this, setting); |
1725 | 1736 | if (setting.rangeSelectorStartDate != undefined && setting.rangeSelectorEndDate != undefined) { |
1726 | | - if (!setting.inLine) hidePopover($(mdDatePickerPopoverSelector)); |
| 1737 | + if (!setting.inLine) hidePopover($(mdDatePickerElementSelector)); |
1727 | 1738 | else updateCalendarHtml1($this, setting); |
1728 | 1739 | } |
1729 | 1740 | return; |
|
1737 | 1748 | } |
1738 | 1749 | setSetting1($this, setting); |
1739 | 1750 | setSelectedData(setting); |
1740 | | - if (!setting.inLine) hidePopover($(mdDatePickerPopoverSelector)); |
| 1751 | + if (!setting.inLine) hidePopover($(mdDatePickerElementSelector)); |
1741 | 1752 | else if (setting.inLine && (setting.toDate || setting.fromDate)) { |
1742 | 1753 | // وقتی در حالت این لاین هستیم و ' ار تاریخ ' تا تاریخ ' داریم |
1743 | 1754 | // وقتی روی روز یکی از تقویم ها کلیک می شود |
|
1902 | 1913 | var $target = $(e.target), |
1903 | 1914 | $popoverDescriber = getPopoverDescriber($target); |
1904 | 1915 | if ($popoverDescriber.length >= 1 || isCalendarOpen($target)) return; |
1905 | | - hidePopover($(mdDatePickerPopoverSelector)); |
| 1916 | + hidePopover($(mdDatePickerElementSelector)); |
1906 | 1917 | }); |
1907 | 1918 |
|
1908 | 1919 | //#endregion |
|
1940 | 1951 | disableAfterDate: undefined, |
1941 | 1952 | rangeSelector: false, |
1942 | 1953 | rangeSelectorStartDate: undefined, |
1943 | | - rangeSelectorEndDate: undefined |
| 1954 | + rangeSelectorEndDate: undefined, |
| 1955 | + modalMode: false |
1944 | 1956 | }, options); |
1945 | 1957 | $this.attr(mdDatePickerFlag, ''); |
1946 | 1958 | if (setting.targetDateSelector) { |
|
1982 | 1994 | // نمایش تقویم |
1983 | 1995 | if (setting.inLine) { |
1984 | 1996 | $this.append(getDateTimePickerHtml(setting)); |
1985 | | - } else { |
| 1997 | + } else if (!setting.modalMode) { |
1986 | 1998 | $this.popover({ |
1987 | 1999 | container: 'body', |
1988 | 2000 | content: '', |
|
2006 | 2018 | setting.selectedDateToShow = setting.selectedDate != undefined ? getClonedDate(setting.selectedDate) : new Date(); |
2007 | 2019 | var calendarHtml = getDateTimePickerHtml(setting); |
2008 | 2020 | setPopoverHeaderHtml($this, setting.inLine, $(calendarHtml).find('[data-selecteddatestring]').text().trim()); |
2009 | | - getPopover($this).find('[data-name="mds-datetimepicker-popoverbody"]').html(calendarHtml); |
| 2021 | + getPopover($this).find('[data-name="mds-datetimepicker-body"]').html(calendarHtml); |
2010 | 2022 | $this.popover('update'); |
2011 | 2023 | triggerStart = false; |
2012 | 2024 | }, 10); |
2013 | 2025 | }); |
| 2026 | + } else if (setting.modalMode) { |
| 2027 | + $('body').append(modalHtmlTemplate); |
| 2028 | + $this.on('click', function () { |
| 2029 | + if (setting.disabled) { |
| 2030 | + return; |
| 2031 | + } |
| 2032 | + setting.selectedDateToShow = setting.selectedDate != undefined ? getClonedDate(setting.selectedDate) : new Date(); |
| 2033 | + var calendarHtml = getDateTimePickerHtml(setting); |
| 2034 | + $(mdDatePickerElementSelector).find('[data-name="mds-datetimepicker-body"]').html(calendarHtml); |
| 2035 | + $(mdDatePickerElementSelector).modal('show'); |
| 2036 | + }); |
2014 | 2037 | } |
2015 | 2038 | $(document).on('change', setting.targetTextSelector, function () { |
2016 | 2039 | if (triggerChangeCalling) { |
|
0 commit comments