www.webdeveloper.com
Results 1 to 15 of 15

Thread: Is there any way that JavaScript can be used so that only dates in the MM/YYYY format

Hybrid View

  1. #1
    Join Date
    Feb 2012
    Posts
    64

    Is there any way that JavaScript can be used so that only dates in the MM/YYYY format

    after the current month can be entered?

    For instance, if the user types in something like 05/2013, then it is accepted but if they enter in something like 03/2012, then it it not accepted?

    Any help is appreciated

  2. #2
    Join Date
    Jan 2012
    Posts
    10
    A simple solution would be to split the user input string into month and year and compare the two with the current date, like this:

    PHP Code:
    function compareDate(userInput){
        var 
    currentDate = new Date();
        var 
    currentMonth currentDate.getMonth() + 1;    // getMonth() returns the month as a number from 0 - 11, therefore add 1
        
    var currentYear currentDate.getFullYear();    // 4-digit representation of the current year
      
        
    var userDate userInput.split("/");    // Split user input at "/"
        
    var userMonth userDate[0];
        var 
    userYear userDate[1];
        if (
    userYear currentYear) return false;    // User input year < current year
        
    if (userYear == currentYear && userMonth <= currentMonth) return false;    // User input year is current, but month is <= current month.
        
        
    return true;    // User input date must be valid
    }

    compareDate("04/2012"); // Returns true
    compareDate("02/2012"); // Returns false 
    But you might want to check that the user input is in a valid format (not "03-2012", "march 2012" etc.) before using a function like this.

  3. #3
    Join Date
    Feb 2012
    Posts
    64
    Quote Originally Posted by proj View Post
    A simple solution would be to split the user input string into month and year and compare the two with the current date, like this:

    PHP Code:
    function compareDate(userInput){
        var 
    currentDate = new Date();
        var 
    currentMonth currentDate.getMonth() + 1;    // getMonth() returns the month as a number from 0 - 11, therefore add 1
        
    var currentYear currentDate.getFullYear();    // 4-digit representation of the current year
      
        
    var userDate userInput.split("/");    // Split user input at "/"
        
    var userMonth userDate[0];
        var 
    userYear userDate[1];
        if (
    userYear currentYear) return false;    // User input year < current year
        
    if (userYear == currentYear && userMonth <= currentMonth) return false;    // User input year is current, but month is <= current month.
        
        
    return true;    // User input date must be valid
    }

    compareDate("04/2012"); // Returns true
    compareDate("02/2012"); // Returns false 
    But you might want to check that the user input is in a valid format (not "03-2012", "march 2012" etc.) before using a function like this.
    Would this be applicable to a text box? For instance, my text box is called cardexp. Could I call the compareDate() function like this?

    compareDate(cardexp).

    I'm not sure if I have validation to check that the date is in an MM/YYYY format, but I would expect that it would require a regexp function?

  4. #4
    Join Date
    Mar 2012
    Location
    chandigarh
    Posts
    33

    Wink Hi

    Thank you for this coding, I am searching for it.

  5. #5
    Join Date
    Jan 2012
    Posts
    10
    Would this be applicable to a text box? For instance, my text box is called cardexp. Could I call the compareDate() function like this?

    compareDate(cardexp).
    If "cardexp" is the id of the textbox you could do:

    PHP Code:
    if (compareDate(document.getElementById('cardexp').value)){
        
    // compareDate returns true, do sum awsm stuffz
        
    alert("You entered a valid date.");
    }else{
        
    // compareDate returned false
        
    alert("Date must be next month or later.");

    Yes, the validation of the user input format can easily be done with regexp.

    PHP Code:
    function valiDate(userInputDate){
        var 
    dateFormat=/^[0-9]{2}\/{1}[0-9]{4}$/g;    // Create new RegExp
        
    if (userInputDate.match(dateFormat)) return true;    // User input is valid
        
    return false;    // Not valid

    You then call valiDate from compareDate. Both functions put together:

    PHP Code:
    function compareDate(userInput){
        
        if (!
    valiDate(userInput)){    // If format is not MM/YYYY
            
    alert("Date format must be MM/YYYY.");
            return 
    false;
        }
        
        var 
    currentDate = new Date();
        var 
    currentMonth currentDate.getMonth() + 1;    // getMonth() returns the month as a number from 0 - 11
        
    var currentYear currentDate.getFullYear();    // 4-digit representation of the current year
      
        
    var userDate userInput.split("/");    // Split user input at "/"
        
    var userMonth userDate[0];
        var 
    userYear userDate[1];
        if (
    userYear currentYear) return false;    // User input year < current year
        
    if (userYear == currentYear && userMonth <= currentMonth) return false;    // User input year is current, but month is <= current month.
        
        
    return true;    // User input date must be valid
    }

    function 
    valiDate(userInputDate){
        var 
    dateFormat=/^[0-9]{2}\/{1}[0-9]{4}$/g;    // Create new RegExp
        
    if (userInputDate.match(dateFormat)) return true;    // User input is valid
        
    return false;    // Not valid

    Last edited by proj; 03-10-2012 at 06:53 AM.

  6. #6
    Join Date
    Jan 2012
    Posts
    10
    Seems like the BB code removed the backspace in my regular expression. The validate function should look like this:

    HTML Code:
    function valiDate(userInputDate){
        var dateFormat=/^[0-9]{2}\/{1}[0-9]{4}$/g;    // Create new RegExp. Notice the backspace!
        if (userInputDate.match(dateFormat)) return true;    // User input is valid
        return false;    // Not valid
    } 

  7. #7
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,276
    It would be perhaps preferable to take advantage of the power of the regular expressions to simplify the user entries...

    Code:
    // With one or two digit for the month (by disregarding the other characters  - spaces, tabs or carriage returns at the beginning or at the end)
    var dateFormat=/\d?\d\/\d\d\d\d/g;
    
    // With a separator chosen by the user
    var dateFormat=/\d?\d\.\d\d\d\d/g;
    
    // Then your function would be
    function validDate(userInputDate){
       var userMonth=userYear=null;
       var dateFormat=/(\d?\d\).(\d\d\d\d)/g; // With two sub-patterns 
       userInput.replace(dateFormat,function(a,b,c){userMonth=b;userYear=c;});
       if (!userMonth || !userYear)  // the format is not valid 
          {alert("Not a valid format !" );return;} 
       // the format is valid test with userMonth-1 and userYear
       //...
    }
    It would be too possible to accept two or for digits for the year...

  8. #8
    Join Date
    Feb 2012
    Posts
    64
    EDIT: I also want it so that if everything is entered correctly, then the user is taken to the checkout.html page, but it does not seem to work. Here is my updated coding:

    Code:
    function ValidatePaymentDetails()
    {
    	var cardnum=document.forms["payment"]["cardnumber"].value;
    	var cardexp=document.forms["payment"]["cardexpirydate"].value;
        var cardsec=document.forms["payment"]["cardsecuritynumber"].value;
    if (((hasWhiteSpace2(cardnum))&&(hasWhiteSpace2(cardexp))&&(hasWhiteSpace2(cardsec))))
    {
    	alert("You have not entered any suitable values for the Card Number, Card Expiry Date or Card Security Number fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
    }
    else if (((cardnum==null||cardnum=="")&&(cardexp==null||cardexp=="") && (cardsec==null||cardsec=="")))
    {
    alert("You have not entered any suitable values for the Card Number, Card Expiry Date or Card Security Number fields. Enter in suitable values.");
    }
    else if ((hasWhiteSpace2(cardnum))&&(hasWhiteSpace2(cardexp)))
    {
    	alert("You have not entered any suitable values for the Card Number or Card Expiry Date fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
    }
    else if ((cardnum==null||cardnum=="")&&(cardexp==null||cardexp==""))
    {
    	alert("You have not entered any suitable values for the Card Number or the Card Expiry fields. Enter in suitable values.");
    }
    else if ((hasWhiteSpace2(cardnum))&&(hasWhiteSpace2(cardsec)))
    {
    	alert("You have not entered any suitable values for the Card Number or Card Security Number fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
    }
    else if((cardnum==null||cardnum=="")&&(cardsec==null||cardsec==""))
    	{
    	alert("You have not entered any suitable values for the Card Number or the Card Security Number fields. Enter in suitable values.");
    }	
    else if ((hasWhiteSpace2(cardexp))&&(hasWhiteSpace2(cardsec)))
    {
    	alert("You have not entered any suitable values for the Card Expiry Date or Card Security Number fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
    }				
    else if((cardexp==null||cardexp=="")&&(cardsec==null||cardsec==""))
    	{
    	alert("You have not entered any suitable values for the Card Expiry Date or the Card Security Number fields. Enter in suitable values.");
    }
    else if (hasWhiteSpace2(cardnum))
    {
    	alert("You have not entered in a suitable value for the Card Number field. Enter in a suitable value, possibly by removing any leading or trailing spaces");
    }
    else if(cardnum==null|| cardnum=="")
    {
    		alert("You have not entered a suitable value for the Card Number field. Enter in a suitable value.");
    }
    else if (hasWhiteSpace2(cardexp))
    {
    	alert("You have not entered in a suitable value for the Card Expiry Date field. Enter in a suitable value, possibly by removing any leading or trailing spaces");
    }
    else if(cardexp==null|| cardexp=="")
    {
    	alert("You have not entered a suitable value for the Card Expiry Date field. Enter in a suitable value.");
    }
    else if (hasWhiteSpace2(cardsec))
    {
    	alert("You have not entered a suitable value for the Card Security Number field. Enter in a suitable value, possibly by removing any leading or trailing spaces");
    }
    else if(cardsec==null|| cardsec=="")
    {
    	alert("You have not entered a suitable value for the Card Security Number field. Enter in a suitable value.");
    }
    else if (checknumber(cardnum)==false)
    {
    	alert("You have not entered in a valid Card Number in the Card Number field. Make sure that it is in the 0000-0000-0000-0000 format and remove any leading or trailing spaces. Enter in a suitable value.");
    }
    else if (checksecnumber(cardsec)==false)
    {
    	alert("You have not entered in a valid Card Security Number in the Card Security Number field. Make sure it is in the 000 format. Enter in a suitable value.");
    }
    else if (compareDate(cardexp)==true)
    {
    	return true;
    }
    
    else
    {
    	location.href="checkout.html";
    }
    }
    Thanks again for any help

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles