problems with design

[Telefisch]

I'm just playing around with the datepicker but have following Questions:

########## QUESTION 1 ############### If I use "jquery-ui.min.css", I don't get the arrows to select previous and next month. If I don't use this Stylesheet, I get small, black circles, with arrows for Right and left, as expected. The Buttons are existing but no glyphs.

########## QUESTION 2 ############### Then I'd like to Show the TextBox with the date and the Submit- and Cancel-Buttons in one line side by side but the Buttons are Always shown under the TextBox (Also on other Element like autogrow). I added a css style-width to the column of 200px (which is much to big) and a width of 100px to the TextBox but it is not enough to Show the Buttons Right of the TextBox. Is there a way to "connect" These Elements like an inputgroup like this example of bootstrap?:

 <div class="input-group">
   <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
   <div class="input-group-append" id="button-addon4">
     <button class="btn btn-outline-secondary" type="button">Button</button>
     <button class="btn btn-outline-secondary" type="button">Button</button>
   </div>
 </div>

This is my actual Version:

<style>
    .dateColumn {width: 200px;}
    .dateTextbox {width: 120px;}
</style>

            $(".editDate").editable('/Timesheets/saveTimesheet', {
                type: 'datepicker',
                submit: ' ',
                submitcssclass: 'btn btn-outline-success fas fa-check',
                cancel: ' ',
                cancelcssclass: 'btn btn-outline-danger fas fa-times',
                datepicker: {
                    format: "dd.mm.yy"
                },
                tooltip: "zum Bearbeiten klicken"
            });
            $('.editDate').click(function () {
                $('input', this).addClass('form-control dateTextbox');
            });

Is there a more elegant way to style the Elements?

########## QUESTION 3 ############### I could not get the sect-box working. If I click on it, no data is loaded but "Loading…" is shown. This is the way I load Data:

            $('.editSelectProject').editable('/Timesheets/saveTimesheet', {
                type: 'select',
                tooltip: 'zum Bearbeiten anklicken',
                submit: ' ',
                submitcssclass: 'btn btn-outline-success fas fa-check',
                cancel: ' ',
                cancelcssclass: 'btn btn-outline-danger fas fa-times',
                loadurl: '/Timesheets/GetProjects',
                loaddata: function () {
                    return { id: $(this).data('id') }
                },
                onsubmit: function (settings, original) {
                    oldValue = original.revert;
                },
                submitdata: function () {
                    return {
                        id: $(this).data('id'),
                        PropertyName: $(this).data('propertyname')
                    }
                },
                callback: function (value, settings) {
                    var jsonData = $.parseJSON(value);
                    if (jsonData.status) {
                        $(this).text(jsonData.value);
                    }
                    else {
                        $(this).text(oldValue);
                    }
                }
            });

This is the Controller-function:

         public ActionResult GetProjects(int id)
         {
             int selectedProject = 0;
             StringBuilder sb = new StringBuilder();

             var projects = db.Projects.OrderBy(p => p.ProjectName).ThenBy(p=>p.Created).ToList();
             foreach(var project in projects)
             {
                 //Muster: {'E':'Letter E','F':'Letter F','G':'Letter G','selected':'F'}
                 sb.Append(string.Format("'{0}':'{1}',", project.Id, project.ProjectName));
             }

             selectedProject = db.Timesheets.Where(p => p.Id == id).FirstOrDefault().ProjectId;
             sb.Append(string.Format("'selected':'{0}'", selectedProject));
             return Content("{" + sb.ToString() + "}");
         }

This result is returned: "{'1':'Project1','2':'Project2','selected':'2'}"

What's wrong here?

jQuery version: 3.3.1 Browser: Edge OS: Win10 pro

[NicolasCARPi]

Let's talk about history a bit.

The datepicker plugin is from 2008, and the whole jquery_jeditable project was abandonned for a long time before I picked it up to try and clean it up a bit, put it on npm and maintain it. The datepicker plugin hasn't really been touched for more than 10 years, which is quite a lot in web time (even 6 months is a lot so 10 years…).

Now, with HTML5 you can have a "type='date'" input and the browser will take care of doing the calendar.

So you might want to use that. Bind an onchange event on that and you're good to go.

I'm focussing on maintaining the core library because it's something I use in my main project, but can't really provide support for the plugins. Sorry. You're on your own here. I'll review pull requests but that's about it.

[Telefisch]

Ok, so can you please only help me with the select-box? Would be very helpful.

[Telefisch]

with type date Nothing happens at all