How to Make date Picker field non-editable using java script. currently we are u

Can you have a text field that shows the date value as read-only instead of having a date field and disabling that field?

You should be using the out of the box (make field as disabled) option. I dont see the point of showing a calendar icon on the date field if users cant do anything with it.

Hi sathya,
our use case is creating dynamic task in appian, so we are providing start date and due date and other info as input for creating tasks. we have three custom status for the task e.g("Pending","Active","Completed"). when next time Administrator of Application opens the form which lists all the tasks,depending on the status of the Tasks the appropriate date field should get disable. we can not use default option to make field invisible or disable because its a grid which contain list of task having different status.

What you are saying is combination of two sets of information. If I understood you correctly, you are displaying mixed content in a grid where some can and some cannot be modified. If that's the case, there are the two OOTB options you can do.
Display the content in a paging grid so users selects the row they want to modify and make the changes in a following form. This will give you the option to control the field based on the status of the row selected.
Option 2: Allow all the date field to be editable but put an instruction on top of the grid indicating changing date for records that cannot be modified (for e.g. completed) will throw a validation error. Then validate the change when user submits the form and if the user had made an error by editing one such row, bring the user back to the same form highlighting the error.