I worked a bit more on the above example with options more suited for your needs.
by adding in the options of the datetimepicker to disable date and time and also limit it to todays date.
(also added a button to send the selected date)
[{"id":"d4a06909c7c81b1b","type":"ui_template","z":"54efb553244c241f","group":"397fec83949c5c0b","name":"","order":0,"width":"6","height":"6","format":"<link rel=\"stylesheet\" href=\"https://pro.fontawesome.com/releases/v5.10.0/css/all.css\"\n integrity=\"sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p\" crossorigin=\"anonymous\" />\n\n<!-- Bootstrap is not required for the picker to work-->\n<script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js\"\n integrity=\"sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/\" crossorigin=\"anonymous\"></script>\n\n<link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\n integrity=\"sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We\" crossorigin=\"anonymous\" />\n<!-- end bootstrap-->\n\n\n<!-- Popperjs -->\n<script src=\"https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js\"\n integrity=\"sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp\" crossorigin=\"anonymous\"></script>\n\n<script src=\"https://cdn.jsdelivr.net/gh/Eonasdan/tempus-dominus@master/dist/js/tempus-dominus.js\"></script>\n\n<link href=\"https://cdn.jsdelivr.net/gh/Eonasdan/tempus-dominus@master/dist/css/tempus-dominus.css\" rel=\"stylesheet\" />\n\n<div class='input-group' id='datetimepicker1' data-td-target-input='nearest' data-td-target-toggle='nearest'>\n <input\n id='datetimepicker1Input'\n type='text'\n class='form-control'\n data-td-target='#datetimepicker1'\n />\n <span\n class='input-group-text'\n data-td-target='#datetimepicker1'\n data-td-toggle='datetimepicker'\n >\n <span class='fas fa-calendar'></span>\n </span>\n</div>\n\n<button class=\"btn btn-primary btn-sm mt-3\" ng-click=\"send({ payload: getDate() })\">Send Selected Date</button> \n\n<script>\n var theScope = scope\n\nsetTimeout(()=> {\n\n// define tomorrow to limit maxDate option\ntheScope.tomorrow = new Date();\ntheScope.tomorrow.setHours(23,59,59);\n\ntheScope.picker = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'), {\n useCurrent: false, \n defaultDate: new Date(), \n restrictions: {\n maxDate : theScope.tomorrow,\n },\n display: {\n buttons: {\n today: true\n },\n components: {\n clock:false,\n date: false,\n }\n },\n \n });\n\n\n }, 1000)\n\n// getDate function \n theScope.getDate = function() {\n return { payload: theScope.picker.viewDate.toLocaleString() }\n }\n\n\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":480,"y":840,"wires":[["43feacb623f686dd"]]},{"id":"43feacb623f686dd","type":"debug","z":"54efb553244c241f","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":670,"y":840,"wires":[]},{"id":"397fec83949c5c0b","type":"ui_group","name":"Default","tab":"a3a053c01a1ffc93","order":1,"disp":true,"width":"20","collapse":false,"className":""},{"id":"a3a053c01a1ffc93","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
