Remove From My Forums

Get values in JQuery date control

Question
0

Sign in to vote
User-284642143 posted

Im looking at

http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/#demos
and
http://jsfiddle.net/7613s2hu/2/?utm_source=website&utm_medium=embed&utm_campaign=7613s2hu

I would like to get the selected values from this calendar in code behind.

I noted the method getDates( format, type ) to get the dates.

but unsure how i could get the values from the array in code behind as the var dates is held in a JS function?

var dates = $('#myDatesDiv').multiDatesPicker('getDates');
Friday, August 10, 2018 2:49 PM

Answers

User-893317190 posted

Hi EssCee,

You could do like this, but don't forget to put your js code in $(function(){ }) to make your code run after the page is loaded , or your js code may not find your calendar.

You could also just pass the dates to your aspx page and still write your code in your aspx page.

Below is my code. I try to pass the dates to server and show the passed dates at the second time.

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
 
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link href="jquery-ui-multidatespicker/jquery-ui.multidatespicker.css" rel="stylesheet" />

    <script src="jquery-ui-multidatespicker/jquery-ui.multidatespicker.js"></script>

</head>
<body>
    <form id="form1" runat="server">
      <div id="mdp-demo"></div>

        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
       
        <input type="hidden"  id="dates" value="" />
            <asp:HiddenField ID="HiddenField1" runat="server" />


         <%  
             // you could write c# code here 
             List<string> list = new List<string>();

             foreach (var item in dateTimes)
             {
                 // convert the date to string ,please pay attention to the format
                 list.Add("'"+item.ToString("MM/dd/yyyy")+"'");
             }

             //the String.Join method  concat  each element of the list with ","
             string data = String.Join(",", list);


       %>



         <script>
             // please put your js code in the form mark up , or you couldn't get data from code behind

            //get the dates from code behind.
             var dates = [<%=data%>];

             //if there is no data
             if (dates.length == 0) {
                
                 $('#mdp-demo').multiDatesPicker({
                 
             
                 });
                 
                
             }
             //if there is data, show the data
             else {
                 $('#mdp-demo').multiDatesPicker({
                     addDates:dates
	                
                 });
                

             }

       $(function () {

           $("#Button1").click(function () {

               var dates = $('#mdp-demo').multiDatesPicker('getDates');
               $("#HiddenField1").val(dates
               );
              

           })
       })
   </script>

    </form>

 // put the passed dates at this plase to pass to the aspx page.
        protected List<DateTime> dateTimes = new List<DateTime>();
       
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        protected void Button1_Click(object sender, EventArgs e)
        {
            string[] datestrs = HiddenField1.Value.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
             
            foreach (string item in datestrs)
            {
                dateTimes.Add(DateTime.Parse(item));
            }


        }

Best regards ,

Ackerly Xu

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Monday, August 13, 2018 1:38 PM

All replies

User-893317190 posted

Hi EssCee,

You could use a hidden field to save the data you get from your date control. Then you could get the dates from the hidden field.

Below is my code.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
 
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <link href="../jquery-ui-multidatespicker/jquery-ui.multidatespicker.css" rel="stylesheet" />
    
    <script src="../jquery-ui-multidatespicker/jquery-ui.multidatespicker.js"></script>
</head>
<body>
    <form id="form1" runat="server">
      <div id="mdp-demo"></div>

        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
       
        <input type="hidden"  id="dates" value="" />
            <asp:HiddenField ID="HiddenField1" runat="server" />
    </form>

</body>

   <script>
       var date = new Date();
$('#mdp-demo').multiDatesPicker({
	
	addDates: [date.setDate(14), date.setDate(19)]
       });
       $(function () {

           $("#Button1").click(function () {

               var dates = $('#mdp-demo').multiDatesPicker('getDates');
               $("#HiddenField1").val(dates
               );
              

           })
       })
   </script>

Code behind.

protected void Button1_Click(object sender, EventArgs e)
        {
            string[] datestrs = HiddenField1.Value.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
            List<DateTime> dateTimes = new List<DateTime>();
            foreach (string item in datestrs)
            {
              dateTimes.Add ( DateTime.Parse(item));
            }
        }

The result.

Best regards ,

Ackerly Xu

Monday, August 13, 2018 3:26 AM

0

Sign in to vote
User-284642143 posted

Great. Will look into that shortly.

One other question which i forgot to ask was if i wanted the entire calendar contents to be based on code behind (mainly the selected dates (date.SetDate(14)) would i just use

Page.ClientScript.RegisterClientScriptBlock(Add the JS from above here)

and use the same method as above to retrieve that values?

Thanks
Monday, August 13, 2018 11:49 AM

User-893317190 posted

Hi EssCee,

You could do like this, but don't forget to put your js code in $(function(){ }) to make your code run after the page is loaded , or your js code may not find your calendar.

You could also just pass the dates to your aspx page and still write your code in your aspx page.

Below is my code. I try to pass the dates to server and show the passed dates at the second time.

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
 
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link href="jquery-ui-multidatespicker/jquery-ui.multidatespicker.css" rel="stylesheet" />

    <script src="jquery-ui-multidatespicker/jquery-ui.multidatespicker.js"></script>

</head>
<body>
    <form id="form1" runat="server">
      <div id="mdp-demo"></div>

        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
       
        <input type="hidden"  id="dates" value="" />
            <asp:HiddenField ID="HiddenField1" runat="server" />


         <%  
             // you could write c# code here 
             List<string> list = new List<string>();

             foreach (var item in dateTimes)
             {
                 // convert the date to string ,please pay attention to the format
                 list.Add("'"+item.ToString("MM/dd/yyyy")+"'");
             }

             //the String.Join method  concat  each element of the list with ","
             string data = String.Join(",", list);


       %>



         <script>
             // please put your js code in the form mark up , or you couldn't get data from code behind

            //get the dates from code behind.
             var dates = [<%=data%>];

             //if there is no data
             if (dates.length == 0) {
                
                 $('#mdp-demo').multiDatesPicker({
                 
             
                 });
                 
                
             }
             //if there is data, show the data
             else {
                 $('#mdp-demo').multiDatesPicker({
                     addDates:dates
	                
                 });
                

             }

       $(function () {

           $("#Button1").click(function () {

               var dates = $('#mdp-demo').multiDatesPicker('getDates');
               $("#HiddenField1").val(dates
               );
              

           })
       })
   </script>

    </form>

 // put the passed dates at this plase to pass to the aspx page.
        protected List<DateTime> dateTimes = new List<DateTime>();
       
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        protected void Button1_Click(object sender, EventArgs e)
        {
            string[] datestrs = HiddenField1.Value.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
             
            foreach (string item in datestrs)
            {
                dateTimes.Add(DateTime.Parse(item));
            }


        }

Best regards ,

Ackerly Xu

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Monday, August 13, 2018 1:38 PM

Answered by:

Get values in JQuery date control

Question

Answers

All replies