Solved

jquery datepicker inline value c#

Posted on 2014-11-03
9
268 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
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)

895 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

11 Experts available now in Live!

Get 1:1 Help Now