commit 3d4a589e5dc8f97a5fe94f5f8f42b97f2b6c7b52
parent 07491303de190e46b53ade3609c74d826174e60b
Author: Adrián Oliva <[email protected]>
Date: Fri, 19 May 2023 17:34:29 -0600
The date selection was MUCH easier than I thought...
I'm mad. :C
Diffstat:
2 files changed, 16 insertions(+), 57 deletions(-)
diff --git a/index.html b/index.html
@@ -5,45 +5,6 @@
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
-
- <!--Font Awesome (added because you use icons in your prepend/append)-->
- <script src="https://kit.fontawesome.com/090a180a9a.js" crossorigin="anonymous"></script>
-
- <!-- Include jQuery -->
- <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
-
- <!-- Include Date Range Picker -->
- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js"></script>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker3.css"/>
-
- <script>
- $(document).ready(function(){
- var date_input=$('input[name="new-todo-due-date"]');
- var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
- date_input.datepicker({
- format: 'mm/dd/yyyy',
- container: container,
- todayHighlight: true,
- autoclose: true,
- maxViewMode: 3,
- todayBtn: "linked"
- })
- })
- </script>
- <script>
- $(document).ready(function(){
- var date_input=$('input[name="edit-todo-due-date"]');
- var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
- date_input.datepicker({
- format: 'mm/dd/yyyy',
- container: container,
- todayHighlight: true,
- autoclose: true,
- maxViewMode: 3,
- todayBtn: "linked"
- })
- })
- </script>
</head>
<body>
<div id="root"></div>
diff --git a/src/ToDo.jsx b/src/ToDo.jsx
@@ -15,6 +15,7 @@ export function NewToDo() {
const dispatch = useDispatch();
const [new_text, set_new_text] = useState("");
+ const [new_due_date, set_new_due_date] = useState("");
const [new_done, set_new_done] = useState(false);
const [new_priority, set_new_priority] = useState("Low");
@@ -23,6 +24,7 @@ export function NewToDo() {
$("form").get(0).reset(); // Reset form
set_new_text("");
+ set_new_due_date("");
set_new_done(false);
set_new_priority("Low");
}
@@ -88,15 +90,17 @@ export function NewToDo() {
<label htmlFor="new-todo-text">Text</label>
</div>
<div className="input-group mb-3">
- <span className="input-group-text">
- <i className="fa-regular fa-calendar"></i>
- </span>
<div className="form-floating">
<input
className="form-control"
+ type="date"
id="new-todo-due-date"
- name="new-todo-due-date"
placeholder="Due date"
+ onChange={(e) => {
+ set_new_due_date(
+ e.target.value
+ );
+ }}
/>
<label htmlFor="new-todo-due-date">
Due Date
@@ -155,11 +159,7 @@ export function NewToDo() {
dispatch(
add_todo({
text: new_text,
- // Cannot update date on change. :'(
- due_date:
- document.getElementById(
- "new-todo-due-date"
- ).value,
+ due_date: new_due_date,
done: new_done,
priority: new_priority,
creation_date:
@@ -330,16 +330,18 @@ export function ListToDos() {
<label htmlFor="edit-todo-text">Text</label>
</div>
<div className="input-group mb-3">
- <span className="input-group-text">
- <i className="fa-regular fa-calendar"></i>
- </span>
<div className="form-floating">
<input
className="form-control"
+ type="date"
id="edit-todo-due-date"
- name="edit-todo-due-date"
placeholder="Due date"
value={edit_due_date}
+ onChange={(e) => {
+ set_edit_due_date(
+ e.target.value
+ );
+ }}
/>
<label htmlFor="edit-todo-due-date">
Due Date
@@ -399,11 +401,7 @@ export function ListToDos() {
edit_todo({
id: edit_id,
text: edit_text,
- // Cannot update date on change. :'(
- due_date:
- document.getElementById(
- "edit-todo-due-date"
- ).value,
+ due_date: edit_due_date,
done: edit_done,
priority: edit_priority,
})
