jquery datepicker inline value c#

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?
LVL 1
RecipeDanAsked:
Who is Participating?
 
Ray PaseurConnect With a Mentor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
RecipeDanAuthor Commented:
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

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

        </div>

Open in new window

0
 
Ray PaseurCommented:
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
 
leakim971PluritechnicianCommented:
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
 
RecipeDanAuthor Commented:
Awesome Ray. Thank you for your help
0
 
Ray PaseurCommented:
Thanks for the points, and best of luck with your project! ~Ray
0
 
leakim971PluritechnicianCommented:
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
All Courses

From novice to tech pro — start learning today.