前端小功能开发过程小结

标签：java LocalDate 前端 util date 开发 Date Instant 小结

做select的时候，页面要求为：载入默认选项框为空白，点击下拉框显示正常选项。
有两种办法，一种纯css实现，一种借助js实现。
JS:

<body onl oad="load()">  
    <select id="abc" >          
        <option >1</option>      
        <option >2</option>          
        <option >3</option>          
        <option >4</option>       
    </select>  
</body>

控制用的js:

function load() {
            var x = document.getElementById("abc");
            x.selectedIndex = -1;
        }
    </script>

纯css的方法：

<option style="display:none" value="" selected></option>

js格式化日期。有一点不是很理解，jquery为什么没有集成类似java的SimpleDateFormatter,或者

org.apache.commons.lang3.time.DateFormatUtils#format(java.util.Date, java.lang.String)   
  /**
     * <p>Formats a date/time into a specific pattern.</p>
     *
     * @param date  the date to format, not null
     * @param pattern  the pattern to use to format the date, not null
     * @return the formatted date
     */
    public static String format(final Date date, final String pattern) {
        return format(date, pattern, null, null);
    }

<script type="text/javascript">
    function formatDateToYYYY_MM_DD(currentDate) {
        return currentDate.getFullYear() + '-' + (currentDate.getMonth() + 1) + '-' + currentDate.getDate()
    }
    function formatDateToYYYY_MM_DD_HH_MIN(currentDate) {
        return currentDate.getFullYear() + '-'
                + (currentDate.getMonth() + 1)
                + '-' + currentDate.getDate()
                + " " + currentDate.getHours()
                + ":" + currentDate.getMinutes();
    }
</script>

<dependency>
    <groupId>org.apache.commons</groupId>
    <artifactId>commons-lang3</artifactId>
    <version>3.6</version>
</dependency>

You can: .slice() and .split()

<script type="text/javascript">
    var d = "2010-10-30T00:00:00+05:30".slice(0, 10).split('-');
    console.log(d[1] + "/" + d[2] + "/" + d[0]);// 10/30/2010

...or pass your string into the Date Object:

var d = new Date("2010-10-30T00:00:00+05:30");
        //from here you can extract the desired using the following methods:
        console.log(d.getMonth() + 1 + "/" + d.getDate() + "/" + d.getFullYear());// 10/30/2010

Note that getMonth() returns the month number zero based (0-11) therefore a +1 is needed. java.uti.Date中的month也是0-11

https://stackoverflow.com/questions/11591854/format-date-to-mm-dd-yyyy-in-javascript

jQuery时间戳转换普通日期格式：
找了下网上的都是会遇到少个0的时候，所以自己弄了个不会出现单位的jquery代码

function add0(m) {
            return m < 10 ? '0' + m : m
        }
        function format(timestamp) {
            //timestamp是整数，否则要parseInt转换,不会出现少个0的情况

            var time = new Date(timestamp);
            var year = time.getFullYear();
            var month = time.getMonth() + 1;
            var date = time.getDate();
            var hours = time.getHours();
            var minutes = time.getMinutes();
            var seconds = time.getSeconds();
            return year + '-' + add0(month) + '-' + add0(date) + ' ' + add0(hours) + ':' + add0(minutes) + ':' + add0(seconds);
        }
    </script>

时间和时间戳互转http://www.jb51.net/article/44849.htm

时间选择控件：
https://github.com/smalot/bootstrap-datetimepicker 【此次使用这个,is a fork】

bootstrap-datepicker
Bootstrap-datepicker provides a flexible datepicker widget in the Bootstrap style.

https://github.com/uxsolutions/bootstrap-datepicker

Requirements
Bootstrap 2.0.4+
jQuery 1.7.1+
These are the specific versions bootstrap-datepicker is tested against (js files) and built against (css files). Use other versions at your own risk.

Dependencies
Requires bootstrap’s dropdown component (dropdowns.less) for some styles, and bootstrap’s sprites (sprites.less and associated images) for arrows.

A standalone .css file (including necessary dropdown styles and alternative, text-based arrows) can be generated by running build/build_standalone.less through the lessc compiler:

$ lessc build/build_standalone.less datepicker.css
Usage
Call the datepicker via javascript:

$('.datepicker').datepicker();

https://bootstrap-datepicker.readthedocs.io/en/stable/

时间选择控件2
https://github.com/Eonasdan/bootstrap-datetimepicker

http://momentjs.com/

Moment.js 2.18.1
Parse, validate, manipulate, and display dates and times in JavaScript

bootstrap渲染的控件：
http://getbootstrap.com/components/#input-groups

bootstrap常用样式
http://getbootstrap.com/examples/theme/#

参考：

Java 8新增了LocalDate和LocalTime接口，为什么要搞一套全新的处理日期和时间的API？因为旧的java.util.Date实在是太难用了。

