如何从日历的文本框中（从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.

Answer 1

您可以尝试使用html5标签

<input type="date">

Answer 2

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/`