How to show DatePicker when clicked on a span or div element.

524 views
Skip to first unread message

Naresh Pilla

unread,
Apr 3, 2014, 8:29:40 AM4/3/14
to bootstrap-...@googlegroups.com
HI All,

I have a requirement that I need to display bootstrap datepicker when clicked on  a span ot a div element.
I don't have input box only span or div element, also I need to get the selected date.

Please suggest me how to achieve this.

Thanks,
Naresh.

Andrew Rowls

unread,
Apr 10, 2014, 1:19:01 PM4/10/14
to Naresh Pilla, bootstrap-...@googlegroups.com
If you use a span, you can simply attach the picker to the span, and it should work as expected. To get the selected date, listen to the changeDate event on the span.

<span class="btn btn-default">Open picker</span>

$('span').datepicker().on('changeDate', function(e){ alert(e.format()) })

Using a div will result in an inline picker; if you take this approach, you can listen to the changeDate event in the same way as above.
> --
> You received this message because you are subscribed to the Google Groups "bootstrap-datepicker" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to bootstrap-datepi...@googlegroups.com <mailto:bootstrap-datepi...@googlegroups.com>.
> To post to this group, send email to bootstrap-...@googlegroups.com <mailto:bootstrap-...@googlegroups.com>.
> To view this discussion on the web visit https://groups.google.com/d/msgid/bootstrap-datepicker/d36883ad-a2f2-4b70-8019-5b719662c032%40googlegroups.com <https://groups.google.com/d/msgid/bootstrap-datepicker/d36883ad-a2f2-4b70-8019-5b719662c032%40googlegroups.com?utm_medium=email&utm_source=footer>.

Naresh Pilla

unread,
Apr 11, 2014, 9:58:20 AM4/11/14
to bootstrap-...@googlegroups.com, Naresh Pilla, and...@eternicode.com
Thanks very much...it helped me a lot.


On Thursday, April 10, 2014 10:49:01 PM UTC+5:30, eternicode wrote:
If you use a span, you can simply attach the picker to the span, and it should work  as expected.  To get the selected date, listen to the changeDate event on the span.

     <span class="btn btn-default">Open picker</span>

     $('span').datepicker().on('changeDate', function(e){ alert(e.format()) })

Using a div will result in an inline picker; if you take this approach, you can listen to the changeDate event in the same way as above.

On 04/03/2014 08:29 AM, Naresh Pilla wrote:
> HI All,
>
> I have a requirement that I need to display bootstrap datepicker when clicked on  a span ot a div element.
> I don't have input box only span or div element, also I need to get the selected date.
>
> Please suggest me how to achieve this.
>
> Thanks,
> Naresh.
>
> --
> You received this message because you are subscribed to the Google Groups "bootstrap-datepicker" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to bootstrap-datepicker+unsub...@googlegroups.com <mailto:bootstrap-datepicker+unsub...@googlegroups.com>.
Reply all
Reply to author
Forward
0 new messages