locked
datepicker custom control RRS feed

  • Question

  • I'm stuck when it comes to inserting a custom control in LS. I've read through the example given in the Book Visual Lightswitch 2012. But I'm trying to use the datepicker from jquery.com.

    No matter what I do, I seem to get the error message on my custom control:

    CustomControl Error:

    DateField_render() method

    error: TypeError:

    $(...).datepicker is not a function

    The code i've tried is:

    myapp.AddEditTable1Item.DateField_render = function (element, contentItem) {
        // Write code here.
        var DateField = $('<input id="DateField" type="datetime"/>');
        DateField.appendTo($(element));

        $(function () {
            var now = new Date();
            $('#DateField').datepicker()
        });

    };

    If someone could show me how to accomplish a fully functional custom control for this (and what I am doing wrong) I would be very grateful.

    Monday, May 19, 2014 7:47 PM

Answers

  • Big thank you to both Josh and LittleBobbyTales.

    I finally got it rendering, but intstead of using the datepicker http://demos.jquerymobile.com/1.4.0/datepicker/

    I found the JQuery Mobile Datebox, by lots of trial and error I got it rendering, all left now is binding it to the control so I can pass the data back to the database.

    I will try to see if your new suggestion works, so I can perhaps mark one as an answer.

    Again, thank you very much for your help.

    • Edited by hasse_76 Wednesday, May 21, 2014 4:12 PM
    • Marked as answer by Angie Xu Monday, May 26, 2014 1:15 AM
    Wednesday, May 21, 2014 4:11 PM

All replies

  • I think datepicker widget is in jQuery UI library.  LS doesn't use that lib.  You can download, add to project and reference it in your default.htm.  Then try your code again.

    HTH,

    Josh

    Monday, May 19, 2014 8:13 PM
  • Hi Josh, thanks for replying. I forgot to mention that I have downloaded the .js files and css from Jquery.com and added them to the project. So that should not be the issue here.

    Tuesday, May 20, 2014 7:48 AM
  • Many jQueryUI controls are not supported for use along with jQuery Mobile.  If you're lucky someone may have worked out the bugs and created an adaptor to make it work.  It appears such a solution exists on github to make jQueryUI datepicker work with jQuery Mobile.  Check this out:

    http://demos.jquerymobile.com/1.4.0/datepicker/

    HTH,

    Josh

    Tuesday, May 20, 2014 11:04 AM
  • Thanks Josh, that helped me a bit, at least now it recognizes the datepicker as a function.

    When trying this:

    myapp.AddEditdemo.Dato_render = function (element, contentItem) {
        // Write code here.
        var Dato = $('<input id="Dato" type="date" />');
        Dato.appendTo($(element));
    
        $(function(){
            var now = new Date();
            $(element).date("now");
        });
        
    };
    I get the errormessage "Cannot call methods on date prior to initialization attempted to call method 'now' (this applies to all methods it seems)
    Wednesday, May 21, 2014 12:23 PM
  • I don't see a "now" method in the documentation.  I havn't tested but I think it defaults to today unless you specify a default or call setDate method.  Also you need to make the input into a datPicker rater than the element ( which is just the presenter which contains your input)  Try this:

    myapp.AddEditdemo.Dato_render = function (element, contentItem) {
        // Write code here.
        var Dato = $('<input id="Dato" type="date" />');
        Dato.appendTo($(element));
        Dato.date();
    };

    If that renders a working picker, but doesn't default to the date you want then try some of these options:

    Edit:  jQuery controls have options and methods.  I believe you can set an option during init, but you cannot call a method without first initializing. 

    For example, defaultDate in a option so you can set it in the init:

    //init and set defaultDate option

    Dato.date({ defaultDate: Date() });

    setDate is a method so you first init then call on a separate line:

    //init picker

    Dato.date();

    //call setDate method

    Dato.date("setDate"Date() );

    Last hint...sometimes you must force a delay to allow jQ to do it's magic.  If all else fails wrap the offending code in a setTimeout like so:

    setTimeout(function () {
     Dato.date("setDate"Date() );
    }, 1000);

    Adjust timeout to suit.          

    HTH,

    Josh




    • Edited by joshbooker Wednesday, May 21, 2014 1:22 PM Edit
    Wednesday, May 21, 2014 1:04 PM
  • The code in your original post is correct.  The error message indicates you have not loaded the jQuery scripts in the correct order.

    Here is a partial sample correct ordering in the default.htm file for loading jQuery, jQueryUI and jQuery mobile in one of my 2012 LightSwitch projects that permits the datepicker code to work as-is in the first post:

    <script type="text/javascript" src="Scripts/modernizr.custom.94187.js"></script>
        <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
        <script type="text/javascript" src="Scripts/winjs-1.0.min.js"></script>
        <script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="Scripts/jquery-ui-1.10.1.min.js"></script>
        <script type="text/javascript" src="Scripts/jquery-ui-i18n.min.js"></script> 
        <script type="text/javascript" src="Scripts/jquery-migrate-1.1.1.min.js"></script>
        <script type="text/javascript" src="Scripts/jquery.mobile-1.3.2.min.js"></script>

    Wednesday, May 21, 2014 1:47 PM
  • Big thank you to both Josh and LittleBobbyTales.

    I finally got it rendering, but intstead of using the datepicker http://demos.jquerymobile.com/1.4.0/datepicker/

    I found the JQuery Mobile Datebox, by lots of trial and error I got it rendering, all left now is binding it to the control so I can pass the data back to the database.

    I will try to see if your new suggestion works, so I can perhaps mark one as an answer.

    Again, thank you very much for your help.

    • Edited by hasse_76 Wednesday, May 21, 2014 4:12 PM
    • Marked as answer by Angie Xu Monday, May 26, 2014 1:15 AM
    Wednesday, May 21, 2014 4:11 PM
  • Hello hasse_76,

    Can u please share the code for implementig the datebox in ls html? 

    Im trying for days and couldnt get it to work.

    Kind regards,

    Thomas

    Sunday, June 15, 2014 2:33 PM