JQuery Plugin with Ext.Net (Arabic Hijri Date Picker Calender Plugin)

  1. #1

    JQuery Plugin with Ext.Net (Arabic Hijri Date Picker Calender Plugin)

    Hi everyone,
    I want to use a JQuery Plugin(Arabic Hijri Calender Date Picker) with ext text field.
    Here is used plugin

    My Code
      <script src="Scripts/HijriCalender/jquery.calendars.js"></script>
        <script src="Scripts/HijriCalender/jquery.calendars-ar.js"></script>
        <script src="Scripts/HijriCalender/jquery.calendars.picker.js"></script>
        <script src="Scripts/HijriCalender/jquery.calendars.plus.js"></script>
        <script src="Scripts/HijriCalender/jquery.calendars.islamic.js"></script>
        <script src="Scripts/HijriCalender/jquery.calendars.islamic-ar.js"></script>
        <script src="Scripts/HijriCalender/jquery.calendars.lang.js"></script>
        <script src="Scripts/HijriCalender/jquery.calendars.picker-ar.js"></script>
              jQuery(function () {
                  var calendar = jQuery.calendars.instance('Islamic', 'ar');
                  jQuery('.showCal').calendarsPicker({ calendar: calendar });
          <input type="text" class="showCal" /> //The Plugin works fine here
       <ext:TextField ID="txtProduceDate"   Width="250" runat="server" Margin="5"
       FieldLabel="تاريخ الإنتاج" ComponentCls="showCal" CtCls="showCal" FieldCls="showCal" /> //the plugin not working in a TextField
  2. #2

    We can't really guarantee Ext.NET will work with any and all plug ins out there. Ext.NET controls are very complex by themselves and they are far from mimicking simple HTML5 form fields. So in your case it is unlikely to have the Ext.NET field working as like a HTML5 field out of the box.

    Anyway, I downloaded the plug in but couldn't run your sample here at all. Can you provide a more complete sample code?

    I get errors on the third party scripts: File: jquery.calendars.picker.js, Line: 23, Column: 2: Unable to get property 'createPlugin' of undefined or null reference, if I add the scripts in the order you provided. You didn't provide the link/version of jQuery you are using so I just added the website's recommended jquery import line:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    Maybe that's why it is breaking, but I can't really dig in third-party scripts. If you can provide a working sample using it, we can give it a try and help you investigate if there's a way to employ the jquery plug in with Ext.NET.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thanks for your replay.
    This is a full example from keith wood website http://keith-wood.name/calendars.html
    Sample: http://keith-wood.name/zip/jquery.ca...kage-2.0.2.zip

    In my case maybe I forget to paste these two line of code
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="jquery.plugin.js"></script>
    Now the problem is that plug in works fine when i use HTML input box or asp.net text field inside a <content> Tag but its not working with any ext.net field.(without giving any errors).

    Also another confusing problem is that when I use an input or asp text box, the data from code behind did not shown on that text box.


     // this date will not appear inside html or asp text field
    txtProductDate.Text = "10/10/1436"; //asp.net text field
    txtProDuctDateTest.Value = "10/10/1433"; //Html input type text
  4. #4

    I could run the example and reproduce your problem.

    Well, I am afraid that is just that the calendar plugin does not support Ext.NET specialized controls. If you want to use the jquery plugin, you would have two choices:
    - the easy way, use asp.net or HTML fields where you want to use the jQuery plugin. You can style the field with Ext.NET theme if you make a corresponding Ext.NET component and then copy-paste the CSS classes bound to the component, for example.
    - the hard way, adjust the plug in to support Ext.NET components. For example for setting the value in the Ext.NET's text field, the appropriate way to set it is via "App.txtProduceDate.setValue(value);". Just overriding the inner element's field's value does no good to Ext.NET controls and events handling stuff.

    In your example, I see the HTML5 input element has the CSS class you specify, so it should be triggering. But in Ext.NET, the components are first written in ExtJS (our underlying framework from Sencha) language, which is a javaScript code that runs on the page during load, and only then the DOM elements (like the INPUT element with the CSS Class you want to trigger the date pick event) are drawn on the page.

    It just happens that when your plugin script is run, the Ext.NET control still hasn't drawn the DOM elements to the page.

    In this case, you can make it work by delaying the jQuery script execution after Ext.NET is done drawing the page, changing your script tag to this:
        Ext.onReady(function () {
            jQuery(function () {
                var calendar = jQuery.calendars.instance('Islamic', 'ar');
                jQuery('.showCal').calendarsPicker({ calendar: calendar });
    Then you'll have the page working. But if for some reason (and that's not very uncommon) Ext.NET destroys and rebuilds the component, the jQuery script will probably stop interacting with the control. You'd have to bind that jQuery script to the component's rendering, for example.

    You can actually just make something like this:
        var handleInputRender = function() {
            jQuery(function () {
                var calendar = jQuery.calendars.instance('Islamic', 'ar');
                jQuery('.showCal').calendarsPicker({ calendar: calendar });
    <input id="txtProduceDateHtml5" type="text" class="showCal" /> //The Plugin works fine here
    <ext:TextField ID="txtProduceDate" Width="250" runat="server" Margin="5" FieldLabel="تاريخ الإنتاج" FieldCls="showCal">
            <Render Fn="handleInputRender" />
    And you'll ensure the jQuery script is re-run every time the control is rendered.

    Bottomline is: with Ext.NET you'd have to just get the hang of the page and components life cycle and you'll be able to run the scripts just fine. But as the components are more complex, in several situations the plugin might not just support it and you'd have to code something in order to ensure the third-party plug in works as expected.

    We hope you understand this is quite beyond our reach to ensure Ext.NET compatibility with third-party scripts and plug ins out there. But also hope the information here helps you integrate your favourite plugin and use it with Ext.NET!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Thank you very much, now its work like a charm!

    a tiny problem here is that when i use the plugin inside a windows it will not appear.

      <ext:Window ID="editPersonAuthorWindow" runat="server"><items>
     <ext:TextField ID="txtAttachmentNo" LabelWidth="100" Width="300" runat="server" Margin="5"
                                                                 <Render Fn="handleInputRender" />
  6. #6

    It "works" for me. But of course, you'd have to adjust your jQuery plugin to correctly display the dropdown date selection by the field. Again, you'd have to write actual plugin support for the Ext.NET components in many, many situations. We can't say the plugin you are using is supported by Ext.NET nor that the plug in does support Ext.NET.

    So, I am afraid you are on your own if you want the plug in to support Ext.NET.

    Of course, if you can modify the jquery plug in to support Ext.NET we'd be more than happy to hear the good news from you and wouldn't mind if you share your progress here.

    Something that might help you considerably in the process of implementing support for the plug in would be reviewing ExtJS documentation and API docs:
    - ExtJS documentation home
    - ExtJS API documentation for latest ExtJS to date (6.0.2 -- part of Ext.NET 4.1.0).

    I hope this helps! Unfortunately, we can't step further in on this matter.
    Fabrício Murta
    Developer & Support Expert
  7. #7
    I found how to show calender or any jqury plugin over an ext.window using css

    .calendars-popup {//css class name
        /*must be over 80000 to beat ext.window*/
        z-index: 80000 !important;
    thank you
  8. #8
    Hello @odaysaed! Thanks for sharing the solution that works for you on this scenario!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Islamic ( hijri ) Calender
    By ITECH-Developer in forum Open Discussions
    Replies: 1
    Last Post: Oct 25, 2015, 8:25 PM
  2. Date picker of Month Year Type > Set Date Value Manually
    By PriceRightHTML5team in forum 2.x Help
    Replies: 0
    Last Post: May 19, 2015, 10:39 AM
  3. Replies: 3
    Last Post: May 09, 2012, 4:28 PM
  4. Ext js calender to support arabic culture
    By hsabatin2011 in forum 1.x Help
    Replies: 0
    Last Post: Jun 08, 2011, 11:13 AM
  5. Replies: 3
    Last Post: May 06, 2010, 12:48 PM

Tags for this Thread

Posting Permissions