Modal Datepicker Dialog

[Sascha_Khan]

Hi *,

I tried to use a datepicker in a modal dialog. But something is wrong.

Please help.

See link:
https://www.myweg.de/ePorto/User/test.php

You have to press button “sofort” in the right top corner.

Thank you.

Best Regards.
Sascha

---

[Support2]

Hello Sascha,

Inspecting your code i saw that you included all scripts of Porto and Porto Admin Extension. Probably this it’s causing a conflict.
In that case, my suggestion for you is initialize the modal manually with JS. For it follow the steps:

1) Change the HTML of button to:

<button class="custom-open-modal" type="button" class="btn btn-borders btn-danger btn-xs" title="Wiedervorlage"><i class="fa fa-calendar"></i> sofort</button>

2) Add in (js/custom.js):

$('.custom-open-modal').on('click', function(){
	$('#smallModal').modal('show');
});

Kind Regards,

Rodrigo.

---

[Sascha_Khan]

Hello Rodrigo,

with your solution is no effect.

Best Regards.
Sascha

---

[Support2]

Hello Sascha,

In our tests here works.
Please, add the changes that i sent for you before, on the test link that you provided for us.

Kind Regards,

Rodrigo.

---

• This reply was modified 6 years, 5 months ago by Support2.

[Sascha_Khan]

Hello Rodrigo,

I implemented your solution. Try the link again.

Best Regards,
Sascha

---

[Sascha_Khan]

Hello Rodrigo,

How can I use the datepicker in the modal dialog?

Best Regards,
Sascha

---

[Support2]

Hello Sascha,

Just put the datepicker HTML code inside the modal “body”:

<div class="modal-body">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p>
	<div class="col-md-12">
		<div class="input-group">
			<span class="input-group-addon">
				<i class="fa fa-calendar"></i>
			</span>
			<input type="text" data-plugin-datepicker class="form-control">
		</div>
	</div>
</div>

Regarding my previous solution for modal, i opened your test link now here and it’s working.
Try to clear your browser cache.

Kind Regards,

Rodrigo.

---

[Sascha_Khan]

Hello Rodrigo,

how can I format the items in the modal dialog as shown in the picture?
And how can I mark a preset date?

Thank you.

Best Regards,
Sascha

---

[Support2]

Hello Sascha,

Inspecting your test link i saw that the format of items already are on the format showed in your image.

Regarding a preset date, you can add this code in (assets/javascripts/theme.custom.js):

$('div[data-plugin-datepicker]').datepicker('setDate', new Date(2017, 11, 25));

Kind Regards,

Rodrigo.

---

[Sascha_Khan]

Hello Rodrigo,

1. in the test link you see actual format. I want the header left aligned and also the buttons.
2. your js code works, but I need it to be controlled server side by a php script.

How could this be realised?

Thank you.

Best Regards,
Sascha

---

[Support2]

Hello,

1) You can use the class “align-left”.
For title change to:

<div class="modal-header align-left">

For buttons change to:

<div class="modal-footer align-left">

2) My suggestion is use inline javasript inside the .html/.php file.
Add the code below after the script of jquery and datepicker on footer:

<script>
	$(window).on('load', function(){
		$('div[data-plugin-datepicker]').datepicker('setDate', new Date(2017, 11, 25));
	});
</script>

Kind Regards,

Rodrigo.

---

[Sascha_Khan]

Hello Rodrigo,

1. How can I set the actual date? Looking the documentation of “Date” object, the parameter field must be empty. Doing so the actual date will not be set in the dialog. Setting year, month and day to specific date (2018,6,13) it works. But how can I set the actual date?

2. How can I get the selected date data pressing the button?

Best regards.
Sascha

---

[Support2]

Hello Sascha,

1) To get the actual data you need just leave empty the “Date”, for example:

$('div[data-plugin-datepicker]').datepicker('setDate', new Date());

* If this it isn’t working, probably you having some JS error on console.

For Porto Admin version 2.0.0+, the code should be:

$('div[data-plugin-datepicker]').bootstrapDP('setDate', new Date());

2) You can use the JS code below:

$('input[data-plugin-datepicker]').on('changeDate', function(e) {
    var date = e.date;    
    
    console.log(date);
});

Kind Regards,

Rodrigo.

---

[Author]

Posts