date picker in custom file
Posted: Sun May 01, 2022 5:25 am
Hello All
I need to use date picker in custom file, what is the exact code please
thanks for help
Hello All
I need to use date picker in custom file, what is the exact code please
thanks for help
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.
You may also refer to the generated code of your table that implement DateTimePicker control.
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>";
?>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
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.
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>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?
<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')
Make sure you put your code in the correct page. Not every page has currentForm, or you may use currentForm?.on(...).
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...
}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.