Scripts aren't working at the same time in asp.net

I am a beginner in JavaScript. I have write 2 scripts one for date-time picker and other for preview the selected image from file upload. But the 2 scripts can't run at the same time. Only one script is functioning at one time. If I remove first one then second script works and vice versa. How can I run these two scripts at the same time? If someone correct my code I shall be thankful to him/her.

<script type="text/javascript"> 
$(document).ready(function () {
        $("#<%=TextBox1.ClientID %>").dynDateTime({
            showsTime: true,
            ifFormat: "%Y/%m/%d %H:%M",
            daFormat: "%l;%M %p, %e %m, %Y",
            align: "BR",
            electric: false,
            singleClick: false,
            displayArea: ".siblings('.dtcDisplayArea')",
            button: ".next()"
        });
    });



    function ShowImagePreview(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#<%=ImgPrv.ClientID%>').prop('src', e.target.result)
                        .width(240)
                        .height(150);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }

</script>

In the body tag of the page //for date-time picker

<asp:TextBox ID="TextBox1" runat="server" ReadOnly = "true"></asp:TextBox>
<img src="portalimg/calender.png" />
<asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />

//for image preview(file upload)

 <div>
        <fieldset style="width: 300px;">
            <legend>Show image preview before image upload</legend>
            <div style="text-align: center;">
                <asp:Image ID="ImgPrv" Height="150px" Width="240px" runat="server" /><br />
                <asp:FileUpload ID="flupImage" runat="server" onchange="ShowImagePreview(this);" />
            </div>
        </fieldset>
    </div>