> ## Documentation Index
> Fetch the complete documentation index at: https://doc.lucidworks.com/llms.txt
> Use this file to discover all available pages before exploring further.
# widget:datetimepicker
export const LwTemplate = ({title = "Key questions to get you started", icon = "sparkles", cta = "Powered by Agent Studio", linkHref = "https://lucidworks.com/demo/?utm_source=docs&utm_medium=referral&utm_campaign=docs_cta_ai"}) => {
const [isLoaded, setIsLoaded] = useState(false);
useEffect(() => {
const timer = setTimeout(() => {
setIsLoaded(true);
}, 500);
return () => clearTimeout(timer);
}, []);
return
{isLoaded && `
}} />}
Powered by Lucidworks Agent Studio
;
};
[localhost link]: http://localhost:3000/docs/4/app-studio/reference/tags/lightning.directive.widgetDatetimepicker
[mintlify link]: https://doc.lucidworks.com/docs/4/app-studio/reference/tags/lightning.directive.widgetDatetimepicker
[old doc.lw link]: https://doc.lucidworks.com/app-studio/4.2/1065
## Description
The Header Search directive
## Usage
as element:
```xml wrap theme={"dark"}
```
#### Parameters
| Param | Type | Details |
| ------------------------------ | ---------- | ----------------------------------------------------------- |
| ngModel | **Object** | Scope variable to update |
| onSetTime *(optional)* | **Object** | Function to call when the date/time has been selected |
| datepickerConfig *(optional)* | **Object** | Config for datepicker. \{minView: 'year/month/day/hour'} |
| dateFrom | **String** | Earliest pickable date, updates automatically when changed. |
## Example
#### Source
```xml wrap theme={"dark"}
```
```xml wrap theme={"dark"}
angular.module('lightning')
.controller('ExampleController', ['$scope', function($scope) {
$scope.data = new Date();
$scope.onTimeSet = function (newDate, oldDate) {
console.log(newDate, oldDate);
}
}]);
```
#### Result
