Ttdfjt

Airline power sockets shut down when I plug my computer in. How can I avoid that?

Spongy green glass found on graves

Why should P.I be willing to write strong LOR even if that means losing a undergraduate from his/her lab?

What exactly happened to the 18 crew members who were reported as "missing" in "Q Who"?

Are there any OR challenges that are similar to kaggle's competitions?

From where do electrons gain kinetic energy through a circuit?

Gofer work in exchange for Letter of Recommendation

Regression when x and y each have uncertainties

Rotate List by K places

Earliest evidence of objects intended for future archaeologists?

When does The Truman Show take place?

Will some rockets really collapse under their own weight?

How do I answer an interview question about how to handle a hard deadline I won't be able to meet?

Designing a prison for a telekinetic race

Is this bar slide trick shown on Cheers real or a visual effect?

Can planar set contain even many vertices of every unit equilateral triangle?

Does the Temple of the Gods spell nullify critical hits?

Output with the same length always

Pocket Clarketech

May the tower use the runway while an emergency aircraft is inbound?

Adding things to bunches of things vs multiplication

Can an ally use your Shadow Blade without it dissipating?

How do the Durable and Dwarven Fortitude feats interact?

Check disk usage of files returned with spaces

Magento 2 When Add Date-picker On Frontend Custom Form

How to add datepicker in magento 2 frontend formJS errors Magento 2Add to cart is not working: Uncaught TypeErrorUncaught TypeError: Cannot read property 'apply' of undefined at Function.ko.observableArray.fn.(anonymous function) [as push]jQuery UI breaks when clicking on draggable element: “Cannot read property 'defaultView' of undefined”Magento 2 - Display product collections some column using knockout js bindingPassword Strength Meter - Uncaught TypeError: Cannot read property 'toLowerCase' of undefinedDatepicker issue in Magento 1Magento 2 paytabs Uncaught TypeError: Cannot read property 'removeAttribute' of undefinedCannot read property 'click' of undefined In magento 2 phtml fileMagento2: custom validation Error “Uncaught TypeError: Cannot read property 'call' of undefined”

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

2

When i try to add date-picker on custom frontend form then give some

Uncaught TypeError: Cannot read property 'call' of undefined
at HTMLInputElement.$.datepicker._showDatepicker (calendar.js:549)
at HTMLInputElement.dispatch (jquery.js:5226)
at HTMLInputElement.elemData.handle

I try following code

 <input type="text" name="datepicker" id="datepicker" value="" class="datepicker">
<script>
 require(["jquery", "mage/calendar"], function($)
 $("#datepicker").datepicker(
 showMonthAfterYear: false,
 dateFormat:'mm/dd/yy',
 changeMonth: true,
 changeYear: true,
 yearRange: '2000:2020',
 )
 );
</script>

magento2 jquery datepicker

share|improve this question

asked Aug 6 at 10:41

Chirag GondaliyaChirag Gondaliya

1061111 bronze badges

add a comment | 

2

When i try to add date-picker on custom frontend form then give some

Uncaught TypeError: Cannot read property 'call' of undefined
at HTMLInputElement.$.datepicker._showDatepicker (calendar.js:549)
at HTMLInputElement.dispatch (jquery.js:5226)
at HTMLInputElement.elemData.handle

I try following code

 <input type="text" name="datepicker" id="datepicker" value="" class="datepicker">
<script>
 require(["jquery", "mage/calendar"], function($)
 $("#datepicker").datepicker(
 showMonthAfterYear: false,
 dateFormat:'mm/dd/yy',
 changeMonth: true,
 changeYear: true,
 yearRange: '2000:2020',
 )
 );
</script>

magento2 jquery datepicker

share|improve this question

asked Aug 6 at 10:41

Chirag GondaliyaChirag Gondaliya

1061111 bronze badges

add a comment | 

When i try to add date-picker on custom frontend form then give some