java.util.Date月份从0开始，一月是0，十二月是11，变态吧！java.time.LocalDate月份和星期都改成了enum，就不可能再用错了。

java.util.Date和SimpleDateFormatter都不是线程安全的，而LocalDate和LocalTime和最基本的String一样，是不变类型，不但线程安全，而且不能修改。

java.util.Date是一个“万能接口”，它包含日期、时间，还有毫秒数，如果你只想用java.util.Date存储日期，或者只存储时间，那么，只有你知道哪些部分的数据是有用的，哪些部分的数据是不能用的。在新的Java 8中，日期和时间被明确划分为LocalDate和LocalTime，LocalDate无法包含时间，LocalTime无法包含日期。当然，LocalDateTime才能同时包含日期和时间。

新接口更好用的原因是考虑到了日期时间的操作，经常发生往前推或往后推几天的情况。用java.util.Date配合Calendar要写好多代码，而且一般的开发人员还不一定能写对。

LocalDate

看看新的LocalDate怎么用：

// 取当前日期：
LocalDate today = LocalDate.now(); // -> 2014-12-24
// 根据年月日取日期，12月就是12：
LocalDate crischristmas = LocalDate.of(2014, 12, 25); // -> 2014-12-25
// 根据字符串取：
LocalDate endOfFeb = LocalDate.parse("2014-02-28"); // 严格按照ISO yyyy-MM-dd验证，02写成2都不行，当然也有一个重载方法允许自己定义格式
LocalDate.parse("2014-02-29"); // 无效日期无法通过：DateTimeParseException: Invalid date

日期转换经常遇到，比如：

// 取本月第1天：
LocalDate firstDayOfThisMonth = today.with(TemporalAdjusters.firstDayOfMonth()); // 2014-12-01
// 取本月第2天：
LocalDate secondDayOfThisMonth = today.withDayOfMonth(2); // 2014-12-02
// 取本月最后一天，再也不用计算是28，29，30还是31：
LocalDate lastDayOfThisMonth = today.with(TemporalAdjusters.lastDayOfMonth()); // 2014-12-31
// 取下一天：
LocalDate firstDayOf2015 = lastDayOfThisMonth.plusDays(1); // 变成了2015-01-01
// 取2015年1月第一个周一，这个计算用Calendar要死掉很多脑细胞：
LocalDate firstMondayOf2015 = LocalDate.parse("2015-01-01").with(TemporalAdjusters.firstInMonth(DayOfWeek.MONDAY)); // 2015-01-05

LocalTime

LocalTime只包含时间，以前用java.util.Date怎么才能只表示时间呢？答案是，假装忽略日期。

LocalTime包含毫秒：

LocalTime now = LocalTime.now(); // 11:09:09.240

你可能想清除毫秒数：

LocalTime now = LocalTime.now().withNano(0)); // 11:09:09

构造时间也很简单：

LocalTime zero = LocalTime.of(0, 0, 0); // 00:00:00
LocalTime mid = LocalTime.parse("12:00:00"); // 12:00:00

时间也是按照ISO格式识别，但可以识别以下3种格式：

12:00
12:01:02
12:01:02.345

JDBC

最新JDBC映射将把数据库的日期类型和Java 8的新类型关联起来：

SQL -> Java
--------------------------
date -> LocalDate
time -> LocalTime
timestamp -> LocalDateTime

再也不会出现映射到java.util.Date其中日期或时间某些部分为0的情况了。

https://www.liaoxuefeng.com/article/00141939241051502ada88137694b62bfe844cd79e12c32000

Java 8中 java.util.Date 类新增了两个方法，分别是from(Instant instant)和toInstant()方法

// Obtains an instance of Date from an Instant object.
public static Date from(Instant instant) {
    try {
        return new Date(instant.toEpochMilli());
    } catch (ArithmeticException ex) {
        throw new IllegalArgumentException(ex);
    }
}

// Converts this Date object to an Instant.
public Instant toInstant() {
    return Instant.ofEpochMilli(getTime());
}

所谓的Instant类代表的是某个时间（有点象java.util.Date），它是精确到纳秒的（而不是象旧版本的Date精确到毫秒）。
如果使用纳秒去表示一个时间则原来的使用一位Long类型是不足够的，需要占用更多一点的存储空间，然而实际上其内部是由两个Long字段组成，
第一个部分保存的是自标准Java计算时代（就是1970年1月1日开始）到现在的秒数，
第二部分保存的是纳秒数（永远不会超过999,999,999）。

这两个方法使我们可以方便的实现将旧的日期类转换为新的日期类，具体思路都是

通过Instant当中介，然后通过Instant来创建LocalDateTime（这个类可以很容易获取LocalDate和LocalTime），
新的日期类转旧的也是如此，将新的先转成LocalDateTime，然后获取Instant，接着转成Date，具体实现细节如下：

