How can I use a jQuery datepicker to display the date and auto update?

Question

I need to make the jQuery work with the rest of the js and display the date in descending order on a chart. This is the basis of what I have so far. Where it says "document.write(x);" I need it to display the date that is picked by the user.

 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
        <style>
            h1 {
                text-align: center;
            }
        </style>
    </head>
    <body>
    <div class="datepicker">
        <div>
            <script type="text/javascript">
            var x;
            $(function date() {
              $("#datepicker").datepicker({
                  onClose: function(dateText) {
                     var x = dateText;
                     alert("x = " + x);
                  }
                });
              $('#datepicker').datepicker('option', {dateFormat: 'mm/dd/yy'});
          });
            </script>
  <input type="text" id="datepicker">
        </div>
    </div>
<div class="price-chart">
    <div class="attr-col">
        <ul>
            <li>Service 1:</li>
            <li>Service 2:</li>
            <li>Service 3:</li>
            <li>Service 4:</li>
            <li>Service 5:</li>
        </ul>
    </div>
    <div class="pt-table">
        <div class="pt-body">
            <ul class="pt-rows">
                <li class="title">
                <span><script type="text/javascript">
                document.write(x);
                </script></span>

Can you post some solutions you've tried that haven't worked? — Chris Mukherjee, Jul 21 '14 at 15:34
Datepicker has a [`.getDate()` function](https://api.jqueryui.com/datepicker/#method-getDate) for exactly this purpose. *Off-topic: don't embed ` — blgt, Jul 21 '14 at 15:40

score 0 · Answer 1 · answered Jul 21 '14 at 16:10

Your value of x in the span is not updating after you change it in your onClick function. Give your span where you want the date to appear an id of "date" and then add the last line in the onClose function:

$( "#datepicker" ).datepicker({
  onClose: function(dateText){
    x = dateText;
    alert("x = " + x);
    $("#date").html(x);
  }
});

This will automatically update every time you change the value of x.

score 0 · Accepted Answer · answered Jul 21 '14 at 16:20

0

$( "#datepicker" ).datepicker({
  onClose: function(dateText){
     x = dateText;
     alert("x = " + x);
     $("li.title>span").eq(0).html(x);
  }
});

answered Jul 21 '14 at 16:20

peterpeterson

1,315
2
14
38

Do you know how I can added dates below that would be in descending order? Something like July 8, July 7, etc? – user3776741 Jul 21 '14 at 16:41
do you mean every time you update the date, to have a history list sorted by date? the is no simple way with jquery, but what I did once, was to save the date without separtor and modify the order into a data attribute, so the the date: 12/01/2014 will be rendered as data-date-int="20140112" so in this way you can sort comparing the new date every time you add by doing if first time .append(x) if greater .after(x); if smaller .before(x); – peterpeterson Jul 22 '14 at 08:05
I meant that I to pick the date and then 6 days behind it would show up too. I thought I could do something like document.write(dateTime-1) etc. is there any equation like that i could do? – user3776741 Jul 22 '14 at 14:21
yes, you can first you have to get the date object from jquery datepicker like this:http://stackoverflow.com/questions/4919873/how-to-get-the-date-from-jquery-ui-datepicker and then follow this: http://stackoverflow.com/questions/563406/add-days-to-datetime – peterpeterson Jul 22 '14 at 14:30
I have this so far inline `code in backticks`, 'var today = new Date(); var yesterday = new Date(); $(function date() { $( "#datepicker" ).datepicker({ onClose: function(dateText){ currentDate = dateText; $("li.title>span").eq(0).html(currentDate);} }); $('#datepicker').datepicker( "getDate" ); $('#datepicker').datepicker('option', {dateFormat: 'M d'}); }); yesterday.setDate(today.getDate()-1); document.write(yesterday);' – user3776741 Jul 22 '14 at 14:58
here is my other question better worded and code is there. [link]http://stackoverflow.com/questions/24891395/how-to-use-jquery-datepicker-to-show-multiple-dates-in-descending-order – user3776741 Jul 22 '14 at 15:23

How can I use a jQuery datepicker to display the date and auto update?

2 Answers2