Search code examples
c#jqueryasp.netdatebox

How do I get started with JTSage DateBox controls and ASP.net?

I am a noob at jQuery, so please help me out.

I am using Visual Studio 2005 with ASP.net 2 (I know, we're planning an upgrade soon!)

I am simply trying to embedd the DateBox FlipBox control on my website, as the users will be using the website via their iPads.

How do I go about getting this to work? Will it work?

I have placed this in my master page.

<head runat="server">
    <link href="http://cdn.jtsage.com/jtsage-datebox/-4.0.0/jtsage-datebox-4.0.0.jqueryui.min.css" rel="stylesheet" type="text/css" />
    <script src="http://cdn.jtsage.com/jtsage-datebox/-4.0.0/jtsage-datebox-4.0.0.jqueryui.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
    <script type="text/javascript" src="http://cdn.jtsage.com/jtsage-datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>

    <title>Tec-NQ Boarding Register</title>
    <asp:ContentPlaceHolder id="ContentPlaceHolderHead" runat="server">
    </asp:ContentPlaceHolder>
</head>

And in my ASPx page I've simply put an <input> statement, as per the sample instructions here.

<input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>

But all I get is a textbox! Where/how do I get the date control to show up?

I had a closer look at that link, and there are heaps of <div> statements outlining the actual control and a calendar icon.

<div class="input-group"><input type="text" data-options="{&quot;mode&quot;:&quot;calbox&quot;, &quot;useInline&quot;:false, &quot;useInlineAlign&quot;: &quot;right&quot;}" data-role="datebox" id="in1" class="form-control" readonly="readonly"><div class="input-group-addon" title="Open Date Picker"><span class=" glyphicon glyphicon-calendar"></span></div></div>

I've even tried to paste that code directly into my ASPX page, but I get a whole heap of junk.

How do you get this thing to work please? It's driving me nuts.

Thanks

Solution

  • The answer was staring at my face!

    https access priveleges

    Once I downloaded the js files directly and stored them locally, everything worked off the bat!