Solved

jquery datepicker inline value c#

Posted on 2014-11-03
9
260 Views
Last Modified: 2014-11-06
I have a JQuery Datepicker that is inline. How do I get the value in c# to show on the same page  as the calendar?
0
Comment
Question by:RecipeDan
  • 3
  • 3
  • 3
9 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40421268
c# run on the server
the jQuery calendar is built once the page is loaded by Jquery, in your browser
you browser have no idea of c#
c# have no idea of jQuery

you can send the value of the datepicker using usual method
<asp:TextBox id="datepicker" runat="server" />

$("#<%= datepicker.ClientID %>").datepicker(options);
0
 
LVL 1

Author Comment

by:RecipeDan
ID: 40421799
I think I asked the question and didn't give enough information. I have a JQuery Datepicker, I need to get that value and use it in the code behind to call a SQL Database and use that value as a label on the same page as the calendar. I know how to create the label but do not know how to get the Datepicker value and use it in the code behind.
0
 
LVL 1

Author Comment

by:RecipeDan
ID: 40421808
  <script>
  $(function() {
      $("#calendarwrapper").datepicker({
      numberOfMonths: [3,1],
      showButtonPanel: true
    });
  });
  </script>
[code]
[code]
        <div id="calendarwrapper">

        </div>

Open in new window

0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40421852
I don't have a C# example, but I can tell you that the general design pattern is a jQuery/AJAX request that will dynamically call a script on the server.  This article explains the theory of the AJAX interaction.  I'll see if I can put together an example that uses the datepicker.
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_10712-The-Hello-World-Exercise-with-jQuery-and-PHP.html
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 82

Expert Comment

by:leakim971
ID: 40421875
but do not know how to get the Datepicker value and use it in the code behind.

  $(function() {
      $("#calendarwrapper").datepicker({
            onSelect: function(date) {
               $("#<%= Hidden1.ClientID %>").val(date);
            },
            numberOfMonths: [3,1],
            showButtonPanel: true
    });
  });

Open in new window


<asp:Hidden ID="Hidden1" runat="server">

Open in new window

0
 
LVL 108

Accepted Solution

by:
Ray Paseur earned 500 total points
ID: 40421980
Please see: http://iconoun.com/demo/ajax_datepicker.php

Here is the front-end (client-side) script:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - With AJAX Request</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

<script>
$(function() {
    $("#picker").datepicker({
        onClose: function(picked){
            $.get("ajax_datepicker_server.php", {d:picked}, function(response){
                $("#output").html(response);
            });
        }
    });
});
</script>

</head>
<body>
<form>
<p>Date: <input name="chosen_date" type="text" id="picker" /></p>
</form>
<div id="output">The chosen date goes here</div>
</body>
</html>

Open in new window

And here is the back-end (server-side script).  All this does is reformat / regurgitate the information received from the client-side script, but in your real-life application this script would also update a database or do other meaningful processing with the date received from the datepicker.
<?php // demo/ajax_datepicker_server.php
error_reporting(E_ALL);

/**
 * A backend server-side script gets called from the jQuery "datepicker"
 * Receives a GET-method request with d= argument
 * Returns a reformatted date value via echo() for inclusion in a <div>
 */

// INTERPRET THE DATE STRING INTO A TIMESTAMP
$t = !empty($_GET['d'])
   ? strtotime($_GET['d'])
   : NULL
   ;

// IF THE TIMESTAMP IS UNUSABLE
if (!$t) die();

// REFORMAT INTO A PRETTY DATE AND SEND BACK AS IF BROWSER OUTPUT
$d = date('l, F jS, Y', $t);
die($d);

Open in new window

0
 
LVL 1

Author Closing Comment

by:RecipeDan
ID: 40424423
Awesome Ray. Thank you for your help
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40424567
Thanks for the points, and best of luck with your project! ~Ray
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40426342
look like you did it with Ray_Paseur solution :
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28552099.html

Ray_paseur use OnClose
I propose to use OnSelect

Wait... it's probably not the same project.. my bad.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now