Web Connection
Tutorial - Step 7 - Invalid DatePicker code
Gravatar is a globally recognized avatar based on your email address. Tutorial - Step 7 - Invalid DatePicker code
  Kevin R Hunt
  All
  Mar 11, 2020 @ 06:13am

Hi,

I can't get the DatePicker to work as shown in the tutorial displayed below.

This is what I'm getting with the below code.

I think part of problem is the code displayed in the second-to-the-last code snippet has an invalid directory reference. Not sure what it would be, but I don't find any thing close to the below in my WebDemo directory and below:

<script src="~/bower_components/jquery/dist/jquery.min.js"></script>

<!-- datetimepicker.js related scripts and styles + jquery -->
<link rel="stylesheet" href="~/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
<script src="~/bower_components/moment/min/moment.min.js"></script>
<script src="~/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>

<script>
$("#Entered").datetimepicker({
    format: "MM/DD/YYYY",
    keyBinds: { "delete": null }
});
</script>

Specifically, there is no directory created in the Project Wizard that has a bower_components directory and below.

Rick, can you check that out and see if I'm missing something or the Wizard is not copying all of the files utilized in the Step 7 Help for Getting Started?

Thanks

Gravatar is a globally recognized avatar based on your email address. re: Tutorial - Step 7 - Invalid DatePicker code
  Rick Strahl
  Kevin R Hunt
  Mar 11, 2020 @ 01:27pm

The bower_components files have moved to the /lib directory as bower has fallen by the wayside in the JavaScript world. We're back to explicitly holding our own references instead of letting a package manager provide them - more work on my end, but at least it's controllable this way.

The DatePicker links should be:

<!-- datetimepicker related scripts and styles -->
<script src="~/lib/moment/min/moment.min.js"></script>
<link href="~/lib/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet" />
<script src="~/lib/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>

For the rest of the references replacing /bower_components/ with /lib/ should work to find dependencies.

Updated the document.

Can't test this right now, but if it doesn't work, you can check out the date sample in Web Connection demo.

+++ Rick ---

© 1996-2024