Custom Date Time picker using NumberPicker and Fra

2020-07-27 05:42发布

问题:

I want to a custom Date Time Picker Dialog exactly as shown in the image.

In my project this is dialog is shown when clicked on a TextView which is in a Fragment. I know that I need to use NumberPickers which populates the dates From Current date till all the dates next week.

The default android date and time pickers doesnt fit my required so I need to create my own custom `DateTimePicker fragmentDialog'.

My required DateTimePicker

<LinearLayout
android:background="@color/background_default_white"
style="@style/LinearPageLayout"
xmlns:android="http://schemas.android.com/apk/res/android">


<TextView
    android:textSize="20sp"
    android:textStyle="normal"
    android:textColor="@color/text_default_black"
    android:gravity="center"
    android:layout_gravity="center"
    android:id="@+id/custom_picker_title"
    android:background="@color/background_default_white"
    android:paddingLeft="15dp"
    android:layout_width="300dp"
    android:layout_height="45dp"
    android:text="@string/MessageChangeDateRange" />


<View
    android:visibility="visible" style="@style/Spliter" />

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginTop="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginBottom="25dp">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1.0">

        <NumberPicker
            android:layout_gravity="center"
            android:id="@+id/custom_picker_month"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1.0">

        <NumberPicker
            android:layout_gravity="center"
            android:id="@+id/custom_picker_date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />n 
    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2.3">

        <NumberPicker
            android:layout_gravity="center"
            android:id="@+id/custom_picker_date_full"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp" />
    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1.0">
        <NumberPicker
            android:layout_gravity="center"
            android:id="@+id/custom_picker_hour"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1.0">
        <NumberPicker
            android:layout_gravity="center"
            android:id="@+id/custom_picker_minute"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1.0">
        <NumberPicker
            android:layout_gravity="center"
            android:id="@+id/custom_picker_ampm"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

</LinearLayout>

<View style="@style/Spliter" />

<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <Button
        android:id="@+id/custom_picker_set"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/Set"
        style="@style/DefaultButtonFill" />
</LinearLayout>

EDIT: OK now this is what i was looking for but now i want to disable dates before today's date as well as show only 7 days Ex. if todays 10 feb then disable all date before 10 feb and show dates 10,11,12,14,15,16,17 feb only.

public class DatePickerFragment extends DialogFragment implements       View.OnClickListener {

String dates[];
NumberPicker datePicker, hourPicker, minutePicker;
Button doneButton, currentTimeButton;
Calendar rightNow = Calendar.getInstance();


@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    dates = getDatesFromCalender();

}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    Dialog getDialog = new Dialog(getActivity());
    View view = inflater.inflate(R.layout.custom, container);
    datePicker = (NumberPicker) view.findViewById(R.id.datePicker);
    hourPicker = (NumberPicker) view.findViewById(R.id.hourPicker);
    minutePicker = (NumberPicker) view.findViewById(R.id.minutePicker);
    doneButton = (Button) view.findViewById(R.id.doneButton);
    currentTimeButton = (Button) view.findViewById(R.id.currentTimeButton);
    datePicker.setMinValue(0);
    datePicker.setMaxValue(dates.length - 1);
    datePicker.setFormatter(new NumberPicker.Formatter() {

        @Override
        public String format(int value) {
            return dates[value];
        }
    });

    datePicker.setDisplayedValues(dates);
    hourPicker.setMinValue(0);
    hourPicker.setMaxValue(23);
    hourPicker.setValue(rightNow.get(Calendar.HOUR_OF_DAY));
    minutePicker.setMinValue(0);
    minutePicker.setMaxValue(59);
    minutePicker.setValue(rightNow.get(Calendar.MINUTE));
    doneButton.setOnClickListener(this);
    currentTimeButton.setOnClickListener(this);
    getDialog.setTitle("choose_time");
    return view;
}

private String[] getDatesFromCalender() {
    Calendar c1 = Calendar.getInstance();
    Calendar c2 = Calendar.getInstance();

    List<String> dates = new ArrayList<String>();
    DateFormat dateFormat = new SimpleDateFormat("EEE, dd MMM");
    dates.add(dateFormat.format(c1.getTime()));

    for (int i = 0; i < 60; i++) {
        c1.add(Calendar.DATE, 1);
        dates.add(dateFormat.format(c1.getTime()));
    }
    c2.add(Calendar.DATE, -60);

    for (int i = 0; i < 60; i++) {
        c2.add(Calendar.DATE, 1);
        dates.add(dateFormat.format(c2.getTime()));
    }
    return dates.toArray(new String[dates.size() - 1]);
}

@Override
public void onClick(View v) {
    Bundle args = new Bundle();
    if (v.getId() == R.id.doneButton) {
        //Handle selected time and date
        Toast.makeText(getActivity(), "", Toast.LENGTH_SHORT).show();
    } else if (v.getId() == R.id.currentTimeButton) {

    }


}

}