Uncaught TypeError: Cannot read property 'call' of undefined
at HTMLInputElement.$.datepicker._showDatepicker (calendar.js:549)
at HTMLInputElement.dispatch (jquery.js:5226)
at HTMLInputElement.elemData.handle

I try following code

 <input type="text" name="datepicker" id="datepicker" value="" class="datepicker">
<script>
 require(["jquery", "mage/calendar"], function($)
 $("#datepicker").datepicker(
 showMonthAfterYear: false,
 dateFormat:'mm/dd/yy',
 changeMonth: true,
 changeYear: true,
 yearRange: '2000:2020',
 )
 );
</script>

magento2 jquery datepicker

share|improve this question

asked Aug 6 at 10:41

Chirag GondaliyaChirag Gondaliya

1061111 bronze badges

 <input type="text" name="datepicker" id="datepicker" value="" class="datepicker">
<script>
 require(["jquery", "mage/calendar"], function($)
 $("#datepicker").datepicker(
 showMonthAfterYear: false,
 dateFormat:'mm/dd/yy',
 changeMonth: true,
 changeYear: true,
 yearRange: '2000:2020',
 )
 );
</script>

share|improve this question

asked Aug 6 at 10:41

Chirag GondaliyaChirag Gondaliya

1061111 bronze badges

share|improve this question

asked Aug 6 at 10:41

Chirag GondaliyaChirag Gondaliya

1061111 bronze badges

asked Aug 6 at 10:41

Chirag GondaliyaChirag Gondaliya

1061111 bronze badges

asked Aug 6 at 10:41

Chirag GondaliyaChirag Gondaliya

1061111 bronze badges

2 Answers
2

active

oldest

votes

1

This code works for me. Just put the code in your phtml template file.

<label for="signup_date" class="label">
 <span><?php /* @escapeNotVerified */ echo __('Date') ?></span>
 </label>
 <div class="control">
 <?=
 $block->getLayout()->createBlock('MagentoFrameworkViewElementHtmlDate')
 ->setData([
 'extra_params' => $viewModel->getHtmlExtraParams(),
 'name' => 'signup_date',
 'id' => 'signup_date',
 'value' => "",
 'date_format' => 'dd-mm-yyyy',
 'image' => $this->getViewFileUrl('Magento_Theme::calendar.png'),
 'years_range' => '-120y:c+nn',
 'change_month' => 'true',
 'change_year' => 'true',
 'show_on' => 'both',
 ])
 ->toHtml()
 ?>
 </div>

share|improve this answer

answered Aug 6 at 11:51

MitroMitro

31677 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It's work for me thank a lot.
  
  – Chirag Gondaliya
  Aug 6 at 13:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  We can set minDate in this code?
  
  – Chirag Gondaliya
  Aug 6 at 13:52
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes you can use like this 'min_date' => $this->getMinDate()
  
  – Mitro
  Aug 7 at 8:17
  

  
  
  
  

add a comment | 

1

Try This :-

<input type="text"
 name="datepicker"
 id="datepicker"
 value=""
 class="datepicker"/>
<script type="text/javascript">
 require([
 'jquery',
 'mage/calendar'
 ], function ($, script) 
 $("#datepicker").datepicker(
 showMonthAfterYear: false,
 dateFormat: 'mm/dd/yy',
 changeMonth: true,
 changeYear: true,
 yearRange: '2000:2020',
 );
 );
</script>

share|improve this answer

answered Aug 6 at 10:50

Rk RathodRk Rathod

3,03844 silver badges2626 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Try but the same result gives error
  
  – Chirag Gondaliya
  Aug 6 at 10:59
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  try to clean cache or s:s:d -f
  
  – Rk Rathod
  Aug 6 at 11:08
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  all done clean cache, flush cache and also try deploy but same error
  
  – Chirag Gondaliya
  Aug 6 at 11:09
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "479"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f284554%2fmagento-2-when-add-date-picker-on-frontend-custom-form%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

