datetimepicker in template modal

This public forum is for user-to-user discussions of PHPMaker. Note that this is not support forum.
Post Reply
THIERRYS
User
Posts: 6

datetimepicker in template modal

Post by THIERRYS »

Hi,

I have a template file for a modal, I load this template with jquery load() in stratup script of my page, in this template I have an input for a date.
When I was using phmaker2020 I wrote :

	<div class="input-group date">
		<label for="Date_Interv" class="col-form-label" style="display:block" >DATE INTERVENTION <i class="fas fa-asterisk" style="color:red;"></i></label>
		<div class="col-sm-10">
				<input id="Date_Interv" class="form-control" style="width:90%;" name="Date_Interv" type="text" value="" data-field="Date_Interv"  required />
		</div>
	</div>
	<script>
		loadjs.ready(["datetimepicker"], function() {
		ew.DATE_SEPARATOR = "-";
		ew.createDateTimePicker("ficheve", "Date_Interv", {"ignoreReadonly":true,"useCurrent":false,"format":7});
		});
	</script>

It's ok, all work.

in phpmaker2023

I tried many things but nothing work, I read and tried everything written in the post "date picker in custom file", nothing work. and this it's the same for a custom file with a link to another file in "content" ex :

<?php include_once "recherche/chantier/dashboard/dashboard.php"; ?>

Someone can help me many thanks


arbei
User
Posts: 9286

Post by arbei »

DateTime Picker in v2023 is v6 (that in v2020 was only v4), the code is completely different, you need to update your code, you may refer to the generated code for date time picker in other normal pages..


THIERRYS
User
Posts: 6

Post by THIERRYS »

Hi, thanks for your answer.
Yes I know, I write this in the template :

<form id="test" name="test" >
  <div class="row">
    <div class="col-sm-12" id="htmlTarget">
      <label for="datetimepicker1Input" class="form-label">Picker</label>
      <div
        class="input-group log-event"
        id="datetimepicker1"
        data-td-target-input="nearest"
        data-td-target-toggle="nearest"
      >
        <input
          id="datetimepicker1Input"
          type="text"
          class="form-control"
          data-td-target="#datetimepicker1"
        />
        <span
          class="input-group-text"
          data-td-target="#datetimepicker1"
          data-td-toggle="datetimepicker"
        >
          <i class="fas fa-calendar"></i>
        </span>
      </div>
    </div>
  </div>
</form>

and for script I try :

(1)

<script>
loadjs.ready("load", function () {
$('#datetimepicker1').tempusDominus();
});
</script>

That give (F12) : $(...).tempusDominus is not a function

I Try
(2)

<script>
loadjs.ready("load", function () {
new TempusDominus(document.getElementById('datetimepicker1'), {
  //put your config here
});
});
</script>

That give (F12) :TempusDominus is not defined

I Try
(3)

<script>
loadjs.ready("load", function () {
	let format = "dd-mm-y",
	options = {
		localization: {
			locale: ew.LANGUAGE_ID + "-u-nu-" + ew.getNumberingSystem(),
			hourCycle: format.match(/H/) ? "h24" : "h12",
			format,
			...ew.language.phrase("datetimepicker")
		},
	display: {
		icons: {
			previous: ew.IS_RTL ? "fa-solid fa-chevron-right" : "fa-solid fa-chevron-left",
			next: ew.IS_RTL ? "fa-solid fa-chevron-left" : "fa-solid fa-chevron-right"
			},
		components: {
			hours: !!format.match(/h/i),
			minutes: !!format.match(/m/),
			seconds: !!format.match(/s/i)
			},
		theme: ew.isDark() ? "dark" : "auto"
		}
	};

ew.createDateTimePicker("test", "datetimepicker1",ew.deepAssign({"useCurrent":false,"display":{"sideBySide":false}}, options));

});
</script>

That give (F12) : ew.createDateTimePicker is not a function (but just for inf : console.log(ew.vars); give a good result.

I try
(4)

<script>
	loadjs.ready(["test", "datetimepicker"], function () {
		let format = "dd-mm-y",
			options = {
				localization: {
					locale: ew.LANGUAGE_ID + "-u-nu-" + ew.getNumberingSystem(),
					hourCycle: format.match(/H/) ? "h24" : "h12",
					format,
					...ew.language.phrase("datetimepicker")
				},
				display: {
					icons: {
						previous: ew.IS_RTL ? "fa-solid fa-chevron-right" : "fa-solid fa-chevron-left",
						next: ew.IS_RTL ? "fa-solid fa-chevron-left" : "fa-solid fa-chevron-right"
					},
					components: {
						hours: !!format.match(/h/i),
						minutes: !!format.match(/m/),
						seconds: !!format.match(/s/i)
					},
					theme: ew.isDark() ? "dark" : "auto"
				}
			};
		ew.createDateTimePicker("test", "datetimepicker1", ew.deepAssign({"useCurrent":false,"display":{"sideBySide":false}}, options));
	});
	</script>

But in this case now (not in 2020) loadjs doesn't works because it doesn't find Form#test ...

I think I have try more but nothing work ...


arbei
User
Posts: 9286

Post by arbei »

(1)(2) Wrong code.
(3) ew.createDateTimePicker() is in ewdatetimepicker.js which is only generated and include when at least one field uses date time picker in your project.
(4) In your code "test" is a wrong form id.


THIERRYS
User
Posts: 6

Post by THIERRYS »

I'm ok for (1) and (2)

But for (3) yes I have fileds that use date time picker on my project and I can show ewdatetimepicker.js in my developpemnt tools.

for (4) and I think the problem is here, why "test" is a wrong form id ?


arbei
User
Posts: 9286

Post by arbei »

The id is the id of the HTML form that contains the calendar's input element.

arbei wrote:

you may refer to the generated code for date time picker in other normal pages


THIERRYS
User
Posts: 6

Post by THIERRYS »

Thanks for your help, it's ok now.

You give me the solution in your first post ;-)


Post Reply