asp.net mvc4中bootstrap datetimepicker控件的使用

前段时间写了一篇关于调用阿里大于的短信接口来开发例会短信群发通知功能的文章http://www.jb51.net/article/94142.htm,其中的例会时间是需求中的重中之重,它需要满足“格式化”,“易输入”这两点,对短信费用关心的开发者要知道长短信是两条短信费用之和,因此,例会时间不能随意交给用户自定义输入;要考虑到“易输入”这点,只能选择日期选择控件来辅助用户输入,由于日期选择控件较为小巧使用,在页面中引入并不是难事。在本篇文章中,使用的是bootstrap的datetimepicker控件,如今bootstrap广泛使用,加之项目里用的也是bootstrap框架快速搭建界面的,这样一来选择这款日期控件也能较省资源,在这里呈上它的效果图:

  这里想分享以下我在引入datetimepicker资源时遇到的一个问题解决方法,这里你需要引入bootstrap-datetimepicker.css和bootstrap-datetimepicker.js,但是引入资源前,你需要在asp.net mvc 中的BundleConfig.cs稍作改变,要说明的是,这个日期控件依赖jquery.js和bootstrap.js,这些资源引用有时要考虑有先后顺序,应该先引用jquery.js再bootstrap.js便是bootstrap-datetimepicker.js。如果遇到控件点击无反应,可以使用火狐浏览器在控制台查看页面遇到的错误。

  在引用完资源后,这里对html结构不再说。要知道的在下载的控件zip压缩包里,有示例html,这很方便进行操作。现在解决了易输入的需求,再之是格式化,好在这个日期控件得到的日期时间已经是规范化的,但有一个问题,选择的时间是英文的,是否需要汉化也是一个考虑的方向。

  项目里对时间要求的格式为如:10月04。这里不考虑汉化,在后台代码中对字符串处理,得到预期的时间日期。这里可以采用ajax提交选择的日期。先在在action中做处理:

 public ActionResult SmsSendForMeeting(FormCollection Form)
 {
 string Operator = Form["Operator"] ;//发送者
 string Department =Form["Department"] ;//部门名称
 string Time = Form["Time"].ToString();//设定的时间
 //对日期进行处理
 //日期格式:"18 September 2016 - 08:30 pm"
 Time = sp.DateParse(Time);//调用日期处理函数
 //省略其他无关代码
 return View();
 }

  这里用到了DateParse()方法,这是解决日期格式转换的方法。这里的思路就两条,一个是将年份和空格去掉,一个便是将英文月份转换为数字月份,也就是string的操作。

 public string DateParse(string Time)
 {
 //string Time = "19 January 2016 - 09:00 pm";
 Time = Time.Replace(" ", "");//去除空格
 string day = Time.Substring(0, 2) + "日";//取出“日”
 int c = Time.LastIndexOf(":") - 2;
 string DetailTime = Time.Substring(c);//具体到小时分钟
 int b = Time.LastIndexOf("201");//这里不是2016
 Time = Time.Remove(b);
 string month = Time.Remove(0, 2);//月份
 switch (month)
 {
 case "January":
  month = "1月";
  break;
 case "February":
  month = "2月";
  break;
 case "March":
  month = "3月";
  break;
 case "April":
  month = "4月";
  break;
 case "May":
  month = "5月";
  break;
 case "June":
  month = "6月";
  break;
 case "July":
  month = "7月";
  break;
 case "August":
  month = "8月";
  break;
 case "September":
  month = "9月";
  break;
 case "October":
  month = "10月";
  break;
 case "November":
  month = "11月";
  break;
 case "December":
  month = "12月";
  break;
 }
 string DateTime = month + day + DetailTime;//得到->9月18日08:30pm
 return DateTime;
 }

  这里就是用到的switch ()函数和string操作如substring、replace、indexof、remove等,处理的思路有许多,在这里是从左到右处理字符串。DateParse()函数最后返回就是需要的10月4日,这样就满足了对例会短信日期“格式化”和“易输入”的需求。如果我思路和方法有误,恳请各位指正,虚心求教。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • bootstrap-datetimepicker实现只显示到日期的方法

    本文实例讲述了bootstrap-datetimepicker实现只显示到日期的方法.分享给大家供大家参考,具体如下: bootstrap-datetimepicker 一般都是设置到时分秒,有时候并不需要,怎么处理呢? minView: "month", //选择日期后,不会再跳转去选择时分秒 1.引入 <link href="Public/css/bootstrap.min.css" type="text/css" rel="

  • AngularJs中Bootstrap3 datetimepicker使用实例

    关于datetimepicker的使用,参考:http://www.jb51.net/article/99896.htm 在AngularJs中使用实例: HTML代码: <div class="container" ng-app="myApp" ng-controller="myCtrl"> <div class="row"> <div class='col-sm-6'> <div

  • Bootstrap中datetimepicker使用小结

    一款简洁美观.功能强大的日期选择控件. 示例源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="bootstrap.css"&g

  • Bootstrap3 datetimepicker控件使用实例

    Bootstrap3 日期+时间选择控件的使用方法,供大家参考,具体内容如下 1.支持日期选择,格式设定 2.支持时间选择 3.支持时间段选择控制 4.支持中文 官网地址:http://eonasdan.github.io/bootstrap-datetimepicker/ git地址:https://github.com/Eonasdan/bootstrap-datetimepicker moment语言包:https://github.com/moment/moment datetimepi

  • angularjs封装bootstrap时间插件datetimepicker

    背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经很成熟的jquery UI 库和大量jquery 插件,几乎是一个取之不尽用之不竭的宝库.然而,它是否能与angularjs结合呢? 很多angularjs原教旨主义者对此持否定态度.他们认为,既然已经使用了angularjs做web应用框架,那就必须避免其他类库的干扰,做纯净的MvvM模式应用.任

  • bootstrap datetimepicker实现秒钟选择下拉框

    bootstrap datetimepicker插件没有秒钟选择器,如果要想选择的时间精确到秒没有办法控制,虽然可以配置format:'yyyy-mm-dd hh:ii:ss',会将秒钟添加到输入框中,但是无法控制秒钟数值,默认为当前客户端的时间的秒钟. 本示例修改bootstrap datetimepicker源代码,如果配置了显示秒钟format:'......ss',将会给分钟选择器层添加秒钟选择下拉框,可以自定义选择时间的秒钟部分,效果如下 bootstrap datetimepicke

  • bootstrap日历插件datetimepicker使用方法

    如何使用bootstrap日历datetimepicker插件? 一.引入文件 1.css样式 <link href="/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"> 2.js文件 <script type="text/javascript" src="/js/bootstrap-datetimepick

  • 基于bootstrap-datetimepicker.js不支持IE8的快速解决方法

    实例如下: if (!Array.prototype.indexOf) Array.prototype.indexOf = function (elt /*, from*/) { var len = this.length >>> 0; var from = Number(arguments[1]) || 0; from = (from < 0) ? Math.ceil(from) : Math.floor(from); if (from < 0) from += len;

  • Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析

    在bootstrap中的时间选择器有两种:dateTimePicker和dateRangePicker 1.dateTimePicker好像是官方嫡插件: 需要的文件: <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css"> <script src="js/bootstrap-datetimepicker.min.js"></script

  • bootstrap datetimepicker2.3.11时间插件使用

    本文实例为大家分享了bootstrap datetimepicker使用方法,供大家参考,具体内容如下 时间插件之结束时间不能小于开始时间 changeDate: function (starttime,stoptime) { //判断时间的大小弹窗提示用户 var _t = this; if(stoptime != '' && starttime != ''){ if(stoptime < starttime){ $('#stop-date').val(''); $('#time'

随机推荐