We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Add DatePicker control in Ribbon

Hello:

I need to add two DatePicker controls into a Ribbon.

How can I do that?

Thanks for your time!

3 Replies

KN Kavitha Narayanan Syncfusion Team October 19, 2015 08:54 AM UTC

Hi Soporte,

Thanks for using Syncfusion products.

Query: I need to add two DatePicker controls into a Ribbon.

Use ribbon custom contents to render the Syncfusion controls in the ribbon using the property contentID with the custom type. The contentID will get the id from input element and render the Syncfusion controls in script with the help of ribbon createControl event.

[html]


           <div>

                <div>

                    <div id="defaultRibbon"></div> 

                </div>  

           <input id="datepick"/>

           <input id="datepick1"/>

           </div>
        </div>
 [script]

$("#defaultRibbon").ejRibbon({


groups: [{

{

     id: "datepick",

     text: "DatePcker",

     type: ej.Ribbon.type.custom,//Custom type

    contentID: "datepick"//Input element id assigned to the ContentID

 },

                 {

id: "datepick1",

text: "DatePicker",

type: ej.Ribbon.type.custom,

contentID:"datepick1"
}
}]

create:"createControl"// Ribbon CreateControl event.

           });


function createControl(args) {

            $("#datepick").ejDatePicker({width:"100%"}); // DatePicker control render here

            $("#datepick1").ejDatePicker({width:"100%"});
        }

For your reference, we have attached a sample.

Sample: http://www.syncfusion.com/downloads/support/forum/120811/ze/sample-2039011232.zip

Regards,
Kavitha N.



ST Soporte Turyser October 21, 2015 06:43 PM UTC

Great!

Thanks for your response!


KN Kavitha Narayanan Syncfusion Team October 22, 2015 04:53 AM UTC

Hi Soporte,

Please let us know if you have any other query.


Regards,

Kavitha N.


Loader.
Live Chat Icon For mobile
Up arrow icon