diff options
| author | Adrián Oliva <adrian.oliva@cimat.mx> | 2023-05-17 18:38:28 -0600 |
|---|---|---|
| committer | Adrián Oliva <adrian.oliva@cimat.mx> | 2023-05-17 18:38:28 -0600 |
| commit | 163398f68444d278eb83543ba9798a6441c8af9f (patch) | |
| tree | a0a6a449013e8ec969c19ed9c673c475e5e769c5 /index.html | |
| parent | 316f43a0f8db27620ba53bf5993f569a969742b5 (diff) | |
| download | ToDo-App-FE-163398f68444d278eb83543ba9798a6441c8af9f.tar.gz ToDo-App-FE-163398f68444d278eb83543ba9798a6441c8af9f.zip | |
Modal interface for new To Do.
Hardest one yet. I don't know how I did it, but I used the
`bootstrap-datepicker` plugin for selecting the Due Date.
(https://github.com/uxsolutions/bootstrap-datepicker)
Diffstat (limited to '')
| -rw-r--r-- | index.html | 25 |
1 files changed, 25 insertions, 0 deletions
@@ -5,6 +5,31 @@ <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> </head> <body> <div id="root"></div> |