# 日期選擇器_DateTime_Pick 含 \.NET MVC

-----

###### tags: `.NET` `javascript` `jQuery`

\[datepicker]
Type = Date
[How to add Date Picker Bootstrap 3 on MVC 5 project using the Razor engine?](https://stackoverflow.com/questions/21104633/how-to-add-date-picker-bootstrap-3-on-mvc-5-project-using-the-razor-engine)

日期驗證數據
[Assign format of DateTime with data annotations?](https://stackoverflow.com/questions/5252979/assign-format-of-datetime-with-data-annotations)

---

使用.net時想找一個日期選擇器
**不使用Html5 type=\'Date\' 因為太新Chrom/火狐以外會有問題**

但現在日期選擇器多半太久太舊
(Bootstrap 5 已出 但Bootstrap日期選擇器大多版本為3)

所以以下做個簡單整理
因為做練習時是用.NET MVC開發
所以HTML部分不多放

目前網路上多半用jQ 以及 bootstrap3

/**
 using jquery timepicker
 */
$(function(){
    $('#datepicker').timepicker({
       timeFormat: 'HH:mm:ss',
    });
})


/**
 using bootstrap3 datetimepicker
 已停止更新
 */
$(function(e){
    $('#datepicker').datetimepicker({
        format: 'YYYY/MM/DD HH:mm',
    });
})

## 第一種 datetimepicker (Bootstrap)

// Html
<div class="input-group date" id="datepicker">
    <input name="startDate" type="text" id="startDate" />
</div>

<script>
    $('#startDate').datetimepicker({
        format: 'Y-m-d HH:mm'
    });
</script>


### \.Net MVC

[How to use datepicker on MVC Core in ASP form](https://stackoverflow.com/questions/62049179/how-to-use-datepicker-on-mvc-core-in-asp-form)

// view
<div style="margin-top: 5px">
    <label>TestDateTime</label>
    <div class="input-group date" id="datepicker">
        <input type="text" class="form-control" value="@DateTime.Now.ToString("yyyy/MM/dd HH:mm")" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>

@section Scripts{
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">

    <script type="text/javascript">
        $(function (e) {
            /**
             using bootstrap3 datetimepicker
             已停止更新
             */
            $('#datepicker').datetimepicker({
                format: 'YYYY/MM/DD HH:mm',
            });
        })
}

## 第二種 datepicker(jQ)

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">

<input type="text" id="datepicker"></p>
<button type="button" onclick="test()">get_Vaiue</button>


// 以下只是格式參考
<p>Format 日期格式參考:<br>
  <select id="format">
    <option value="mm/dd/yy">Default - mm/dd/yy</option>
    <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
    <option value="d M, y">Short - d M, y</option>
    <option value="d MM, y">Medium - d MM, y</option>
    <option value="DD, d MM, yy">Full - DD, d MM, yy</option>
    <option value="&apos;day&apos; d &apos;of&apos; MM &apos;in the year&apos; yy">With text - &apos;day&apos; d &apos;of&apos; MM &apos;in the year&apos; yy</option>
  </select>
</p>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

取值

$(function () {
  $("#datepicker").datepicker({
    dateFormat: "yy-mm-dd"
  });
});

function test() {
  // alert("OK");
  alert($("#datepicker").val());
}

### \.Net MVC

這樣寫法帶值去後端可以直接得到值

// view
<div class="form-group input-group-sm">
    @Html.LabelFor(m => m.TestDate)
    @Html.TextBoxFor(m => m.TestDate, new { @class = "form-control datepicker", placeholder = "Enter Drop-off date here..." })
    @Html.ValidationMessageFor(m => m.TestDate)
</div>

@section Scripts{
    // 引入jQ
    $('.datepicker').datetimepicker({
        format: 'YYYY/MM/DD HH:mm',
    });
}





## **.NET MVC**

在上面寫法之後
首先要後端接得到值
以及可以驗證

ViewModel
在DateTime 的地方多了一個`?` 這是什麼?

[Display(Name = "日期")]
[Required]

// 下面這兩行 還不知道功能
//[DataType(DataType.DateTime)]
//[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:YYYY/MM/DD HH:mm}")]
public DateTime TestDate { get; set; }

// 或是
public DateTime? TestDate { get; set; }

Controller接值方式不同

ViewMode以下
- 預設名稱'日期'
- 不允許空欄位

[Display(Name = "日期")]
[Required]
public DateTime TestDate { get; set; }

Controller

DateTime date = model.TestDate;
return View();

返回 日期欄位必填
所以驗證是可以使用的