datepicker API

Peter_1985 2,486

Hi,
Is there good example of datepicker API to be used well on a TextBox?

Accepted answer

Zhi Lv - MSFT 32,011 Reputation points Microsoft Vendor

2021-09-17T02:13:54.487+00:00

Hi @Peter_1985 ,

From your description, it seems that your application is an Asp.net Webforms application, right?

In this scenario, you could consider use the Bootstrap Datepicker or JQUery UI Datepicker. Please refer the following sample:

Using Bootstrap Datepicker:

The result as below: you can download the code from here.

Use JQuery UI DatePicker:

The result as below: you can check the code from here.

Reference:

Bootstrap Datepicker sample

JQuery UI Datepicker

If the answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion
Please sign in to rate this answer.
Peter_1985 2,486 Reputation points

2021-09-17T02:49:13.287+00:00

Thanks a lot.
What is problem that I put Style code to Javascript1.js below?
]1

Zhi Lv - MSFT 32,011 Reputation points Microsoft Vendor

2021-09-17T05:15:11.943+00:00

Hi @Peter_1985 ,

What is problem that I put Style code to Javascript1.js below?

The Style code should add to the XXX.css file or in the <style> tag, instead of the Javascript1.js file.

Zhi Lv - MSFT 32,011 Reputation points Microsoft Vendor

2021-09-17T07:52:39.933+00:00

Hi @Peter_1985 ,

Please check the Textbox, whether the id is txtdate or not? You can use F12 developer tools to check the html element.

Besides, try to use F12 developer Network tools to check whether the CSS and JS reference load success and use F12 developer Console tools to check if there have any error?

Peter_1985 2,486 Reputation points

2021-09-17T07:57:52.883+00:00

Here is TBbox:

<asp:TextBox ID="tb_Update_date"
...

Zhi Lv - MSFT 32,011 Reputation points Microsoft Vendor

2021-09-17T09:45:54.663+00:00

Hi @Peter_1985 ,

Whether the datepicker works or not? Is there any update about this question?

If it still not working, try to use F12 developer Elements tool to check the html elements, use the Network tools to check whether the CSS and JS reference load success and use the Console tools to check if there have any error?

Peter_1985 2,486 Reputation points

2021-09-17T22:15:59.71+00:00

Thanks. With code below

I deployed the project and refreshed the page. See no other issue (by F12). But to the relevant field tb_Update_date, I cannot make date picker come out. Will mouse hover make it come out?

Zhi Lv - MSFT 32,011 Reputation points Microsoft Vendor

2021-09-20T01:44:19.937+00:00

Hi @Peter_1985 ,

Please compare your code with mine, it seems that you want to use the JQuery UI method to display the date picker, but in your script, you are using the Bootstrap Datepicker's property or statement to configure the Datepicker, this may be the reason the selector is not working. Please try to use my code.

Peter_1985 2,486 Reputation points

2021-09-20T03:03:10.59+00:00

Thanks. Is issue due to the reference against "..code.jquery.." line?

Zhi Lv - MSFT 32,011 Reputation points Microsoft Vendor

2021-09-20T03:16:38.95+00:00

Hi @Peter_1985 ,

Yes, the relate DatePicker reference is not match with the javascript script. In your preview code, you are using the JQuery UI reference, but in the script, you are using the Bootstrap Datepicker statement to configure the text box.
Sign in to comment

2 additional answers

Peter_1985 2,486 Reputation points

2021-09-20T03:52:07.593+00:00

I put code like

but I do not see the date selector when hovering to that date field.
Please sign in to rate this answer.
Zhi Lv - MSFT 32,011 Reputation points Microsoft Vendor

2021-09-20T09:06:51.393+00:00

Hi @Peter_1985 ,

but I do not see the date selector when hovering to that date field.

The date selector will display when the cursor is in the text box. check this screenshot:

Note: Since I'm using the master page, I need to add the ClientIDMode="Static" to make the Id not changed. And in the <script> tag, I didn't add the src attribute.

Peter_1985 2,486 Reputation points

2021-09-20T09:33:01.953+00:00

There is issue below on web page. How to identify which line is having the reason of issue?

Zhi Lv - MSFT 32,011 Reputation points Microsoft Vendor

2021-09-20T09:46:13.7+00:00

Perhaps you are adding multiple versions of jQuery reference, try to use F12 developer tools to check it and remove it. Besides try to remove the src = "JavaScript1.js"from the <script> tag and check whether the date picker works or not?

Peter_1985 2,486 Reputation points

2021-09-20T09:52:22.943+00:00

I remove that and do not see the error shown on my previous reply, but datepicker is still not shown expectedly.

Zhi Lv - MSFT 32,011 Reputation points Microsoft Vendor

2021-09-20T09:56:20.78+00:00

Whether the textbox's id is correct or not? Is there any error in the console panel? Try to use F12 developer tools to check it.

If still not working, can you create a simple sample and share it via Github or Onedrive, then, we could check it and help you fix it based on your sample code.

Peter_1985 2,486 Reputation points

2021-09-21T02:05:26.31+00:00

As line below has been commented

if (!IsPostBack)

does it mean all codes within it, will be always triggered whenever we refresh the page, right?

Peter_1985 2,486 Reputation points

2021-09-21T02:07:00.16+00:00

As line below has been commented

does it mean all codes within it, will be always triggered whenever we refresh the page, right?

Peter_1985 2,486 Reputation points

2021-09-21T02:07:40.523+00:00

As line below has been commented

if (!IsPostBack)

does it mean all codes within it, will be always triggered whenever we refresh the page, right?
Sign in to comment
Peter_1985 2,486 Reputation points

2021-09-21T02:09:31.797+00:00

As line below has been commented

if (!IsPostBack)

does it mean all codes within it, will be always triggered whenever we refresh the page, right?
Please sign in to rate this answer.
Zhi Lv - MSFT 32,011 Reputation points Microsoft Vendor

2021-09-21T02:28:14.713+00:00

Hi @Peter_1985 ,

The reason I comment out the if (!IsPostBack){} statement in Page_Load is that I didn't create the database, if I directly running your application, in the if statement, it will show the database connect error. This part of code should not relate the data picker, I just want to say that by using your existing code in the Default.aspx page, the datepicker works well.

Please check this screenshot:
Sign in to comment