This code works for me. Just put the code in your phtml template file.

<label for="signup_date" class="label">
 <span><?php /* @escapeNotVerified */ echo __('Date') ?></span>
 </label>
 <div class="control">
 <?=
 $block->getLayout()->createBlock('MagentoFrameworkViewElementHtmlDate')
 ->setData([
 'extra_params' => $viewModel->getHtmlExtraParams(),
 'name' => 'signup_date',
 'id' => 'signup_date',
 'value' => "",
 'date_format' => 'dd-mm-yyyy',
 'image' => $this->getViewFileUrl('Magento_Theme::calendar.png'),
 'years_range' => '-120y:c+nn',
 'change_month' => 'true',
 'change_year' => 'true',
 'show_on' => 'both',
 ])
 ->toHtml()
 ?>
 </div>

share|improve this answer

answered Aug 6 at 11:51

MitroMitro

31677 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It's work for me thank a lot.
  
  – Chirag Gondaliya
  Aug 6 at 13:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  We can set minDate in this code?
  
  – Chirag Gondaliya
  Aug 6 at 13:52
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes you can use like this 'min_date' => $this->getMinDate()
  
  – Mitro
  Aug 7 at 8:17
  

  
  
  
  

add a comment | 

1

This code works for me. Just put the code in your phtml template file.

<label for="signup_date" class="label">
 <span><?php /* @escapeNotVerified */ echo __('Date') ?></span>
 </label>
 <div class="control">
 <?=
 $block->getLayout()->createBlock('MagentoFrameworkViewElementHtmlDate')
 ->setData([
 'extra_params' => $viewModel->getHtmlExtraParams(),
 'name' => 'signup_date',
 'id' => 'signup_date',
 'value' => "",
 'date_format' => 'dd-mm-yyyy',
 'image' => $this->getViewFileUrl('Magento_Theme::calendar.png'),
 'years_range' => '-120y:c+nn',
 'change_month' => 'true',
 'change_year' => 'true',
 'show_on' => 'both',
 ])
 ->toHtml()
 ?>
 </div>

share|improve this answer

answered Aug 6 at 11:51

MitroMitro

31677 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It's work for me thank a lot.
  
  – Chirag Gondaliya
  Aug 6 at 13:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  We can set minDate in this code?
  
  – Chirag Gondaliya
  Aug 6 at 13:52
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes you can use like this 'min_date' => $this->getMinDate()
  
  – Mitro
  Aug 7 at 8:17
  

  
  
  
  

add a comment | 

This code works for me. Just put the code in your phtml template file.

<label for="signup_date" class="label">
 <span><?php /* @escapeNotVerified */ echo __('Date') ?></span>
 </label>
 <div class="control">
 <?=
 $block->getLayout()->createBlock('MagentoFrameworkViewElementHtmlDate')
 ->setData([
 'extra_params' => $viewModel->getHtmlExtraParams(),
 'name' => 'signup_date',
 'id' => 'signup_date',
 'value' => "",
 'date_format' => 'dd-mm-yyyy',
 'image' => $this->getViewFileUrl('Magento_Theme::calendar.png'),
 'years_range' => '-120y:c+nn',
 'change_month' => 'true',
 'change_year' => 'true',
 'show_on' => 'both',
 ])
 ->toHtml()
 ?>
 </div>

share|improve this answer

answered Aug 6 at 11:51

MitroMitro

31677 bronze badges

<label for="signup_date" class="label">
 <span><?php /* @escapeNotVerified */ echo __('Date') ?></span>
 </label>
 <div class="control">
 <?=
 $block->getLayout()->createBlock('MagentoFrameworkViewElementHtmlDate')
 ->setData([
 'extra_params' => $viewModel->getHtmlExtraParams(),
 'name' => 'signup_date',
 'id' => 'signup_date',
 'value' => "",
 'date_format' => 'dd-mm-yyyy',
 'image' => $this->getViewFileUrl('Magento_Theme::calendar.png'),
 'years_range' => '-120y:c+nn',
 'change_month' => 'true',
 'change_year' => 'true',
 'show_on' => 'both',
 ])
 ->toHtml()
 ?>
 </div>

