Hiding panel on certain dates using JavaScript

Question

Hi I'm trying to hide a panel (which acts as a button to access Registration) on the front end, it should be only visible in the certain time of the year. I'm trying to use DateTime function to get the current date but it doesn't seem to work for me - it says cannot find name 'DateTime'. Any advice appreciated.

Here is my code

module PrestigeWorldWide.Scripts.ViewModels {
export class IndexViewModel extends BaseViewModels.BaseViewModel {
    public panels: KnockoutObservableArray<IPanelObject> = ko.observableArray<IPanelObject>();
    public events: KnockoutObservableArray<FullCalendar.EventObject> = ko.observableArray<any>();

    constructor() {
        super();


        this.panels.push({
            Name: "My Transcript",
            Desc: "View your unofficial QUB transcript",
            Icon: "fa-file-text",
            Link: "/PrestigeWorldwide/Grade/ViewTranscript"
        });

        this.panels.push({
            Name: "Module Info",
            Desc: "View the information on all modules including pre-requisites and course content",
            Icon: "fa-folder-open",
            Link: "/PrestigeWorldwide/Module/ModuleInfo"
        });
        var cutOffStart1 = "14/09/2015";
        var cutOffEnd1 = "12/10/2015";
        var cutOffStart2 = "18/01/2016";
        var cutOffEnd2 = "15/02/2016";

        if (DateTime.Now >= cutOffStart1 && DateTime.Now >= cutOffEnd1) {
            this.panels.push({
                Name: "Enrollment Wizard",
                Desc: "Enroll for modules and enter further information about yourself - emergency contacts etc.",
                Icon: "fa-magic",
                Link: "/PrestigeWorldwide/Registration/Index"
            });
        }
        this.getEvents();
    }

    getEvents() {
        var url = "/PrestigeWorldwide/Class/GetStudentClasses";
        this.loading(true);
        $.ajax(url).done((events: FullCalendar.EventObject[]) => {
            this.loading(false);
            _.each(events, (event) => {
                this.events.push(event);
            });
        });
    }


}

export interface IPanelObject {
    Name: string;
    Desc: string;
    Icon: string;
    Link?: string;
  }
}

Error message

Update - I've got to the following stage: (is there any easy way to change the formats of dates without using Moments.js? Seems like an overkill for such a tiny piece of code?)

//Before displaying the Registration wizard panel, check if we are in the range of registration availability dates
        var cutOffStart1 = new Date(2015,09,14);
        var cutOffEnd1 = new Date(2015, 10, 12);
        var cutOffStart2 = new Date(2015,3,11);
        var cutOffEnd2 = new Date(2015,3,15);
        //var cutOffStart2 = new Date(2016,1,18);
        //var cutOffEnd2 = new Date(2016,2,15);
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth() + 1; //January is 0!
        var yyyy = today.getFullYear();
        //check if the current date is in the fisrt semseter registration period
        if (today >= cutOffStart1 && today >= cutOffEnd1) {
            this.panels.push({
                Name: "Enrollment Wizard",
                Desc: "Enroll for modules and enter further information about yourself - emergency contacts etc.",
                Icon: "fa-magic",
                Link: "/PrestigeWorldwide/Registration/Index"
            });
        }
        //check if the current date is in the second semseter registration period
        else if (today >= cutOffStart2 && today >= cutOffEnd2) {
            this.panels.push({
                Name: "Enrollment Wizard",
                Desc: "Enroll for modules and enter further information about yourself - emergency contacts etc.",
                Icon: "fa-magic",
                Link: "/PrestigeWorldwide/Registration/Index"
            });
        }
        else { };

hutchonoid · Accepted Answer · 2015-03-12T14:56:43.190

2

DateTime.Now is c#, you are in a JavaScript file.

You need to do something like this:

var now = new Date();

Also worth noting that the value you are comparing to for your cut off dates are strings, you will need to convert those to dates too.

There are several js libraries to manipulate dates, Moment.js is one.

edited Mar 12 '15 at 14:56

answered Mar 12 '15 at 14:51

hutchonoid

32,982
15
99
104

Thanks, I thought that I was doing something wrong there. – Swav Mar 12 '15 at 15:28
Is there any easy way to compare the dates without using Moments.js? Seems like an overkill for such a tiny piece of code... – Swav Mar 13 '15 at 15:11
1

Create a date instance from your string i.e. "14/09/2015" and then compare it to that. Here is an example http://stackoverflow.com/questions/5619202/converting-string-to-date-in-js , you new Date() will get the current one but you will need to trim time off or set it to zero. – hutchonoid Mar 13 '15 at 15:18
1

@Swav No probs, I hate dates in javascript/json. This is a good article "on the nightmare that is JSON dates". :) – hutchonoid Mar 13 '15 at 15:51

Hiding panel on certain dates using JavaScript

1 Answers1