zh_date_picker 0.1.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 71

zh_date_picker #

中文版本日期选择控件,基于CupertinoDatePicker修改.

Why? #

已经存在CupertinoDatePicker,为什么需要再次封装中文版本?

  • 自带的对中文支持不友好,需要做本地化处理,eg:zh的日期展示(年-月-日),而默认是月-日-年
  • 自带的是属于iOS的Cupertino风格,滑动效果,与常规日期选择控件有出入
  • 自带的是一个裸widget,使用时候,需要再次封装成Dialog或新页面,添加一些操作按钮,才能使用
  • 自带的只能选择年月日,限制的比较死,不能选择年月日其他的组合,eg:年月,月日,年,月,日等

What? #

How? #

依赖library:

dependencies:
  zh_date_picker: ^0.1.0
  

在需要显示选择日期地方调用:


ZhCupertinoDatePickerDialog.show(
  context: context,
  selectStyle: select,
  titleText: '选择时间',
  dateType: ZhCupertinoDatePickerMode.date,
  onDateTimeSelect: (dateTime) {
    print('select Date:' + dateTime.toUtc().toString());
  },
  onDateTimeChanged: (dateTime) {
    setState(() {
      yearMonthDay = dateTime.year.toString() +
          '-' +
          dateTime.month.toString() +
          '-' +
          dateTime.day.toString();
    });
  });

更多使用,参见example,或者查看源码.

[0.1.1] -Done! Date picker for zh language,just use it now. #

  • 😁对中文日期更加友好的支持
  • 😁对UI进一步封装,更符合常规APP的使用

example/lib/main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:zh_date_picker/zh_date_pickers.dart';
import 'package:zh_date_picker/zh_date_picker_dialog.dart';

void main() => runApp(MyApp());

const TextStyle select = TextStyle(
    fontSize: 16, color: Colors.green, decoration: TextDecoration.none);

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DatePicker',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(title: 'Zh(中文版本)Date-Picker'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String yearMonthDay = '';
  String yearMonth = '';
  String monthDay = '';
  String year = '';
  String month = '';
  String day = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              OutlineButton(
                child: Text("(中文)选择年-月-日"),
                borderSide: BorderSide(color: Colors.grey, width: 2),
                disabledBorderColor: Colors.black,
                highlightedBorderColor: Colors.green,
                onPressed: () {
                  ZhCupertinoDatePickerDialog.show(
                      context: context,
                      selectStyle: select,
                      titleText: '选择时间',
                      dateType: ZhCupertinoDatePickerMode.date,
                      onDateTimeSelect: (dateTime) {
                        print('select Date:' + dateTime.toUtc().toString());
                      },
                      onDateTimeChanged: (dateTime) {
                        setState(() {
                          yearMonthDay = dateTime.year.toString() +
                              '-' +
                              dateTime.month.toString() +
                              '-' +
                              dateTime.day.toString();
                        });
                      });
                },
              ),
              Text(yearMonthDay),
              OutlineButton(
                child: Text("(中文)选择年-月"),
                borderSide: BorderSide(color: Colors.grey, width: 2),
                disabledBorderColor: Colors.black,
                highlightedBorderColor: Colors.green,
                onPressed: () {
                  ZhCupertinoDatePickerDialog.show(
                      context: context,
                      selectStyle: select,
                      dateType: ZhCupertinoDatePickerMode.yearAndMonth,
                      //初始化日期
                      initialDateTime: DateTime.utc(2020, 6, 6),
                      onDateTimeChanged: (dateTime) {
                        setState(() {
                          yearMonth = dateTime.year.toString() +
                              '-' +
                              dateTime.month.toString();
                        });
                      });
                },
              ),
              Text(yearMonth),
              OutlineButton(
                child: Text("(中文)选择月-日"),
                borderSide: BorderSide(color: Colors.grey, width: 2),
                disabledBorderColor: Colors.black,
                highlightedBorderColor: Colors.green,
                onPressed: () {
                  ZhCupertinoDatePickerDialog.show(
                      context: context,
                      selectStyle: select,
                      dateType: ZhCupertinoDatePickerMode.monthAndDay,
                      onDateTimeChanged: (dateTime) {
                        setState(() {
                          monthDay = dateTime.month.toString() +
                              '-' +
                              dateTime.day.toString();
                        });
                      });
                },
              ),
              Text(monthDay),
              OutlineButton(
                child: Text("(中文)选择年"),
                borderSide: BorderSide(color: Colors.grey, width: 2),
                disabledBorderColor: Colors.black,
                highlightedBorderColor: Colors.green,
                onPressed: () {
                  ZhCupertinoDatePickerDialog.show(
                      context: context,
                      selectStyle: select,
                      dateType: ZhCupertinoDatePickerMode.year,
                      onDateTimeChanged: (dateTime) {
                        setState(() {
                          year = dateTime.year.toString();
                        });
                      });
                },
              ),
              Text(year),
              OutlineButton(
                child: Text("(中文)选择月"),
                borderSide: BorderSide(color: Colors.grey, width: 2),
                disabledBorderColor: Colors.black,
                highlightedBorderColor: Colors.green,
                onPressed: () {
                  ZhCupertinoDatePickerDialog.show(
                      context: context,
                      selectStyle: select,
                      dateType: ZhCupertinoDatePickerMode.month,
                      onDateTimeChanged: (dateTime) {
                        setState(() {
                          month = dateTime.month.toString();
                        });
                      });
                },
              ),
              Text(month),
              OutlineButton(
                child: Text("(中文)选择日"),
                borderSide: BorderSide(color: Colors.grey, width: 2),
                disabledBorderColor: Colors.black,
                highlightedBorderColor: Colors.green,
                onPressed: () {
                  ZhCupertinoDatePickerDialog.show(
                      context: context,
                      selectStyle: select,
                      dateType: ZhCupertinoDatePickerMode.day,
                      onDateTimeChanged: (dateTime) {
                        setState(() {
                          day = dateTime.day.toString();
                        });
                      });
                },
              ),
              Text(day),
            ],
          ),
        ));
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  zh_date_picker: ^0.1.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:zh_date_picker/zh_date_picker_dialog.dart';
import 'package:zh_date_picker/zh_date_pickers.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
43
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
71
Learn more about scoring.

We analyzed this package on Jul 2, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.13
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

because of import path [zh_date_picker] that is in a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8
Dev dependencies
flutter_test