ASP.NET Core使用DateTimePicker的教程

标签: Asp.net jQuery
发布时间: 2016/12/2 15:55:13

介绍

本条小贴士将对如何使用JQuery插件在ASP.NET Core MVC应用程序中添加日期时间(DateTime)选择器进行说明。 如果您需要在指定的应用程序中添加日期选择器(Date Picker)或日期时间选择器(Date Time Picker),虽然也可以使用日期和日期时间选择器的HTML5控件进行添加,但页面效果会不太美观。因此我将为您讲解如何使用JQuery插件在ASP.NET Core MVC应用程序中添加日期时间选择器。 首先,我们需要添加日期和日期时间选择器类的HTML5控件,然后使用带JQuery插件的ASP.NET MVC应用程序添加日期时间选择器。与使用原有HTML5控件相比,这种方法较简单、使用较方便、页面也较美观。

Step 1: 创建 ASP.NET Core Web 应用程序

打开 Visual Studio 并创建一个新项目, 选择“.NET Framework  4.6.1” 版本 和 “ASP.NET Core Web application”模版. 给它一个名字,然后点 OK.

DateTime_Picker_New_App_ASPNET_CORE

接着从ASP.NET Core模版选择“Web Application”并创建项目.

DateTime_Picker_MVC_ASPNET_CORE

下面的就是项目被创建好后的结构.

DateTime_Picker_MVC_ASPET_CORE_JQUERY_Project_Structure

Step 2: 在Controller创建一个新的Action方法

打开 “Home“ 控制器 创建一个新的方法并命名为“DateTime_Picker_Demo”.

DateTime_Picker_MVC_ASPNET_CORE__Action_Method

接着创建一个MVC视图.

DateTime_Picker_MVC_Core_Add_View

添加以下包含布局页面的代码到新建的视图:

@{
    ViewBag.Title = "DateTime Picker Demo";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

现在,让我们添加一个HTML5日期控件到视图并输出它:

<h2>Date Time Picker Demo</h2> 

<div class="container"> 
    <div class="row">
        <div>
            @Html.Label("HTML Date control", null, new { @class = "control-label col-xs-3" })
            <div class="col-xs-3">
                <input type="date" />
            </div>
        </div>
    </div>
</div>

请找到下面的图片以供参考:

DateTime_Picker_MVC_ASPNET_CORE_View_Layout

按 F5 通过更改创建的新的action方法来查看输出 (eg:localhost:XXXXX/Home/DateTime_Picker_Demo)

DateTime_Picker_MVC_ASPNET_CORE_Click_First

在上面的例子中,我们有选择日期的选项,但不是日期和时间。所以让我们添加日期时间HTML5控制视图和查询输出。

在DIV容器视图添加以下代码:

<br />
    <div class="row">
        <div>
            @Html.Label("HTML DateTime control", null, 
            new { @class = "control-label col-xs-3" })
            <div class="col-xs-3">
                <input type="datetime-local" />
            </div>
        </div>
    </div>

请找到下面的图片:

HTML_DateTime_Picker_MVC_ASPNET_CORE

按F5然后输出.

DateTime_Picker_MVC_ASPNET_CORE_HTML_Second

用户可以同时从控件中选择日期和时间,但就像在介绍中写的,HTML5的日期控件和Date Time Picker并不是真的在网页上看起来很好。所以我们的下一个任务是在其中添加使用jQuery插件的日期时间选择器是简单,易于使用,看起来不错,比现有的HTML5的日期控件.

Step 3: 让我们开始添加Date Time Picker控件

在你的项目解决方案上从“Dependencies”文件夹右击选择“Bower”.

然后搜索名为“datetimepicker”的JQuery插件:

Bower_Date_Time_Picker_Jquery_Plug_in

首先你会安装包, 然后会看见JQuery的DateTimePicker插件被添加到 Bower文件夹,如下图:

DateTime_Picker_MVC_ASPNET_CORE_JQUERY_Bower

下一步是参考视图页面添加DateTimePicker的JS和CSS文件。将文件拖到视图中,请注意被引用的文件的顺序应遵循图片中所示的顺序。

DateTime_Picker_MVC_ASPNET_CORE_VIEW_Files

现在让我们看看视图中的代码,请添加以下代码:

<div class="container">
    <div class="row">
       @Html.Label("DateTime using Jquery plug in",null, new { @class = "control-label col-sm-3" })
               <div class="col-sm-3"> 
                @Html.TextBox("datetimepicker")
               </div>
     </div>  
</div> 

<div class="row">
    <input type="submit" class="btn-primary" value="Submit"/>
    <input type="button" class="btn-danger" value="Cancel"/>
</div>

现在添加脚本视图中引用DateTimePicker:

<script type="text/javascript">  
   jQuery('#datetimepicker').datetimepicker();  
</script>

按F5键,点击文本框来查看输出如下图所示:

DateTime_Picker_MVC_ASPET_CORE_JQUERY_ViewPage

在datetimepicker()方法有几个特性可以按你的要求配置。

我们可以设置当前的日期和时间为jQuery插件加载页时。

示例 1

//使用Date()方法获得今天的日期

    var todaysdate = new Date();

    jQuery('#datetimepicker').datetimepicker({

        dayOfWeekStart: 1,

        lang: 'en',        

        startDate: todaysdate.getDate().toString(),

        startTime: todaysdate.getTime().toString()

    });

    jQuery('#datetimepicker').datetimepicker({ value: todaysdate.getDate().toString(), step: 10 });

示例2

你可以通过设置disabledDates属性来使某些日期不可用.

disabledDates:['2016/01/11','2016/11/12','2016/11/27'],


disabled_dates_core_mvc

你可以通过这些属性来让jQuery的DateTimePicker插件按你的要求配置.

希望这会有帮助. :).


赞助商