You have to use beforeParameterAdd
event for this customization. You can refer the following code snippet for a reference to customize the date picker along with null value in drop-down, instead of adding in right side of DatePicker.
<div id="viewer"></div>
<script>
$("#viewer").boldReportViewer({
beforeParameterAdd: "onBeforeParameterAdd"
});
</script>
</html>
<script type="text/javascript">
function onBeforeParameterAdd(args) {
var $targetTag = $('#' + args.containerId);
if (args.parameterModel.ParameterElementType == "DateTime") {
var $dateTime = ej.buildTag("input", "", "", { 'id': args.parameterModel.ControlId, 'type': 'text', 'style': 'width: 100%' });
$targetTag.append($dateTime);
var name = args.parameterModel.Name;
$dateTime.ejDateTimePicker({
timePopupWidth: 150,
value: args.parameterModel._dateTimeValue,
open: function (args) {
var picker = this;
var container = $('#' + this._id + '_popup');
if ($(container).find('#null-btn').length == 0) {
var btn = ej.buildTag("div.e-dt-button e-btn e-dt-button e-btn e-select e-flate-flat", "NULL", "", { id: "null-btn", style: "margin-left:4px;margin-right:4px;display:inline" });
btn.click(function (args) {
picker._doneClick();
picker.setModel({ 'value': null, 'watermarkText': 'Null' });
});
$(container).find('.e-button-container').append(btn);
}
},
change: function (args) {
var data = this.getValue();
var updateParam = {
name: name,
labels: [data],
values: [data]
};
$('#viewer').data('boldReportViewer').updateParameter(updateParam);
}
});
args.handled = true;
}
}
</script>
</html>