How to get selected date into the text box from the calendar-that popup from Icon?

Question

I am designing a project in Asp.net-MVC 5 with C#. I am having a textbox along with a calendar Icon attached at the end. codings below:

Design:

<div class="col-md-4  col-lg-4">
   <label>From</label>
   <div class="input-group date">
      <input type="text" name="q" id="txtFrom" class="form-control" >
      <span class="input-group-btn">
      <button type="submit" name="search" id="datepicker" class="btn btn-flat btn-success">
      <i class="fa fa-calendar"></i>
      </button>
      </span>
   </div>
</div>

Script:

<script>
        $(function () { 
          $('#txtFrom').datepicker({
           autoclose: true
       })       
   })
</script>

This one is working fine, like when I click the text box, the calendar pops up and the selected date was shown in 'From' text box.

But, What I need is-the calendar must pop up only if the calendar Icon got clicked and the selected date must be displayed in 'From' Text box.

If I changed the script as below

Script:

 <script>
        $(function () { 
          $('#datepicker').datepicker({
           autoclose: true
       })       
   })
</script>

then the Pop up comes when Calendar Icon got clicked, but the value not sent to the text box. Image of my TextBox Design :

Kindly Help. TIA.

Why you create your own datepicker, there is one from HTML: `` — Presi, Jul 18 '19 at 08:09
oh If I use `type="date"` means, I no need to call my datepicker ah? — Riya, Jul 18 '19 at 08:14
It will be much more better, if the calendar pop out by clicking Icon and the selected date will be shown in text box.. — Riya, Jul 18 '19 at 08:15
@Presi One more doubt, my few text boxes need to choose year only. How to give years only calendar? — Riya, Jul 18 '19 at 08:23
Watch my Answer, I put some examples. Take the second, looks nicer. — Presi, Jul 18 '19 at 11:25

score 1 · Accepted Answer · answered Jul 18 '19 at 08:09

1

You could try to use html5 tag

<input type="date">

answered Jul 18 '19 at 08:09

SelfishCrawler

225
2
12

If I add your code, I no need to use my Icon and date picker right?? – Riya Jul 18 '19 at 08:16
How to display current date in the text box as a sample – Riya Jul 18 '19 at 08:17
you can write this `````` – SelfishCrawler Jul 18 '19 at 08:19
but the value must be current date.. IF I open tommorrow it will shows as today's date right? – Riya Jul 18 '19 at 08:21
One more doubt, my few text boxes need to choose year only. How to give years only calendar? – Riya Jul 18 '19 at 08:22
passing current date isnt possible in pure html, but you can try JS or PHP, here's the example: [link](https://teamtreehouse.com/community/html-input-date-field-how-to-set-default-value-to-todays-date) – SelfishCrawler Jul 18 '19 at 08:23
i think if you need to pass year only, then u can use simple text input and validate it to use only year format, as a suggestion – SelfishCrawler Jul 18 '19 at 08:26

score 1 · Answer 2 · answered Jul 18 '19 at 11:18

1

If you want to choose year only, like you asked in your comment, see this:

Can I use an HTML input type "date" to collect only a year?

Or this (even nicer):

`http://jsfiddle.net/lemonkazi/ucfxywh6/`

answered Jul 18 '19 at 11:18

Presi

806
10
26

Fiddle one is what I am looking for.. But I tried ur both answers but it is not working for me.. I dont know Y.. I used the same code... – Riya Jul 20 '19 at 06:04
What's the problem? Not showing or what is happening – Presi Jul 20 '19 at 10:21
I used the code.. while clicking testbox- there is no change.. I used the same code from fiddle that u gave, but calendar year pop up never come out.. which means the function in script is not working ah?? – Riya Jul 22 '19 at 07:24
I think you forgot to add the javascript libraries. In the fiddle are the ressources. You need them to execute the code – Presi Jul 22 '19 at 07:54

How to get selected date into the text box from the calendar-that popup from Icon?

2 Answers2