share|improve this answer

answered Aug 6 at 11:51

MitroMitro

31677 bronze badges

answered Aug 6 at 11:51

MitroMitro

31677 bronze badges

answered Aug 6 at 11:51

MitroMitro

31677 bronze badges

1

Try This :-

<input type="text"
 name="datepicker"
 id="datepicker"
 value=""
 class="datepicker"/>
<script type="text/javascript">
 require([
 'jquery',
 'mage/calendar'
 ], function ($, script) 
 $("#datepicker").datepicker(
 showMonthAfterYear: false,
 dateFormat: 'mm/dd/yy',
 changeMonth: true,
 changeYear: true,
 yearRange: '2000:2020',
 );
 );
</script>

share|improve this answer

answered Aug 6 at 10:50

Rk RathodRk Rathod

3,03844 silver badges2626 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Try but the same result gives error
  
  – Chirag Gondaliya
  Aug 6 at 10:59
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  try to clean cache or s:s:d -f
  
  – Rk Rathod
  Aug 6 at 11:08
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  all done clean cache, flush cache and also try deploy but same error
  
  – Chirag Gondaliya
  Aug 6 at 11:09
  

  
  
  
  

add a comment | 

1

Try This :-

<input type="text"
 name="datepicker"
 id="datepicker"
 value=""
 class="datepicker"/>
<script type="text/javascript">
 require([
 'jquery',
 'mage/calendar'
 ], function ($, script) 
 $("#datepicker").datepicker(
 showMonthAfterYear: false,
 dateFormat: 'mm/dd/yy',
 changeMonth: true,
 changeYear: true,
 yearRange: '2000:2020',
 );
 );
</script>

share|improve this answer

answered Aug 6 at 10:50

Rk RathodRk Rathod

3,03844 silver badges2626 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Try but the same result gives error
  
  – Chirag Gondaliya
  Aug 6 at 10:59
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  try to clean cache or s:s:d -f
  
  – Rk Rathod
  Aug 6 at 11:08
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  all done clean cache, flush cache and also try deploy but same error
  
  – Chirag Gondaliya
  Aug 6 at 11:09
  

  
  
  
  

add a comment | 

Try This :-

<input type="text"
 name="datepicker"
 id="datepicker"
 value=""
 class="datepicker"/>
<script type="text/javascript">
 require([
 'jquery',
 'mage/calendar'
 ], function ($, script) 
 $("#datepicker").datepicker(
 showMonthAfterYear: false,
 dateFormat: 'mm/dd/yy',
 changeMonth: true,
 changeYear: true,
 yearRange: '2000:2020',
 );
 );
</script>

share|improve this answer

answered Aug 6 at 10:50

Rk RathodRk Rathod

3,03844 silver badges2626 bronze badges

<input type="text"
 name="datepicker"
 id="datepicker"
 value=""
 class="datepicker"/>
<script type="text/javascript">
 require([
 'jquery',
 'mage/calendar'
 ], function ($, script) 
 $("#datepicker").datepicker(
 showMonthAfterYear: false,
 dateFormat: 'mm/dd/yy',
 changeMonth: true,
 changeYear: true,
 yearRange: '2000:2020',
 );
 );
</script>

share|improve this answer

answered Aug 6 at 10:50

Rk RathodRk Rathod

3,03844 silver badges2626 bronze badges

answered Aug 6 at 10:50

Rk RathodRk Rathod

3,03844 silver badges2626 bronze badges

answered Aug 6 at 10:50

Rk RathodRk Rathod

3,03844 silver badges2626 bronze badges