Both enabling and setting date format of Jquery UI Datepicker

Question

I need to both enable and set the date format of Jquery UI Datepicker as shown in the example below. I have tried different permutations but they do not work. I have also looked online but it appears that I can use only one or the other. Please let me know if this is possible

$("#frm-renew-btn").on("click", function() {
    $('#renewDate').datepicker({
        disabled: true
    });
    $('#renew-dlg').dialog({
        closeOnEscape: false,
        modal: true,
        draggable: false,
        resizable: false,
        hide: {
            effect: 'fade',
            duration: 100
        },
        stack: true,
        zIndex: 10000,
        fluid: true,
        dialogClass: 'ui-dialog-osx',
        open: function(event, ui) {
            $('#renewDate').datepicker({
                dateFormat: "dd MM yy",
                title: 'Test Dialog',
                minDate: 0,
                maxDate: 365
            }).val();
            $('#renewDate').datepicker('enable')
        },
        close: function(event, ui) {
            $('#renewDate').datepicker('disable');
        },
        buttons: [{
            id: "btn-ok-dlg",
            text: "OK",
            click: function() {
                confirm_renewal();
                $(this).dialog('destroy');
            }
        }, {
            id: "btn-close-dlg",
            text: "Cancel",
            click: function() {
                $(this).dialog('destroy');
                $('#renew-dlg').empty();
            }
        }],
    });
});

<div id="renew-dlg" title="Renew your Application">Enter new End Date: <input type="text" id="renewDate" /></div>

Your code appears to be working fine in isolation: jsfiddle.net/0fovje6h. I would suggest checking the console for errors in your version. Also note that using , as a statement separator in JS is a really bad idea. I'd strongly suggest always using ; instead. — Rory McCrossan
– Rory McCrossan, Commented Oct 18, 2018 at 15:07
Thanks a million Rory. It's not working in the context of how I am using it. I will include my full code to clarify. — DVB
– DVB, Commented Oct 18, 2018 at 15:16
@DVB if this is your full code, then you're not initializing the datepicker properly. Consider initializing it before any events. Then enable or disable during event callbacks. — Twisty
– Twisty, Commented Oct 18, 2018 at 15:34
Thanks Twisty! Great point about the initialisation. I have now done that and will put my code below in case anyone else has this question. I am probably an Intermediate Developer so I am still learning! — DVB
– DVB, Commented Oct 18, 2018 at 16:17

Twisty · Accepted Answer · 2018-10-18 17:10:12Z

Expanding on my comment, you will want to either create the dialog and datepicker with options like autoOpen: false or create them on the fly. It looked like you intended to create them on the fly, so I provide the following example.

$(function() {
  function confirm_renewal(date) {
    var result = confirm("Please confirm that you wish to renew your application for " + date);
  }

  function enableDialog(event) {
    var $dlg = $("<div>", {
      id: "renew-dlg",
      title: "Renew Your Application"
    });

    var $dp = $("<input>", {
      id: "renewDate",
      type: "text",
      class: "ui-state-default"
    }).appendTo($dlg);

    $dp.datepicker({
      dateFormat: "dd MM yy",
      title: 'Test Dialog',
      minDate: 0,
      maxDate: 365,
      disabled: true
    });

    $dlg.dialog({
      closeOnEscape: false,
      modal: true,
      draggable: false,
      resizable: false,
      hide: {
        effect: 'fade',
        duration: 100
      },
      stack: true,
      zIndex: 10000,
      fluid: true,
      dialogClass: 'ui-dialog-osx',
      open: function(event, ui) {
        $dp.datepicker('enable');
      },
      close: function(event, ui) {
        $dp.datepicker('disable');
      },
      buttons: [{
          id: "btn-ok-dlg",
          text: "OK",
          click: function() {
            if ($dp.val() == "") {
              $dp.addClass("ui-state-highlight");
              return false;
            }
            $(this).dialog('destroy');
            $dp.datepicker('destroy');
            confirm_renewal($dp.val());
            $dp.remove();
            $dlg.remove();
          }
        },
        {
          id: "btn-close-dlg",
          text: "Cancel",
          click: function() {
            $(this).dialog('destroy');
            $dp.datepicker('destroy');
            $dp.remove();
            $dlg.remove();
          }
        }
      ],
    });
  }
  $("#frm-renew-btn").on("click", enableDialog);
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<button id="frm-renew-btn">Renew</button>

Wrapping it in a function allows you to execute it as a callback. You will see that I create the HTML Elements and then initialize the jQuery UI to those elements. I added some checks and remove everything once done.

Hope that helps.

@DVB glad to help. You're welcome. If it helps, please feel free to upvote and mark it as the answer.

DVB · Accepted Answer · 2018-10-18 16:20:27Z

This is my final code which I adapted through the responses above. It's now working very well.

$("#frm-renew-btn").on("click", function () {
    $('#renewDate').datepicker({
        dateFormat: "dd MM yy",
        title: 'Test Dialog',
        minDate: 0,
        maxDate: 365,
        disabled: true
    }).val();
    $('#renew-dlg').dialog({
        closeOnEscape: false,
        modal: true,
        draggable: false,
        resizable: false,
        hide: {
            effect: 'fade',
            duration: 100
        },
        stack: true,
        zIndex: 10000,
        fluid: true,
        dialogClass: 'ui-dialog-osx',
        open: function (event, ui) {
            $('#renewDate').datepicker('enable');
        },
        close: function (event, ui) {
            $('#renewDate').datepicker('disable');
        },
        buttons: [{
                id: "btn-ok-dlg",
                text: "OK",
                click: function () {
                    $(this).dialog('destroy');
                    $('#renewDate').datepicker('destroy');
                    confirm_renewal();
                }
            },
            {
                id: "btn-close-dlg",
                text: "Cancel",
                click: function () {
                    $(this).dialog('destroy');
                    $('#renewDate').datepicker('destroy');
                }
            }
        ],
    });
});

<div id="renew-dlg" title="Renew your Application">Enter new End Date: <input type="text" id="renewDate" /></div>

Collectives™ on Stack Overflow

Both enabling and setting date format of Jquery UI Datepicker

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related