Twitter Bootstrap Question posted in

Twitter bootstrap – Getting a value from a JavaScript function to my ASP.NET / C# Code-Behind

I got a code snippet for a date and time picker i found in this place:
Date and Time Picker

I didn’t manage to insert it into my code normally from some reason so i just used the demo code on the bottom and pasted it in my ASP.NET site and this is the code:

// Head

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">

// Body

<div id="datetimepicker" class="input-append date">
    <input type="text"></input>
    <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
    </span>
</div>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript">
    $('#datetimepicker').datetimepicker({
        format: 'dd/MM/yyyy hh:mm',
        pickSeconds: false,
        language: 'en'
    });
</script>

It works fine and i can see and choose a date and time in my page, but as stated in the API in order to get the time to my Code-Behind i have to use this JavaScript function:

picker.getLocalDate();

The problem is it’s a JavaScript function which obviously returns some data, and i have no idea how to get it inside my C# code, I’ve looked everywhere and found some solutions that didn’t work out.

Hope you could tell me what should i do to get it, Thanks!

Tags:

2

Answers


  1. 0

    add this code to java script :

    document.getElementsByName('mydate').value = picker.getLocalDate();

    add this code between form tag :

    <asp:HiddenField ClientIDMode="Static" runat="server" id="mydate" />

    use this code in you’r code behind :

    string myDate = mydate.Value;

    but be careful use javascript after all element.

    Login or Signup to reply.
  2. 0

    You have several approaches, you haven’t indicated your technology so I’ll cover several approaches.

    • Hidden
    • Ajax
    • Query String
    • runat

    The simplest approach would be the hidden or runat. To demonstrate, I’ll start with the runat approach:

    // Front End:
<input type="text" id="txtDate" runat="server" />

// Back End:
Console.WriteLine(txtDate.Value);

    So in this instance, if your JavaScript modifies the Text Box, when your server side code runs it will call the value on the field.

    This approach is similar to the HiddenField or Hidden. You store the value in a container, that is exposed to the server for easy transport from the Client to the Server.

    <asp:HiddenField id="hdDate" runat="server" />
<input type="Hidden" id="hdDate" runat="server" />

    Doesn’t matter which one you utilize, the server can access either. You simply need to have JavaScript append a value.

    The other two approaches, work more ideally for a Service. When you call another page or a Controller, you in essence have a parameter. Which will indeed, allow you to transfer the data.

    However, I’m not sure if those are the approaches you actually need though. After looking at the documentation, this should solve your issue:

    // Front End:
<div id="datetimepicker" class="input-append date">
    <input type="text" id="txtDate" runat="server"></input>
    <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
    </span>
</div>

// Back End:
var example = txtDate.Value;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search