Calendar/ date picker

[guilhem]

Hi there,

Is there a way to have a calendar or a date picker inside a view (not in a form)? Is there a module for this, and if there isn't, how can you achieve this?

I think it may be linked to this question, but I'm not sure as the question is strangely worded.

My goal is to have this date picker so I can filter the events according to the selected days.

Thanks!

---

EDIT:

Thanks to the answer I was able to put a calendar picker inside a textfield.

I created the file DatePicker.js in appname/appserver/static/ so that the custom js doesn't mess up with the sideview utils editor, and put this code inside:

function createDatePicker()
{
        $("#datepicker").datepicker()
}

Then in sideview editor, I have added an html module with this code:

<p>Date:
    <input type="text" id="datepicker" onclick="createDatePicker()"/>
</p>

And (I am using SideView utils), in the sideViewUtils module, I have added in the customJavascript field the javascript file (appname/DatePicker.js)

PS: The link provided by martin is not valid, here is the description of the jqueryui datepicker that is used: datepicker doc

[sideview]

Sideview Utils 3.0 has released and there is now a DateTime module.

To go briefly into the implementation details, DateTime implements Trent Richardson's datetimepicker control but of course being implemented as a Splunk module it has all the necessary and convoluted framework bits to talk to the Splunk UI framework correctly.

I've said it before, but implementing custom UI controls with the HTML module is kind of a doomed effort. You may feel like you're not far away from succeeding here but there are very deep gremlins that make such efforts extremely difficult. Most notably but certainly not the only deep problem, is that the HTML module flushes and rewrites its HTML every time it receives a push from upstream. This tends to derail and confuse pretty much any control and datepicker is no exception.

Future releases will introduce params whereby you can lock it down to only display date and not time, or to only display date + hours but not minutes+seconds etc..

As always feedback is welcome.

http://sideviewapps.com/apps/sideview-utils/

[martin_mueller]

SideSanta delivers! \o/

[martin_mueller · Accepted solution]

You can do this inside a Sideview Utils HTML module to get a single date picker:

<script>
  $$(function() {
    $$( "#datepicker" ).datepicker();
  });
</script>
<p>Date: <input type="text" id="datepicker" /></p>

That's the sample code from http://jqueryui.com/datepicker/, customize as needed.

[iamniks]

its working fine but can anyone please tell how do we read the value datepicker in other sideviewutils modules?

[sbsbb]

A single_date_picker module in Sideview would be fantastic...

[sideview]

The customJavascript and customStylesheet params are up on the SideviewUtils module itself - the hidden module that you have to put at the top of a Sideview view.

It's really a choice on the developer's part whether to put customBehaviors into application.js, or to package them up a bit more and put them in their own static files and reference them with customJavascript in the views as necessary. I do a mixture of both where older more trusted customBehaviors often live in particular files and the newer weirder ones live in application.js

[guilhem]

good to know. Some question though:
- Where is the customJavascript param, and in which module does it exists (I only have a customBehavior param, I guess it's what you mean) ?
- How do I tell my view to look into this particular js file for the function?
- How do I declare this behavior, is it the same way that in application.js?

I read your reply here: http://splunk-base.splunk.com/answers/2480/custom-javascript-in-an-app

looks like I am going to keep the application.js & customBehavior for now.

[sideview]

There is an official Sideview module coming, but I'm glad you found a solution. Note that if you put your JS in an external file in <appname>/appserver/static, and if you reference it using the customJavascript param of the SideviewUtils module, it wont mess with the Sideview Editor. You can also put it in application.js of course but then you have to wrap it in an if (Splunk.util.getCurrentView()=="my_view_name"), so it can be cleaner to use the customJavascript param.

[guilhem]

Wonderfull, and easy. It just mess with the sideview editor, but I am thinking of putting it inside a custom behavior. That should do the trick. Thank you!

[guilhem]

Hello there!

I am still wondering if it's possible to select a date in a calendar like this one for example. I saw in this topic that there is no default way to do it

Even if it requires some custom JS to be implemented, I would just like to know if it's possible? Also I would love to know if it's possible to have some days prepopulated by upstream search. I think it may be a bit off the track but I hope it's possible. For now I just have a pulldown populated with YYYYMMDD, but it's not very convenient.

Many thanks!

[guilhem]

@cyndiback: I didn't work on this topic yet, as it has a low priority on my to-do list.

@Nick: really cool! I can't wait to see it in sideview!

[sideview]

I have this in the queue for Sideview Utils by the way. I can't promise a release date for it, but a lot of users have been asking for exactly this -- a generic control that can give calendar interface(s) to the user so they can choose either a single date and time, or two dates and times comprising an absolute range.

[cyndiback]

Guilhem...Did you get the calendar to work?

[justgrumpy]

It depends on how rogue you want to go. If you know javascript there are ways to do this. Splunk is already including jQuery on the pages. The calendar used in the TimeRangePicker is the jQuery UI Datepicker (http://jqueryui.com/datepicker/). You'd have to figure out how to get the date from it to use for your purposes, but where there is a will there is a way.

[Drainy]

Its certainly possible. All you need is to select the date/time, parse it into a readable format and pass it downstream into your other modules.

[justgrumpy]

There is a TimeRangePicker module that can be used on a dashboard. The 'Custom time' allows you to choose dates using a calendar.

[guilhem]

Also this topic and this one just answered the question: how to access to selected time (using the default TimeRangePicker, the question still holds for custom module).

[guilhem]

Thanks! I didn't saw it in the first place. Although it is functional, it requires a bit a manipulation to select the days.

What I would really like instead, is to put right inside the view the popup calendar that is displayed when you click on the date. I don't know if it's possible but I think it may be in JS, so perhaps I can write a custom module that contains only this calendar and place the module inside the view.

Question will be: how to access to the time selected using this custom module?