This is a migrated thread and some comments may be shown as answers.

jQuery DateRangePicker with Times

1 Answer 22 Views
Grid
This is a migrated thread and some comments may be shown as answers.
ww1711
Top achievements
Rank 1
ww1711 asked on 17 Jan 2020, 04:00 PM

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!

1 Answer, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 21 Jan 2020, 01:58 PM

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

Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.
Tags
Grid
Asked by
ww1711
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Share this question
or