date picker in custom file

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

date picker in custom file

Post by SOHIB »

Hello All
I need to use date picker in custom file, what is the exact code please
thanks for help


arbei
User
Posts: 9284

Post by arbei »

If you have other fields enabled with datetime picker in the project, then the JavaScript is already available, then you just follow the docs (see Examples) to create your datetime picker with your code in the Custom File.


mobhar
User
Posts: 11660

Post by mobhar »

You may also refer to the generated code of your table that implement DateTimePicker control.


SOHIB
User
Posts: 93

Post by SOHIB »

i do it like this but it is not working

<?php
echo"<script>
new tempusDominus.TempusDominus(document.getElementById('datetimepicker4'), {
   display: {
	 viewMode: 'clock',
	 components: {
	   decades: true,
	   year: true,
	   month: true,
	   date: true,
	   hours: false,
	   minutes: false,
	   seconds: false,
	 }
   }
 });

</script>";
		
 echo"<div
	 class='input-group'
	 id='datetimepicker4'
	 data-td-target-input='nearest'
	 data-td-target-toggle='nearest'
 >
   <input
	 id='datetimepicker4Input'
	 type='text'
	 class='form-control'
	 data-td-target='#datetimepicker4'
   />
   <span
	 class='input-group-text'
	 data-td-target='#datetimepicker4'
	 data-td-toggle='datetimepicker'
   >
	 <span class='fa-solid fa-calendar'></span>
   </span>
 </div>";
		 
?>

arbei
User
Posts: 9284

Post by arbei »

  1. You may output HTML directly, no need to use PHP echo.
  2. Press F12 in your browser to debug your code, see Debug JavaScript.

SOHIB
User
Posts: 93

Post by SOHIB »

i use new file .html

<html><head>
<script>
new tempusDominus.TempusDominus(document.getElementById('datetimepicker4'), {
   display: {
	 viewMode: 'clock',
	 components: {
	   decades: true,
	   year: true,
	   month: true,
	   date: true,
	   hours: false,
	   minutes: false,
	   seconds: false,
	 }
   }
 })

</script>
		</head>
		<body>
<div
	 class='input-group'
	 id='datetimepicker4'
	 data-td-target-input='nearest'
	 data-td-target-toggle='nearest'
 >
   <input
	 id='datetimepicker4Input'
	 type='text'
	 class='form-control'
	 data-td-target='#datetimepicker4'
   />
   <span
	 class='input-group-text'
	 data-td-target='#datetimepicker4'
	 data-td-toggle='datetimepicker'
   >
	 <span class='fa-solid fa-calendar'></span>
   </span>
 </div></body></html> 

calendar not appear and when press F12
the error is:
Uncaught ReferenceError: tempusDominus is not defined

if any one can write the exact code please help


arbei
User
Posts: 9284

Post by arbei »

Are you talking about this Custom File? If so, make sure you use "Include common files".

arbei wrote:

If you have other fields enabled with datetime picker in the project, then the JavaScript is already available

Also, remove your <html>, <body> and <head> tags, put your script after HTML markup.


mohmmadmustafa
User
Posts: 3

Post by mohmmadmustafa »

you can add this code at your page -->customtemplate

<div class="row">
    <div class="col-3">     date:   </div>
    <div class="col-6">  <div   class='input-group'   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'   >
     <span class='fas fa-calendar'></span>
   </span>
 </div>
    </div>
 </div>

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

});
</script>

See https://getdatepicker.com/6/examples/jquery.html


mrlux
User
Posts: 115

Post by mrlux »

I use v2023.13

If I try:

<div class="row">
    <div class="col-3">date:</div>
    <div class="col-6">
        <div class="input-group" id="datetimepicker1" data-td-target-input="nearest" data-td-target-toggle="nearest" >
        <input id="datetimepicker1Input" type="date" data-date-format="dd.mm.yyyy" class="form-control" data-td-target="#datetimepicker1" />
        </div>
    </div>
</div>       
<script>

loadjs.ready("load", function() {
$("#datetimepicker1").tempusDominus();  
});

See error: Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
After select date see error: Luxon failed to parse the input date.

How can I use my date field?


arbei
User
Posts: 9284

Post by arbei »


mrlux
User
Posts: 115

Post by mrlux »

<div class="row">
    <div class="col-3">date:</div>
    <div class="col-6">
        <div class="input-group" id="datetimepicker1" data-td-target-input="nearest" data-td-target-toggle="nearest" >
        <input id="datetimepicker1Input" type="date" data-date-format="dd.mm.yyyy" class="form-control" data-td-target="#datetimepicker1" />
        </div>
    </div>
</div>       
<script>
currentForm.on("initiated", (e) => {
    document.addEventListener("focusin", (e) => {
        loadjs.ready("load", function() {
            $("#datetimepicker1").tempusDominus();  
        });
    });
});
</script>

This works better, but the error persists when loading:
Uncaught TypeError: Cannot read properties of undefined (reading 'on')


arbei
User
Posts: 9284

Post by arbei »

Make sure you put your code in the correct page. Not every page has currentForm, or you may use currentForm?.on(...).


mrlux
User
Posts: 115

Post by mrlux »

I do not know that. I just copied the code you suggested to me. I want to insert a separate date field into a ready-made listing at the bottom of the page.

function Page_DataRendered(&$footer) {
$header = "your header";

My code...

}

arbei
User
Posts: 9284

Post by arbei »

Don't just copy and paste, try to understand it first. The user in other post tries to add a "focusin" listener to TinyMCE, you don't need to. In addition, if you add the extra input yourself by server event, it is not in the current form, you need to initiate it yourself, you may refer to the generated code for other date fields as example.


Post Reply