CODEWITHSUNDEEP
javascriptasp.net-core-mvcasp.net-core-2.2
Spell0
Spell0

Reputation: 51

Using CDNJS with LibMan for Moment.JS

I'm trying to get into Asp.Net Core 2.2 MVC right now. I want to use the moment.js library for some date calculations due to values from a DevExpress datetime picker. I have been able to include it according to the following instructions using "libman.json":

{
  "provider": "cdnjs",
  "library": "[email protected]",
  "destination": "wwwroot/lib/moment.js/",
  "files": [
    "moment-with-locales.min.js",
    "locale/de.js"
  ]
}

The *.js files are available.

a busy cat

However, the type or the factory 'moment()' cannot be used as described on the page https://momentjs.com/docs/ (there's no special sample for MVC either). It does not exist. I have also tried to use the nuget 'Moment.js', but it is also not possible to reference it.

I tried something like this in my *.cshtml ... but that's more Angular rather than MVC, isn't it?

@section Scripts {

<script>
    import $ from jquery;
    import moment from moment;
    const m = moment();

    function dateDiff(secondDate) {            
        //var a = moment([2008, 9]);
        //var b = moment([2007, 0]);
        //a.diff(b, 'years');
        return $("#age").text("" + " years");
    }
</script>

}

I'm not able to get access to the moment.js type. What do I have to do? What have I done wrong?

Thanks in advance! Kind regards.

Upvotes: 1

Views: 1493

Answers (2)

Spell0
Spell0

Reputation: 51

@Tao Zhou - thank you very much for your answer. Of course I tried to reference/register it in my _layout.cshtml.

The problem was somewhere else... I have tested CodeRush from DevExpress as an IntelliSense...... For JavaScript this IntelliSense does not seem to recognize the type for moment.js, and maybe any type of js. So I thought the reference would not work, but in fact it was just a problem with the IDE extension!

So ReSharper... here we are again :)

Upvotes: 0

Edward
Edward

Reputation: 30046

Before using moment, you need to reference it.

For short using, you could try like below: 

@section Scripts{ 
    <script src="~/lib/moment.js/moment-with-locales.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var now = moment();
            alert(now);
            var a = moment([2008, 9]);
            var b = moment([2007, 0]);
            alert(a.diff(b, 'years'));
        });
    </script>
}

You also could register moment in global by _Layout.cshtml. 

<!DOCTYPE html>
<html>

    //rest code
    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4=">
        </script>
    </environment>
    <script src="~/js/site.js" asp-append-version="true"></script>
    <script src="~/lib/moment.js/moment-with-locales.min.js"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>

Upvotes: 1

Related Questions