@Test
    public void testInstant() {
        //Instant类代表的是某个时间（有点象java.util.Date），它是精确到纳秒的（而不是象旧版本的Date精确到毫秒）
        // 其内部是由两个Long字段组成，
        // 第一个部分保存的是自标准Java计算时代（就是1970年1月1日开始）到现在的秒数，
        // 第二部分保存的是纳秒数（永远不会超过999,999,999）
        //以ISO-8601输出
        // 国际标准化组织的国际标准ISO 8601是日期和时间的表示方法，全称为《数据存储和交换形式·信息交换·日期和时间的表示方法》
        // 年为4位数，月为2位数，月中的日为2位数，例如2004年5月3日可写成2004-05-03或20040503。
        // 小时、分和秒都用2位数表示，对UTC时间最后加一个大写字母Z，其他时区用实际时间加时差表示。
        // 如UTC时间下午2点30分5秒表示为14:30:05Z或143005Z，
        // 当时的北京时间表示为22:30:05+08:00或223005+0800，也可以简化成223005+08。
        // 合并表示时，要在时间前面加一大写字母T，
        // 如要表示北京时间2004年5月3日下午5点30分8秒，可以写成2004-05-03T17:30:08+08:00或20040503T173008+08。
        Instant instant = Instant.now();
        System.out.println(instant);//2017-07-23T05:35:04.431Z
        //将java.util.Date转换为Instant
        Instant fromDate = Instant.ofEpochMilli(new Date().getTime());
        System.out.println(fromDate);//2017-07-25T05:42:33.897Z
        //从字符串类型中创建Instant类型的时间
        instant = Instant.parse("2017-07-23T10:12:35Z");
        System.out.println(instant);//2017-07-23T10:12:35Z


    }

    // 01. java.util.Date --> java.time.LocalDateTime
    @Test
    public void UDateToLocalDateTime() {
        Date date = new Date();
        System.out.println("date:" + date);
        Instant instant = date.toInstant();
        ZoneId zone = ZoneId.systemDefault();
        LocalDateTime localDateTime = LocalDateTime.ofInstant(instant, zone);
        System.out.println("localDateTime:" + localDateTime);
    }

    // 02. java.util.Date --> java.time.LocalDate
    @Test
    public void UDateToLocalDate() {
        Date date = new Date();
        System.out.println("date:" + date);
        Instant instant = date.toInstant();
        ZoneId zone = ZoneId.systemDefault();
        LocalDateTime localDateTime = LocalDateTime.ofInstant(instant, zone);
        LocalDate localDate = localDateTime.toLocalDate();
        System.out.println("localDate:" + localDate);
    }


    // 03. java.util.Date --> java.time.LocalTime
    @Test
    public void UDateToLocalTime() {
        Date date = new Date();
        System.out.println("date:" + date);

        Instant instant = date.toInstant();
        ZoneId zone = ZoneId.systemDefault();
        LocalDateTime localDateTime = LocalDateTime.ofInstant(instant, zone);
        LocalTime localTime = localDateTime.toLocalTime();
        System.out.println("localTime:" + localTime);
    }


    // 04. java.time.LocalDateTime --> java.util.Date
    @Test
    public void LocalDateTimeToUdate() {
        LocalDateTime localDateTime = LocalDateTime.now();
        System.out.println("localDateTime:" + localDateTime);

        ZoneId zone = ZoneId.systemDefault();
        Instant instant = localDateTime.atZone(zone).toInstant();
        Date date = Date.from(instant);
        System.out.println("date:" + date);

    }


    // 05. java.time.LocalDate --> java.util.Date
    @Test
    public void LocalDateToUdate() {
        LocalDate localDate = LocalDate.now();
        System.out.println("localDate:" + localDate);

        ZoneId zone = ZoneId.systemDefault();
        Instant instant = localDate.atStartOfDay().atZone(zone).toInstant();
        Date date = Date.from(instant);
        System.out.println("date:" + date);

    }

    // 06. java.time.LocalTime --> java.util.Date
    @Test
    public void LocalTimeToUdate() {
        LocalTime localTime = LocalTime.now();
        System.out.println("localTime:" + localTime);

        LocalDate localDate = LocalDate.now();
        System.out.println("localDate:" + localDate);

        LocalDateTime localDateTime = LocalDateTime.of(localDate, localTime);
        ZoneId zone = ZoneId.systemDefault();
        Instant instant = localDateTime.atZone(zone).toInstant();
        Date date = Date.from(instant);
        System.out.println("date:" + date);
    }

标签：java,LocalDate,前端,util,date,开发,Date,Instant,小结
From： https://blog.51cto.com/u_15147537/5790838

前端小功能开发过程小结

LocalDate

LocalTime

JDBC

相关文章

赞助商

阅读排行