jQuery DateRangePicker with Times

[ww1711]

Hello,

I'd like to implement a jQuery "DateRangePicker with Times" found here in a RadGrid EditFormTemplate.

When the following code is outside of the RadGrid, all works as expected: 

<div class="col-md-4 col-md-offset-2 demo">
    <center>
        <input type="text" id="config-demo" class="form-control">
    </center>
</div>

<script type="text/javascript">
    $('#config-demo').daterangepicker({
        "timePicker": true,
        "linkedCalendars": false,
        "startDate": "01/11/2020",
        "endDate": "01/17/2020"
    }, function (start, end, label) {
        console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
    });
</script>

 

However, when the code is inserted into the <FormTemplate> blocks, it does not work. Can anyone help with what I might be missing? All the required references (.js, .css) are available to be downloaded as a ZIP on the page linked above.

Alternatively, I'm open to listen to any recommendations on how to achieve a similar result as linked above via Telerik controls.

 

Thanks!

[Rumen]

Hi Wayne,

Can you put the script inside telerik:RadScriptBlock - this works fine on my end as you can see in the attached video:

 

<EditFormSettings EditFormType="Template">
    <FormTemplate>
        <input type="text" name="datetimes" />
        <telerik:RadScriptBlock runat="server">
            <script>
                $(function () {
                    $('input[name="datetimes"]').daterangepicker({
                        timePicker: true,
                        startDate: moment().startOf('hour'),
                        endDate: moment().startOf('hour').add(32, 'hour'),
                        locale: {
                            format: 'M/DD hh:mm A'
                        }
                    });
                });
            </script>
        </telerik:RadScriptBlock>

Best Regards,
Rumen
Progress Telerik