Date input

This component is used for entering a date (year, month, and day, with no time). The control opens a date picker or numeric wheels for year, month, day when active in supporting browsers.

The date input component contains both a calendar picker and a basic input field with placeholder suggestion on date format (YYYY/MM/DD) to prompt and restrict users to enter the correct date format.

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Forms

Demo

Configure: select the dropdowns below to display the variety of options that a date input field supports.

Code


				
			

		
		
			
Responsive preview

			

				

					
				

			

		

		

	

    	




    
    
    



    
    
        

           Usage best practices
        

        








    
    
    



    
        

            

                
                    





    
    
    


Formatting date entry field is small but fundamental. It requires careful considerations around error handling, cultural context and mobile device behavior in order to enable users to provide accurate information with minal cognitive load.


Consider using date input when:


    

  • users need to pick a recent date or date range 

  • date is essential information inside a form and requires input accuracy 

  • the users are from diverse cultural background




    






                
                    





    
    
    


Usage examples:


    

  • date of birth

  • transaction date

  • date range for a roundtrip flight 



Related components:




    






                
            

        

    
    
    




    
    
    



    
        

            

                
                    





    
    
    





    
        
            
Do
                
                
            

        
        
    
    
    




    
    


Ensure date input control is large enough for mouse clicking and finger pressing.



    





Allow users to type the date in numerical form even if other input methods, such as calendar picker and scrolling date picker, are implemented. This is especially important when the date is likely far from the present day, such as ones date of birth. This also ensures the date input is accessible to assistive technology users.



    





Ensure labels and instructions are clear and easy to understand so that users from different cultural backgrounds can distinguish.



    





In situations where both date and time input are required, decide the order of the two component based on users' goals and behaviours. For example, when booking an appointment, study shows that a good number of users already have a certain time slot in mind. Therefore it may be better to prioritize time input and use that input as a filter for the next available appointments. For booking a flight, however, it makes more sense to ask for date input first.



    



    









                
                    





    
    
    





    
    
        
            
Don't
                
                
            

        
        
    
    




    
    


Do not split date inputs with drop-downs for month, day, and year. This adds unnecessary steps and increases interaction cost by adding additional clicks and scrolling.