Solved

jquery datepicker inline value c#

Posted on 2014-11-03
9
271 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 109

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
 
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 109

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 109

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Media.Imaging 1 18
SqlDependency to get update from sql to my c# app 2 40
Jquery 10 20
Problem with SelectList in .NET MVC application 1 17
Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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)

777 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