Date Picker Suggestion

#1

I’ve been playing around with various datepickers suggested in the forum but struggled to get one that was simple and worked how I wanted it to. Just playing with something I found on the Jquery site:

I’ve put this in a plugin just called jquery

<script>  
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.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>
  <script>
  $( function() {
    $("#u213_input").datepicker({
    dateFormat: 'DD, d MM, yy',
});
    
  } );
  </script>
  </script>

Then just added a text field on the page.

The only thing you then have to do is find out the id of the text field and make it match with where I have #u213_input.

(I don’t know if there’s a way to avoid this step? If it’s part of a bigger form and you change anything then you might have to redo this bit if the id changes)

Oh, and set the date format as you want to see it.

Works a treat!

https://8dww9o.axshare.com/#g=1&p=home

#2

I wouldn’t use the ID as every time you add or remove a widget the ID can change. Instead I’d grab the ID from the widget using the widget’s name in Axure:

$axure('@WidgetName').jQuery().attr('id')

You might need to traverse the DOM a little further as some Axure widgets contain multiple elements and the one with the name (the data-label) might not be the actual DOM node you want.

#3

Yes, I’ve had a few attempts at that but can’t make it work.

I have:

$( function() {
$("#u1049_input").datepicker({
dateFormat: ‘DD, d MM, yy’,
});

} );

I’m not a coder so I’m just stabbing around in the dark and don’t know what to replace with:

$axure(’@WidgetName’).jQuery().attr(‘id’)

I’ve also tried using the data-label method but have the same problem. As you can see, I’ve already had to change the id where I’ve made other changes to the page. It would definitely be good to be able to set this once and then forget about it.

DatePicker Format
#4

See if this works:

$(function() {
  var input = $axure('@WidgetName').jQuery().children()[0];
  $('#' + input.id).datepicker({
    dateFormat: 'DD, d MM, yy'
  });
});

Remember to replace WidgetName with whatever you named the input field in Axure.

#5

Afraid not. This is my html. I’ve removed a couple of < as the forum doesn’t seem to like html:

div id=“u1058” class=“ax_default text_field” data-label=“from”>
input id=“u1058_input” type=“text” value="" style=“color: rgb(153, 153, 153);”>

This is part of my jquery:

$(function() {
var input = $axure(’@from’).jQuery().children()[0];
$(’#’ + input.id).datepicker({
dateFormat: ‘DD, d MM, yy’
});
});

The date picker doesn’t come up at all.

#6

Does it work when you set put the ID in yourself?

#7

If I do this:

$(function() { var input = $axure('@from').jQuery().children()[0]; $('#u1058_input').datepicker({ dateFormat: 'DD, d MM, yy' }); }); It doesn't work.
#8

Are there any errors in the browser console?

#9

Nope. Not so much as a warning.

#10

Boom! It’s working. Thank you for your help on that. That’ll make life so much easier. It was my mistake. When I copied and pasted the code, I left in a:

});

I just went back through and spotted it.

unlisted #11
closed #12