Search results
PDF

How to add null value within DatePicker for DateTime Parameter

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>

See Also