Set date format in jquery ui datepicker

The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages.  You can customize the date format.

1. d – day of month (single digit where applicable)
2. dd – day of month (two digits)
3.  o – day of the year (no leading zeros)
4. oo – day of the year (three digit)
5. m – month of year (single digit where applicable)
6. mm – month of year (two digits)
7.  y – year (two digits)
8.  yy – year (four digits)
9. D – short day name
10.  DD – full day name
11.  M – short month name
12.  MM – long month name
13.  '...' – any literal text string
14.  @ - UNIX timestamp (milliseconds since 01/01/1970)
15. ! – Windows ticks (100ns since 01/01/0001)

 (function(){
    var pickerOpts = {
       dateFormat:"d MM yy"
    };
    $("#date").datepicker(pickerOpts);
 });

predefined date formats for datepicker

The complete set of predefined date formats

Option value	Date format
$.datepicker.ATOM	"yy-mm-dd"
$.datepicker.COOKIE	"D, dd M y"
$.datepicker.ISO_8601	"yy-mm-dd"
$.datepicker.RFC_822	"D, d M y"
$.datepicker.RFC_850	"DD, dd-M-y"
$.datepicker.RFC_1036	"D, d M y"
$.datepicker.RFC_1123	"D, d M yy"
$.datepicker.RFC_2822	"D, d M yy"
$.datepicker.RSS	"D, d M y"
$.datepicker.TIMESTAMP	@ (UNIX timestamp)
$.datepicker.W3C	"yy-mm-dd"

Read More

How get tag name in Jquery

For finding any element tag name, we can get using following code.

Code

var tagName = $(this).get(0).tagName;

Example

<html>
<head>
<link href='css/custom-theme/jquery-ui-1.8.16.custom.css' rel='stylesheet' type='text/css'> 
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
</head>
<script>
$("#new_button").button();
$("#new_button").click(function() {
var TagName = $(this).get(0).tagName; 
alert(TagName);
var ParentTagName = $(this).parent().get(0).tagName; 
alert(ParentTagName);
});
</script>

<body>
<div style="display: table-cell; float: right;"><a id="new_button">New</a></div>
</body>
</html>

Read More

How to create a 'Close page' message for unsaved web form data?

I'm creating an PHP web application and I want to implement logic to warn the user when they are navigating away from a page they've edited. I found some solution on the .


For this solution we bound a JavaScript function to the unload event:

 window.onbeforeunload  

I use following code in different aspect
For all type of Input .

$(document).ready(function() { 
    $(":input").one("change", function() { 
        window.onbeforeunload = function() { return 'You will lose data changes.'; } 
    }); 
    $('.noWarn').click(function() { window.onbeforeunload = null; }); 
});

Your input elements probably do not exist when the code is executed. Try using the .live function to detect changes on all input elements, or wrap your code in a $(document).ready() handler.

$('input').live("change", function () {
    window.onbeforeunload = function () { return "Your changes have not been saved?" };
});

For specific input type on body

$(document).ready(function() {

    //----------------------------------------------------------------------
    // Don't allow us to navigate away from a page on which we're changed
    //  values on any control without a warning message.  Need to class our 
    //  save buttons, links, etc so they can do a save without the message - 
    //  ie. CssClass="noWarn"
    //----------------------------------------------------------------------
    $('input:text,input:checkbox,input:radio,textarea,select').one('change', function() {
        $('BODY').attr('onbeforeunload',
        "return 'Leaving this page will cause any unsaved data to be lost.';");
    });

    $('.noWarn').click(function() { $('BODY').removeAttr('onbeforeunload'); });

});

Best solution for form base: In this solution if you are change something in your form then when you want to leave from this page user can get a message for confirmation.

function formIsDirty(form)
      {
          for (var i = 0; i < form.elements.length; i++)
          {
              var element = form.elements[i];
              var type = element.type;
              if (type == "checkbox" || type == "radio")
              {
                  if (element.checked != element.defaultChecked)
                  {
                      return true;
                  }
              }
              else if (type == "hidden" || type == "password" || type == "text" ||
                       type == "textarea")
              {
                  if (element.value != element.defaultValue)
                  {
                      return true;
                  }
              }
              else if (type == "select-one" || type == "select-multiple")
              {
                  for (var j = 0; j < element.options.length; j++)
                  {
                      if (element.options[j].selected !=
                          element.options[j].defaultSelected)
                      {
                          return true;
                      }
                  }
              }
          }
          return false;
      }

      window.onbeforeunload = function(e)
      {
          e = e || window.event;  
// You put your from ID
          if (formIsDirty(document.forms['fromid'])) 
          {
              // For IE and Firefox
              if (e)
              {
                  e.returnValue = "You have unsaved changes.";
              }
              // For Safari
              return "You have unsaved changes.";
          }
      };

Read More